Axios Intercept не применяет токен от localStorage при первом вызове

Question

Итак, у меня проблема с моим приложением Vue, когда мой перехватчик аксиоса не применяет токен авторизации.

axios.interceptors.request.use(config => {
  let token = localStorage.getItem("jwt_token")
  console.log("Token is: ", token)
  console.log(typeof token)
  if (token) {
    axios.defaults.headers.Authorization = `Bearer ${token}`
    }
  console.log(config)
  return config
});

Как вы можете видеть, я записал в консоль свой токен, прежде чем применить его к заголовку Auth, однако это то, что я получаю в своем журнале консоли.

При первом запросе токен печатается очень хорошо, но внутри заголовка он имеет значение null, и я получаю ответ 422

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

Answer 1

На этом этапе объект config, переданный вашему перехватчику, уже объединен со значениями по умолчанию, поэтому назначение токена axios.defaults.headers.Authorization не повлияет на конфигурацию текущего запроса.

При этомпомните, что все, что вам нужно от вашего перехватчика, это ...

config => {
  let token = localStorage.getItem("jwt_token")
  config.headers = Object.assign({
    Authorization: `Bearer ${token}`
  }, config.headers)
  return config
}

Я использовал Object.assign() с последними текущими заголовками, чтобы не перезаписывать любой существующий заголовок Authorization.