Axios 实例承载令牌在登录后未重新加载而未更新 - React

Question

当我尝试登录我的 React 应用程序时，它返回成功并将其保存在 sessionStorage 中，但是当我尝试访问需要 Bearer 令牌通过 axios 获取数据的页面时，它返回 http 401 错误。

但是当我重新加载页面时，结果就是所需的。

import axios from "axios";

let token = JSON.parse(window.sessionStorage.getItem("token"));

let AxiosInstance= axios.create({
  baseURL: "https://myurl.com/backend/api/",
  timeout: 5000,
  headers: { Authorization: "Bearer " + token },
});

export default AxiosInstance;

Answer 1

我猜这是因为你在 React 的任何生命周期之外创建 axios 实例

当您运行应用程序并进入登录屏幕时，它会创建一个 Axios 实例

import axios from "axios";

let token = JSON.parse(window.sessionStorage.getItem("token"));

let AxiosInstance = axios.create({
  baseURL: "https://myurl.com/backend/api/",
  timeout: 5000,
  headers: { Authorization: "Bearer " + token }, // on the first go token is null
});

export default AxiosInstance;

登录后，你的 axios 实例仍然有一个 nulll token，你看，这段代码执行了一次，就不再执行了，这就是为什么当你刷新页面时，它起作用了，因为当再次执行这段代码时，有一个 token在本地存储中。

有几件事你可以做，但我想最简单的是使用 Axios 拦截器

  AxiosInstace.interceptors.request.use(function (config) {
    const token = localStorage.getItem('token');
    config.headers.Authorization =  token ? `Bearer ${token}` : '';
    return config;
  });

这样，每次您发出请求时，您的标头都会更新（不确定这是否是最好的方法，但它有效）