实现无感刷新token

因为业务最近开始做官网需求，所以上掘金找了一下，方法如下：

方法一

后端返回过期时间，前端判断 token 过期时间,去调用刷新 token 接口

缺点：需要后端额外提供一个 token 过期时间的字段；使用了本地时间判断，若本地时间被篡改，特别是本地时间比服务器时间慢时，拦截会失败。

方法二

写个定时器，定时刷新 token 接口

缺点：浪费资源,消耗性能,不建议采用。

方法三

在响应拦截器中拦截，判断 token 返回过期后，调用刷新 token 接口

其他问题

防止多次刷新 token，我们可以通过一个变量 isRefreshing 去控制是否在刷新 token 的状态。

同时发起两个或者两个以上的请求时，当第二个过期的请求进来，token 正在刷新，我们先将这个请求存到一个数组队列中，想办法让这个请求处于等待中，一直等到刷新 token 后再逐个重试清空请求队列。那么如何做到让这个请求处于等待中呢？为了解决这个问题，我们得借助 Promise。将请求存进队列中后，同时返回一个 Promise，让这个 Promise 一直处于 Pending 状态（即不调用 resolve），此时这个请求就会一直等啊等，只要我们不执行 resolve，这个请求就会一直在等待。当刷新请求的接口返回来后，我们再调用 resolve，逐个重试。

最终代码

import axios from "axios"

// 是否正在刷新的标记
let isRefreshing = false
//重试队列
let requests = []
service.interceptors.response.use(
  response => {
    //约定code 409 token 过期
    if (response.data.code === 409) {
      if (!isRefreshing) {
        isRefreshing = true
        //调用刷新token的接口
        return refreshToken({ refreshToken: localStorage.getItem("refreshToken"), token: getToken() })
          .then(res => {
            const { token } = res.data
            // 替换token
            setToken(token)
            response.headers.Authorization = `${token}`
            // token 刷新后将数组的方法重新执行
            requests.forEach(cb => cb(token))
            requests = [] // 重新请求完清空
            return service(response.config)
          })
          .catch(err => {
            //跳到登录页
            removeToken()
            router.push("/login")
            return Promise.reject(err)
          })
          .finally(() => {
            isRefreshing = false
          })
      } else {
        // 返回未执行 resolve 的 Promise
        return new Promise(resolve => {
          // 用函数形式将 resolve 存入，等待刷新后再执行
          requests.push(token => {
            response.headers.Authorization = `${token}`
            resolve(service(response.config))
          })
        })
      }
    }
    return response && response.data
  },
  error => {
    Message.error(error.response.data.msg)
    return Promise.reject(error)
  }
)