Vue项目实现token无感刷新的示例代码

// 创建 axios 实例
const request = axios.create({
  // API 请求的默认前缀
  baseURL: baseUrl,
  withCredentials: true,
  timeout: 30000 // 请求超时时间
})
// 此处是为了为了防止多次刷新token，可以通过一个变量isRefreshing 去控制是否在刷新token的状态。
let isRefreshing = false // 是否正在刷新的标记
此次为了解决同时发起两个或两个以上的请求时，过期如何处理
let requests = [] // 重试队列
// 异常拦截处理器
const errorHandler = error => {
  if (error.response) {
   //token过期状态码
    if (error.response.status === 401) {
      if (!isRefreshing) {
        // 正在刷新，执行else里面的逻辑
        isRefreshing = true
        return store.dispatch('RefreshToken',store.state.user.refresh_token).then(res => {
//获取新的token,这里的逻辑自行处理，access_token和refresh_token都需要替换保存
          error.config.headers.Authorization = 'Bearer ' + res.access_token
           // token 请求成功后将数组的方法重新执行
          requests.forEach((cb) => cb(res.access_token))
          requests = [] // 重新请求完清空
          return request(error.config)
        }).catch(() => {
          // 如果刷新的refresh_token也过期了,重新登录
          notification.error({
            message: 'token过期',
            description: '请重新登录'
          })
          if (token) {
            store.dispatch('Logout').then(() => {
              window.location.reload()
            })
          }
        }).finally(() => {
          isRefreshing = false
        })
      } else {
        // 返回未执行 resolve 的 Promise
        return new Promise(resolve => {
          // 用函数形式将 resolve 存入，等待刷新后再执行
          requests.push(token => {
            error.config.headers.Authorization = 'Bearer ' + token
            resolve(request(error.config))
          })
        })
      }
    }
  }
  return Promise.reject(error)
}

request.interceptors.response.use(response => {
 //......
}, errorHandler)