总:通过axios,vuex,及自定义的方法实现。
以下是思路:
1.做token刷新必不可少的是,token(请求时的token) / refresh_token(刷新token时用的refresh_token) / resetTime(token有效时间)
2.通过axios请求-回复来做相应的操作,具体实现如下:
对应修改之处:(自己看的,如果疑问,可留言)
一、在 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分钟之内为期限
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中修改相关信息
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信息并跳转到登录页面
store.commit('DelToken');
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath//登录之后跳转到对应页面
}
});
return;
case 403://权限
store.commit('DelToken');
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath//登录之后跳转到对应页面
}
});
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();
},
网友评论