token的无感刷新

是小李啊

已于 2023-09-19 15:09:22 修改

阅读量238

点赞数

文章标签： vue.js 前端 javascript

于 2023-09-19 15:06:01 首次发布

本文链接：https://blog.csdn.net/lj971005/article/details/133030068

版权

文章讲述了在使用axios进行API请求时，如何处理token有效期短的问题，实现当请求返回401时自动从localStorage获取refreshToken并刷新token，同时处理并发请求时的token刷新策略。

摘要由CSDN通过智能技术生成

针对token有效期较短,需要手动获取新token请求

import axios from 'axios'

service.interceptors.response.use(
  response => {
    if (response.data.code === 401) {
      if (!isRefreshing) {
        isRefreshing = true
        let refreshToken= localStorage.getItem('refreshToken')
        return refreshToken({ refreshToken , token: getToken() }).then(res => {
          const { token } = res.data
          setToken(token)
          response.headers.Authorization = `${token}`
        }).catch(err => {
          removeToken()
          router.push('/login')
          return Promise.reject(err)
        }).finally(() => {
          isRefreshing = false
        })
      }
    }
    return response && response.data
  },
  (error) => {
    Message.error(error.response.data.msg)
    return Promise.reject(error)
  }
)

同时发起两个或者两个以上的请求时，刷新token

import axios from 'axios'
 
let isRefreshing = false
let requests = []
service.interceptors.response.use(
  response => {
    if (response.data.code === 401) {
      if (!isRefreshing) {
        isRefreshing = true
        let refreshToken= localStorage.getItem('refreshToken')
        return refreshToken({ refreshToken, token: getToken() }).then(res => {
          const { token } = res.data
          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)
  }
)