vue拦截器如何增加token参数

三无先森

vue拦截器增加token参数


使用请求拦截器，拦截vue所有请求，增加token参数

使用倒数计时，假如token有效期60分钟，会在59分钟的时候去重新拿着refresh_Token，去请求新的token.

注意

如果一个账号允许多人登录使用，上述方法没有问题
但是如果一个账号只允许一人登录，一个地点登录，那上述方法就不那么全面
这时候可以采用使用响应拦截器，拦截状态码进行对应的异常处理
然后判断哪些是token失效，再进行对应的登出操作或者是重新获取token

完整代码

1. import axios from 'axios'
   
2. import { getToken } from '@/utils/auth'
   
3. import { getToken_refresh } from '@/api/users'
   
4. import router from '../router/index';
   
5. 
   
6. // 创建axios实例
   
7. const service = axios.create({
   
8.   baseURL: 'http://122.152.250.75:10101', // api的base_url
   
9.   // baseURL: 'http://127.0.0.1:8081/auth',
   
10.   timeout: 10000 // 请求超时时间
    
11. })
    
12. 
    
13. /*是否有请求正在刷新token*/
    
14. window.isRefreshing = false
    
15. /*被挂起的请求数组*/
    
16. let refreshSubscribers = []
    
17. 
    
18. /*获取刷新token请求的token*/
    
19. function getRefreshToken () {
    
20.   return localStorage.getItem("refresh_token")
    
21. }
    
22. 
    
23. /*push所有请求到数组中*/
    
24. function subscribeTokenRefresh (cb) {
    
25.   refreshSubscribers.push(cb)
    
26. }
    
27. 
    
28. /*刷新请求（refreshSubscribers数组中的请求得到新的token之后会自执行，用新的token去请求数据）*/
    
29. function onRrefreshed (token) {
    
30.   refreshSubscribers.map(cb => cb(token))
    
31. }
    
32. 
    
33. // request 请求拦截器
    
34. service.interceptors.request.use(config => {
    
35.   if (getToken()) {
    
36.     config.params['access_token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
    
37.     /*判断token是否将要过期*/
    
38.     var istoken = isTokenExpired();
    
39.     if (istoken) {
    
40.       /*判断是否正在刷新*/
    
41.       if (!window.isRefreshing) {
    
42.         /*将刷新token的标志置为true*/
    
43.         window.isRefreshing = true
    
44.         /*发起刷新token的请求*/
    
45.         var params = {
    
46.           refresh_token: localStorage.getItem('refresh_Token'),
    
47.         };
    
48.         getToken_refresh(params).then((res) => {
    
49.           /*将标志置为false*/
    
50.           window.isRefreshing = false
    
51.           /*成功刷新token*/
    
52.           // config.headers.Authorization = res.data.data.token_type + ' ' + res.data.data.token
    
53.           /*更新auth*/
    
54.           if(res.data.code == 0){
    
55.             alert("登录超时，请重新登录");
    
56.             router.push({ path: '/login' })
    
57.             return
    
58.           }
    
59.           localStorage.setItem('Token',res.data.data.access_token);
    
60.           localStorage.setItem('refresh_Token',res.data.data.refresh_token);
    
61.           localStorage.setItem("expired_at",res.data.data.expired_at);
    
62.           config.params['access_token'] = getToken()
    
63.           /*执行数组里的函数,重新发起被挂起的请求*/
    
64.           onRrefreshed(res.data.data.access_token)
    
65.           /*执行onRefreshed函数后清空数组中保存的请求*/
    
66.           refreshSubscribers = []
    
67.         }).catch(err => {
    
68.           alert(err.response.data.message)
    
69.           /*清除本地保存的auth*/
    
70.           // localStorage.removeItem('auth')
    
71.           window.location.href = '#/login'
    
72.         })
    
73.       }
    
74.       /*把请求(token)=>{....}都push到一个数组中*/
    
75.       let retry = new Promise((resolve, reject) => {
    
76.         /*(token) => {...}这个函数就是回调函数*/
    
77.         subscribeTokenRefresh((token) => {
    
78.           // config.headers.Authorization = 'Bearer ' + token
    
79.           config.params['access_token'] = token
    
80.           /*将请求挂起*/
    
81.           resolve(config)
    
82.         })
    
83.       })
    
84.       return retry
    
85.     }
    
86.   }else{
    
87.     router.push({ path: '/login' })
    
88.   }
    
89.   return config
    
90. }, error => {
    
91.   // Do something with request error
    
92.   console.log("11111"+error) // for debug
    
93.   Promise.reject(error)
    
94. })
    
95. 
    
96. // response 响应拦截器
    
97. service.interceptors.response.use(
    
98.   response => {
    
99.     // console.log(response)
    
100.     if (response.status !== 200) {
     
101.       if(response.status === 500) { // 服务器断开
     
102.         this.$message({
     
103.           showClose: true,
     
104.           message: '服务器断开，请稍后重试。',
     
105.           type: 'error'
     
106.         });
     
107.       }
     
108.       return Promise.reject(new Error(response.message || 'Error'))
     
109.     } else {
     
110.       return response
     
111.     }
     
112.   },error => {
     
113.     // console.log("cesc"+error)
     
114.     if (error.response.status === 401) { // token失效 ,重新获取token
     
115.         var params = {
     
116.           refresh_token: localStorage.getItem('refresh_Token'),
     
117.         };
     
118.         getToken_refresh(params).then((res) => {
     
119.           /*更新auth*/
     
120.           if(res.data.code == 0){
     
121.             alert("登录超时，请重新登录");
     
122.             router.push({ path: '/login' })
     
123.             return
     
124.           }
     
125.           localStorage.setItem('Token',res.data.data.access_token);
     
126.           localStorage.setItem('refresh_Token',res.data.data.refresh_token);
     
127.           localStorage.setItem("expired_at",res.data.data.expired_at);
     
128.         }).catch(err => {
     
129.           alert(err.response.data.message)
     
130.           /*清除本地保存的auth*/
     
131.           // localStorage.removeItem('auth')
     
132.           window.location.href = '#/login'
     
133.         })
     
134.       }else if(error.response.status === 500) { // 服务器断开
     
135.       alert("服务器断开，请稍后重试。");
     
136.     }else if(error.response.status === 403){ //无auth授权，后台不允许访问
     
137.       alert("不允许访问,请与技术人员联系");
     
138.     }
     
139.       return response
     
140.     return Promise.reject(error)
     
141.   }
     
142. )
     
143. /*判断token是否过期*/
     
144. function isTokenExpired() {
     
145.   let expiredTime =  new Date().getTime() / 1000;
     
146.   /*从localStorage中取出token过期时间*/
     
147.   if(localStorage.getItem("expired_at") != undefined && localStorage.getItem("expired_at") != "undefined"){
     
148.     expiredTime = new Date(localStorage.getItem("expired_at")).getTime() / 1000
     
149.   }
     
150.   /*获取本地时间*/
     
151.   let nowTime = new Date().getTime() / 1000
     
152. 
     
153.   /*如果 < 10分钟，则说明即将过期*/
     
154.   var flag = (expiredTime - nowTime) < 10*60;
     
155.   // return (expiredTime - nowTime) < 10*60;
     
156.   return flag;
     
157. }
     
158. export default service

复制代码

总结

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

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