token 无感刷新

思路

准备两个 token：
1. refresh（长 token）：用于刷新 token 使用
2. token（短 token）：用于业务逻辑使用

在 axios 的相应拦截中统一处理刷新 token 的逻辑，核心如下：

// 拦截器
instance.interceptors.response.use(
  async function (res) {
    if (res.headers.authorization) {
      // 如果服务器返回新的 token，则更新本地 token
      const token = res.headers.authorization.replace('Beader ', '')
      setToken(token)
      instance.defaults.headers.Authorization = `Beader ${token}`
    }
    // 如果服务器返回新的 refreshtoken，则更新本地 refreshtoken
    if (res.headers.refreshtoken) {
      const refreshtoken = res.headers.refreshtoken.replace('Beader ', '')
      setRefreshToken(refreshtoken)
    }
    // 如果无权限（可能 token 过期，也可能 refresh 过期），且不是 refresh-token 请求
    if (res.data.code === 401 && !isRefreshRequest(res.config)) {
      // 刷新 token
      const isSuccess = await refreshtoken()
      // 是否成功刷新了 token
      if (isSuccess) {
        // 重新请求
        res.config.headers.Authorization = `Beader ${getToken()}`
        const res = await instance.request(res.config)
        return res.data
      } else {
        // 无权限
        console.log('回到登录页，重新登录')
        return res.data
      }
    }

    return res.data
  },
  function (error) {
    return Promise.reject(error)
  },
)

token 无感刷新 ​

思路 ​

补充 ​

token 无感刷新

思路

补充