Question

我正在Vue中构建SPA，并使用axios拦截器来处理令牌管理。现在，SPA不再手动刷新令牌，仅在刷新时才从服务器接收令牌，然后使用新令牌更新localStorage。我在每个API调用的标头中传递令牌。

我的问题是刷新令牌后令牌又回来了，我在响应拦截器中更新了localStorage。但是随后的API调用并不知道商店中的这个新值。

如何在localStorage中使用新值重试请求？

我已经尝试在响应拦截器的错误块中从localStorage抓取值并手动更新标头并返回原始请求，但这似乎不起作用，因为随后的API调用仍然会失败旧值。

axios.interceptors.request.use(config => {
  const accessToken = window.localStorage.getItem('authToken')

  if (accessToken) {
    config.headers.Authorization = `Bearer ${accessToken}`
  }

  return Promise.resolve(config)
})

axios.interceptors.response.use(
  response => {
    if (response.data.meta && response.data.meta.tokens && response.data.meta.tokens.Bearer) {
      const token = response.data.meta.tokens.Bearer
      console.log({ 'setting new token': token })
      window.localStorage.setItem('authToken', token)
    }
    return response
  },
  error => {
    console.log(error)
    const originalRequest = error.config
    if (error.status && error.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true
      const accessToken = window.localStorage.getItem('authToken')
      originalRequest.headers.Authorization = `Bearer ${accessToken}`
      return axios(originalRequest)
    }
    return Promise.reject(error)
  }
)

令牌更新后，后续的API调用将传递旧令牌

0 个答案: