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

发布于11月26日

因此，我的Vue应用程序存在问题，axios intercept没有应用授权令牌.

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头之前，我已经在控制台上记录了令牌，然而这是我在控制台日志(log)中得到的.

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.

推荐答案

在这个阶段，传递给拦截器的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标题.