VUE中拦截请求并无感知刷新token方式

陈侠

VUE拦截请求并无感知刷新token


应用场景

前端登录后，后端返回token和token失效时间，当达到特定条件（本文以距离token过期两小时为例），前端需要主动请求token刷新接口去获取一个新的token，做到用户无感知地去刷新token。

思路

拦截请求判断是否达到需要刷新token的条件，符合条件则刷新token并将请求存入一个重试队列中，当token刷新后，执行重试队列中的函数，达到刷新token的效果，
需要注意的是，当多个请求几乎同时进来时，为了避免多次执行token刷新，需要定义一个变量（本文变量名为isRefreshing ）进行标记。

1. import axios from "axios";
   
2. import store from "@/store";
   
3. import md5 from "js-md5";
   
4. import {
   
5.   setToken,
   
6.   getToken,
   
7.   setUid,
   
8.   setExpireTime,
   
9.   getExpireTime
   
10. } from "@/utils/auth";
    
11. 
    
12. // 创建axios实例
    
13. const service = axios.create({
    
14.   // axios中请求配置有baseURL选项，表示请求URL公共部分
    
15.   baseURL: window.location.protocol + process.env.VUE_APP_BASE_API,
    
16.   // 超时
    
17.   timeout: 10000
    
18. });
    
19. 
    
20. // 是否正在刷新的标记
    
21. let isRefreshing = false;
    
22. 
    
23. // 重试队列，每一项将是一个待执行的函数形式
    
24. let requests = [];
    
25. 
    
26. // 判断是否距离过期2个小时
    
27. function isRefreshTokenExpired() {
    
28.   const expire_time = getExpireTime(); // 到期时间
    
29.   const new_time = new Date().getTime(); // 当前时间
    
30.   const stamp = expire_time - new_time; // 距离到期时间
    
31.   return stamp <= 2 * 60 * 60 * 1000 ? true : false; // 2小时
    
32. }
    
33. 
    
34. // request拦截器
    
35. service.interceptors.request.use(
    
36.   config => {
    
37.     const tokenObj = getToken();
    
38.     if (config.data.method === "xxxx") { //当请求的接口为token刷新接口时
    
39.       return config;
    
40.     }
    
41.     if (tokenObj && isRefreshTokenExpired()) {
    
42.       // 立即刷新token
    
43.       if (!isRefreshing) {
    
44.         isRefreshing = true;
    
45.         // 请求token刷新接口
    
46.         store
    
47.           .dispatch("RefeshToken")
    
48.           .then(res => {
    
49.             const token = res.data.token;
    
50.             const time = res.data.expire_time.replace(/-/g, "/");
    
51.             const expire_time = new Date(time);
    
52.             setToken(token, expire_time);
    
53.             setExpireTime(new Date(res.data.expire_time).getTime(), expire_time);
    
54.             setUid(res.data.uid, expire_time);
    
55.             isRefreshing = false;
    
56.             return token;
    
57.           })
    
58.           .then(token => {
    
59.             requests.forEach(cb => cb(token));
    
60.             // 执行完成后，清空队列
    
61.             requests = [];
    
62.           })
    
63.           .catch(res => {
    
64.             console.error("refresh token error: ", res);
    
65.           });
    
66.       }
    
67.       const retryOriginalRequest = new Promise(resolve => {
    
68.         requests.push(token => {
    
69.           // 因为config中的token是旧的，所以刷新token后要将新token传进来
    
70.           config.headers["ContentToken"] = token;
    
71.           resolve(config);
    
72.         });
    
73.       });
    
74.       return retryOriginalRequest;
    
75.     }
    
76.     return config;
    
77.   },
    
78.   error => {
    
79.     Promise.reject(error);
    
80.   }
    
81. );
    
82. 
    
83. // 响应拦截器
    
84. service.interceptors.response.use(
    
85.   res => {
    
86.     if (res.status === 200) {
    
87.             return res
    
88.     }
    
89.   },
    
90.   error => {
    
91.            console.log('catch', error)
    
92.           return Promise.reject(error)
    
93.   }
    
94. );
    
95. 
    
96. export default service;

复制代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/326741v10.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！