axios 无感刷新token

callBack_____

于 2023-10-07 15:27:14 发布

阅读量175

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/callBack_____/article/details/133641388

本文介绍了如何在前端响应拦截器中实现token的有效管理，当请求失败时检查token状态，如果过期则获取新token并重试请求，确保API调用的正常进行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在响应拦截里

// respone拦截器
service.interceptors.response.use(
  async response => {
    Toast.clear()
    const res = response.data
    if (!res.isSuccess) {
      // 获取token 并存储到本地存储里
      let token = await store.dispatch('GETTOKEN')
      let config = response.config
      // 这里需要使用最新的token 否则携带的是过期token
      config.headers['token'] = token
      // 重新执行token过期的请求
      const resp = await service.request(response.config)
      return Promise.resolve(resp)
    }

    return Promise.resolve(res)
  },
  error => {
    Toast.clear()
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)