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

Posted 2023-02-22

【中文标题】Axios Intercept 在第一次调用时未从 localStorage 应用令牌

【英文标题】：Axios Intercept not applying token from localStorage on first call

【发布时间】：2019-04-27 17:49:06

【问题描述】：

所以我的 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 标头之前，我已经在控制台记录了我的令牌，但这是我在控制台日志中得到的。

On the first request the token prints just fine, but inside the header, it's set as null and I get a 422 response

on the second API request, my token applies just fine, and I receive data back.

【参考方案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 标头。

【讨论】：

太棒了，谢谢。我正打算在登录操作中设置商店中的标题，但我更喜欢这种方式。