Axios Intercept 未在第一次调用时从 localStorage 应用令牌

Question

所以我的 Vue 应用程序有问题，我的 axios 拦截没有应用授权令牌。

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标题。