系统登录成功后,后端返回token和refreshToken,所有请求都携带token,token如果过期接口将返回401,此时前端需要拿着refreshToken去刷新token,刷新后将拿到新的token和refreshToken,并将token过期的请求重新发起,这样就做到了在用户没有任何感知的情况下自动刷新token。
request.js中的代码
//默认不是正在刷新token
let isRefreshToken = false;
let promiseArry = [];
//当token失效时
if(res.errcode===401){
//如果没有正在刷新token
if(!isRefreshToken){
isRefreshToken=true;
//刷新token
store.dispatch('SetToken').then((res)=>{
//刷新token成功后,将正在刷新token时发起的请求重新发起
promiseArry.forEach(item=>item());
//发起后将promiseArry置空
promiseArry=[];
return Axios(response.config);
}).catch(error=>{
isRefreshToken=false;
return Promise.reject(res);
});
}else{
//如果正在刷新token,将发起的请求暂存在promiseArry中
return new Promise((resolve)=>{
promiseArry.push(item=>{
resolve(Axios(response.config));
})
})
}
}
vuex中的代码
import { getToken, setToken, removeToken } from '@/assets/js/auth';
import router from '@/router';
const user = {
state: {
token: getToken(),
refreshToken:'',
},
mutations: {
SET_TOKEN: (state, token) => {
state.token = token;
setToken(token);
},
SET_REFRESHTOKEN:(state,refreshToken) => {
state.refreshToken=refreshToken
}
},
actions: {
//设置token
SetToken({ commit }) {
return new Promise((resolve,reject)=>{
let params = {
client_id:"c1ebe466-1cdc-4bd3-ab69-77c3561b9dee",
client_secret:"d8346ea2-6017-43ed-ad68-19c0f971738b",
grant_type:"refresh_token",
refresh_token:user.state.refreshToken
}
console.log(params)
oauthToken(params).then(response=>{
commit('SET_TOKEN', response.accessToken);
commit('SET_REFRESHTOKEN', response.refreshToken);
resolve(response);
}).catch(error=>{
reject(error);
});
});
}
}
};
export default user;
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)