Javascript 刷新令牌后，后续API调用将传递过时的令牌

我正在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)
  }
)