VUE拦截请求并无感知刷新token
应用场景
前端登录后，后端返回token和token失效时间，当达到特定条件（本文以距离token过期两小时为例），前端需要主动请求token刷新接口去获取一个新的token，做到用户无感知地去刷新token。
思路
拦截请求判断是否达到需要刷新token的条件，符合条件则刷新token并将请求存入一个重试队列中，当token刷新后，执行重试队列中的函数，达到刷新token的效果，
需要注意的是，当多个请求几乎同时进来时，为了避免多次执行token刷新，需要定义一个变量（本文变量名为isRefreshing ）进行标记。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | 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 { 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; |
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持IT俱乐部。
