11 changed files with 255 additions and 156 deletions
@ -0,0 +1,23 @@ |
|||||||
|
import { defineStore } from 'pinia' |
||||||
|
|
||||||
|
export const useTokenStore = defineStore('token', { |
||||||
|
state: () => ({ |
||||||
|
access_token: null, |
||||||
|
refresh_token: null, |
||||||
|
}), |
||||||
|
actions: { |
||||||
|
setAccessToken(token) { |
||||||
|
this.access_token = token |
||||||
|
}, |
||||||
|
setRefreshToken(token) { |
||||||
|
this.refresh_token = token |
||||||
|
}, |
||||||
|
removeTokens() { |
||||||
|
this.access_token = null |
||||||
|
this.refresh_token = null |
||||||
|
} |
||||||
|
}, |
||||||
|
persist: { |
||||||
|
enabled: true, |
||||||
|
} |
||||||
|
}) |
||||||
@ -0,0 +1,76 @@ |
|||||||
|
import axios from 'axios' |
||||||
|
import { getActivePinia } from 'pinia' |
||||||
|
import { useTokenStore } from "@/stores/useTokenStore"; |
||||||
|
import router from "@/router"; |
||||||
|
|
||||||
|
axios.defaults.baseURL = '' |
||||||
|
axios.defaults.timeout = 10000 |
||||||
|
|
||||||
|
|
||||||
|
// 注册请求拦截器
|
||||||
|
axios.interceptors.request.use(config => { |
||||||
|
const pinia = getActivePinia() |
||||||
|
const tokens = useTokenStore(pinia) |
||||||
|
|
||||||
|
const accessToken = tokens.access_token |
||||||
|
if (accessToken) { |
||||||
|
config.headers['Authorization'] = 'Bearer ' + accessToken |
||||||
|
// console.log(config.headers)
|
||||||
|
} |
||||||
|
// console.log(config.headers)
|
||||||
|
return config |
||||||
|
}, error => { |
||||||
|
console.log(error) |
||||||
|
return Promise.reject(error) |
||||||
|
}) |
||||||
|
|
||||||
|
// 注册响应拦截器
|
||||||
|
axios.interceptors.response.use(response => { |
||||||
|
const pinia = getActivePinia() |
||||||
|
const tokens = useTokenStore(pinia) |
||||||
|
|
||||||
|
const newAccessToken = response.data.accessToken |
||||||
|
if (newAccessToken) { |
||||||
|
tokens.access_token = newAccessToken |
||||||
|
} |
||||||
|
// console.log("res.interceptors-:" + JSON.stringify(response))
|
||||||
|
return response |
||||||
|
}, async (error) => { |
||||||
|
const pinia = getActivePinia() |
||||||
|
const tokens = useTokenStore(pinia) |
||||||
|
// console.log("err.interceptors-:" + JSON.stringify(error.response))
|
||||||
|
// 401 错误，说明 access_token 过期了，需要用 refresh_token 来刷新
|
||||||
|
if (error.response && error.response.status === 401) { |
||||||
|
const refreshToken = tokens.refresh_token |
||||||
|
if (refreshToken) { |
||||||
|
try { |
||||||
|
// console.log("refresh-token-req:" + refreshToken)
|
||||||
|
const res = await axios.create().post('api/refresh-token', { refreshToken: refreshToken }) |
||||||
|
// console.log("refresh-token-res:" + JSON.stringify(res))
|
||||||
|
// 如果刷新成功，就更新本地存储中的 token，并且重新发送之前失败的请求
|
||||||
|
if (res.data && res.data.accessToken) { |
||||||
|
tokens.setAccessToken(res.data.accessToken) |
||||||
|
tokens.setRefreshToken(res.data.refreshToken) |
||||||
|
return axios.request(error.config) |
||||||
|
} |
||||||
|
} catch (err) { |
||||||
|
// 如果刷新失败，就清除本地存储中的 token，并且跳转到登录页面
|
||||||
|
tokens.removeTokens() |
||||||
|
// 给用户一个提示或者一个重试的机会
|
||||||
|
alert('您的登录已过期，请重新登录') |
||||||
|
// 将用户的当前状态保存起来，以便在登录后恢复
|
||||||
|
localStorage.setItem('current_route', router.currentRoute.value) |
||||||
|
router.push('/login') |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
error.message = '请求失败：' + error.message |
||||||
|
if (error.response && error.response.status === 404) { |
||||||
|
error = new NotFoundError(error.message) |
||||||
|
} |
||||||
|
return Promise.reject(error) |
||||||
|
}) |
||||||
|
|
||||||
|
export function request(config) { |
||||||
|
return axios(config) |
||||||
|
} |
||||||
Loading…
Reference in new issue