Когда токен обновляется, последующие вызовы API проходят устаревший токен.

Question

Я строю SPA в Vue и использую перехватчики 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)
  }
)