總:通過axios,vuex,及自定義的方法實(shí)現(xiàn)。
以下是思路:
1.做token刷新必不可少的是,token(請求時的token) / refresh_token(刷新token時用的refresh_token) / resetTime(token有效時間)
2.通過axios請求-回復(fù)來做相應(yīng)的操作,具體實(shí)現(xiàn)如下:
對應(yīng)修改之處:(自己看的,如果疑問,可留言)
一、在 main.js中 ,寫入如下代碼
import axios from 'axios'
import { getRefreshToken, isRefreshTokenExpired} from './assets/js/format' //刷新token的接口與過期時間倒計時
window.isReresh = false;//用于判斷是否刷新,不能少
// 添加請求攔截器,在請求頭中加token
axios.interceptors.request.use(
config => {
let token = sessionStorage.getItem('Authorization');
if (token) {
config.headers.Authorization = token;
}
return config;
},
error => {
return Promise.reject(error);
});
// http response 攔截器
axios.interceptors.response.use(
response => {
let resetTime= sessionStorage.getItem('resetTime');
let token = sessionStorage.getItem('Authorization');
if(token){//有沒有token
isRefreshTokenExpired(resetTime);
if(resetTime<1200){//時間少于20分鐘(1200),20分鐘之內(nèi)為期限
if(!window.isReresh){
window.isReresh = true;
let refresh_token = sessionStorage.getItem('refresh_token')
getRefreshToken(refresh_token).then(res => {
window.isReresh = false;
isRefreshTokenExpired(res.data.resetTime);// 重新獲取的token有效時間
store.commit('changeLogin',{//vuex中修改相關(guān)信息
Authorization:res.data.access_token,
token_type:res.data.token_type,
refresh_token:res.data.refresh_token,
});
}).catch(err => {});
}
}else window.isReresh = false;
}
return response; //請求成功的時候返回的data
},
error => {
try {
if (error.response) {
endLoading();
switch (error.response.status) {
case 401://token過期,清除它,清除token信息并跳轉(zhuǎn)到登錄頁面
store.commit('DelToken');
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath//登錄之后跳轉(zhuǎn)到對應(yīng)頁面
}
});
return;
case 403://權(quán)限
store.commit('DelToken');
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath//登錄之后跳轉(zhuǎn)到對應(yīng)頁面
}
});
return;
}
}
return Promise.reject(error.response.data)
}
catch (e) {
}
});
二、在 自定義的jsformat.js中 ,寫入如下代碼
export function getRefreshToken(param) { // 刷新token 注意這里用到的service
let params = {
refreshToken:param
}
return axios.post(baseUrl+'/account-center/refresh/token',params)
.then((res) => {
return Promise.resolve(res.data)
})
}
export function isRefreshTokenExpired(timestamp) {
clearInterval(window.interval);
window.interval = setInterval(()=>{
timestamp=timestamp-1
sessionStorage.setItem('resetTime',timestamp)
},1000)
}
三、在vuex中的mutation中
changeLogin: function (state, user ) {
// CryptoJS.enc.Base64.stringify(obj) 加密
// CryptoJS.enc.Base64.parse(base64).toString(CryptoJS.enc.Utf8) 解密
state.Authorization = user.token_type + ' ' + user.Authorization;
state.refresh_token = user.refresh_token;
state.user_message = CryptoJS.enc.Base64.parse(user.Authorization.split('.')[1]).toString(CryptoJS.enc.Utf8);
sessionStorage.setItem('Authorization', state.Authorization);
sessionStorage.setItem('user_message', state.user_message);
sessionStorage.setItem('refresh_token', state.refresh_token);
},
DelToken(state){
state.Authorization = '';
sessionStorage.clear();
},