vue axios实现双token无感刷新

流程

1.首先，登录得到了两个token，并将其存起来
2.当access_token过期时，自动发送refresh_token到刷新token的请求路径请求token刷新
3.得到新的token之后，将请求重新发送，实现用户无感刷新token

代码

主要在响应拦截中，进行token的无感刷新

import axios from 'axios'
import {Message} from 'element-ui'
import router from '../router/index'
import store from '@/store'
import { getToken, getFreshToken } from '@/utils/auth'
import Api from '@/api/login'

// 超时设定
axios.defaults.timeout = 200000

// 请求拦截器
axios.interceptors.request.use(config => {
  const hasToken = store.getters['user/token']
  if (hasToken) {
    config.headers['Authorization'] = 'Bearer ' + getToken()
  }
  return config
}, err => {
  Message.error('系统繁忙，请稍候再试。')
  return Promise.resolve(err)
})

// 响应拦截器
//标志当前是否正在刷洗token
let isNotRefreshing = true;
//请求队列
let requests = [];
axios.interceptors.response.use((response) => {
  const data = response
  const status = data.data.code
  const config = response.config;
  let text = ''
  switch (status) {
    case '4030':
      // 刷新token
      if (getFreshToken() != null) {
        if (isNotRefreshing) {
          isNotRefreshing = false;
          return Api.refreshToken({refresh_token: getFreshToken()}).then(res => {
              if (res.data.code != '200') {
                window.sessionStorage.clear()
                window.localStorage.clear()
                if(document.getElementsByClassName('el-message').length < 1){
                  Message({
                    showClose: true,
                    message: res.data.message,
                    type: 'warning'
                  })
                }
                router.push({
                  path: '/login'
                })
                return false
              } else {
                window.sessionStorage.setItem('FRESH ', res.data.data.refresh_token)
                window.sessionStorage.setItem('Bearer ', res.data.data.access_token)
                //执行requests队列中的请求，（requests中存的不是请求参数，而是请求的Promise函数，这里直接拿来执行就好）
                requests.forEach(run => run())
                //将请求队列置空
                requests = []
                //重新执行当前未执行成功的请求并返回
                return axios(config);
              }
            }).catch(() => {
              window.sessionStorage.clear()
              window.localStorage.clear()
              router.push({
                path: '/login'
              })
            })
            .finally(() => {
              isNotRefreshing = true;
            })
        }else{
          return new Promise(resolve => {
            //这里加入的是一个promise的解析函数，将响应的config配置对应解析的请求函数存到requests中，等到刷新token回调后再执行
              requests.push(() => {
                  resolve(axios(config));
              })
          })
        }
        
      }else{
        if(document.getElementsByClassName('el-message').length < 1){
          Message({
            showClose: true,
            message: '请重新登录！',
            type: 'warning'
          })
        }
        window.sessionStorage.clear()
        window.localStorage.clear()
        router.push({
          path: '/login'
        })
      }
      break
    case '402':
      text = '您已超时，请重新登录。'
      if(document.getElementsByClassName('el-message').length < 1){
        Message({
          showClose: true,
          message: text,
          type: 'warning'
        })
      }
      window.sessionStorage.clear()
      window.localStorage.clear()
      router.push({
        path: '/login'
      })
      break
  }
  return data
}, (error) => {
  // 返回状态码不为200时候的错误处理
  var reg = /[^0-9]/ig
  const errorContent = JSON.parse(JSON.stringify(error)).message
  const status = errorContent.replace(reg, '')
  let text = ''
  switch (status) {
    case '402':
      // 请求接口
      Message({
        showClose: true,
        message: '由于您长时间没有操作，请您重新登录',
        type: 'warning'
      })
      // window.sessionStorage.clear()
      // window.localStorage.clear()
      // window.location.href = '/login'
      break
    case '403':
      break
    case '500':
      text = '服务器开小差了，请稍后再试'
      Message({
        showClose: true,
        message: text,
        type: 'warning'
      })
      break
    case '404':
      text = '网络异常，请重试'
      Message({
        showClose: true,
        message: text,
        type: 'warning'
      })
      break
    default:
      // text = '服务器开小差了'
      // Message({
      //   showClose: true,
      //   message: text,
      //   type: 'warning'
      // })
  }
})
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159

参考网址：

https://blog.csdn.net/m0_48468380/article/details/121577011