登录应用后更新axios实例头失败

Posted 2023-02-19

【中文标题】登录应用后更新axios实例头失败

【英文标题】：Updating the axios instance header failed after login to the application

【发布时间】：2017-12-06 20:16:02

【问题描述】：

我正在 Redux 架构中使用 React js 开发应用程序 并将 axios 用于 http 请求。 我有两个容器类，一个是 login，另一个是 home 页。在路由类中，我导入了两个容器类。

在主页容器中，我导入一个动作，该动作导入 一个axios实例变量

export var Instance_Variable = axios.create( baseURL：网址， 标题： "AUTH-TOKEN": localStorage.getItem("AuthToken") );

在我的场景中， routs 文件将在导入主页类时导入这些实例变量。 登录时，我从响应中获取身份验证令牌并将其设置为本地存储。登录后，主页发出了一个请求，并以未经授权的方式响应（401 - 应用程序中完成的身份验证令牌验证）。

我正在浏览器中查看网络选项卡和使用标题“AUTH-TOKEN”发出的请求：null

登录应用后如何更新实例

注意：登录后刷新应用后请求正常

【问题讨论】：

您提到将这些变量导入到路由文件中，听起来好像您正试图在设置之前从本地存储中获取 AuthToken。您是否进行了一些调试以确保本地存储中的 getItem 正确检索令牌？

是的@Nick Wyman 登录后如果我刷新页面一切正常

即如果刷新页面，使页面加载时Auth Token已经存在。我要说的是，从本地存储访问 Auth 令牌的任何代码都试图过早地获取它，然后才能从您的服务器检索 Auth 令牌。那么在您的第一个请求中，在刷新之前，访问本地存储的代码是在 Auth Token 请求之前还是之后发生的？

【参考方案1】：

您好，我知道这是一个非常古老的问题，但今天我也遇到了同样的问题，希望也能解决这个问题

因此，当您使用 Axios 调用“登录 API URL”时，如果此请求成功，则您已在 Axios '.then' 块中设置标头，就像他们所说的 here

instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

注意：为此，您必须使用 Axios 拦截器

【参考方案2】：

最好使用 axios 拦截器，为每个请求设置标头，如下所示：

axios
  .interceptors
  .request
  .use(function (config) 
    if (cookie.load('auth-token')) 
      config.headers['AUTH-TOKEN'] = cookie.load('auth-token');
    
    return config;
  , function (error) 
    return Promise.reject(error);
  );