我要评论vue拦截请求并无感知刷新token
应用场景
前端登录后，后端返回token和token失效时间，当达到特定条件（本文以距离token过期两小时为例），前端需要主动请求token刷新接口去获取一个新的token，做到用户无感知地去刷新token。
思路
拦截请求判断是否达到需要刷新token的条件，符合条件则刷新token并将请求存入一个重试队列中，当token刷新后，执行重试队列中的函数，达到刷新token的效果，
需要注意的是，当多个请求几乎同时进来时，为了避免多次执行token刷新，需要定义一个变量（本文变量名为isrefreshing ）进行标记。
import axios from "axios";
import store from "@/store";
import md5 from "js-md5";
import {
settoken,
gettoken,
setuid,
setexpiretime,
getexpiretime
} from "@/utils/auth";
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseurl选项，表示请求url公共部分
baseurl: window.location.protocol + process.env.vue_app_base_api,
// 超时
timeout: 10000
});
// 是否正在刷新的标记
let isrefreshing = false;
// 重试队列，每一项将是一个待执行的函数形式
let requests = [];
// 判断是否距离过期2个小时
function isrefreshtokenexpired() {
const expire_time = getexpiretime(); // 到期时间
const new_time = new date().gettime(); // 当前时间
const stamp = expire_time - new_time; // 距离到期时间
return stamp <= 2 * 60 * 60 * 1000 ? true : false; // 2小时
}
// request拦截器
service.interceptors.request.use(
config => {
const tokenobj = gettoken();
if (config.data.method === "xxxx") { //当请求的接口为token刷新接口时
return config;
}
if (tokenobj && isrefreshtokenexpired()) {
// 立即刷新token
if (!isrefreshing) {
isrefreshing = true;
// 请求token刷新接口
store
.dispatch("refeshtoken")
.then(res => {
const token = res.data.token;
const time = res.data.expire_time.replace(/-/g, "/");
const expire_time = new date(time);
settoken(token, expire_time);
setexpiretime(new date(res.data.expire_time).gettime(), expire_time);
setuid(res.data.uid, expire_time);
isrefreshing = false;
return token;
})
.then(token => {
requests.foreach(cb => cb(token));
// 执行完成后，清空队列
requests = [];
})
.catch(res => {
console.error("refresh token error: ", res);
});
}
const retryoriginalrequest = new promise(resolve => {
requests.push(token => {
// 因为config中的token是旧的，所以刷新token后要将新token传进来
config.headers["contenttoken"] = token;
resolve(config);
});
});
return retryoriginalrequest;
}
return config;
},
error => {
promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
res => {
if (res.status === 200) {
return res
}
},
error => {
console.log('catch', error)
return promise.reject(error)
}
);
export default service;
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论