React中使用Axios实例出现JsonWebTokenError: jwt malformed问题

两种场景的核心差异在于token被设置到请求头的时机不同：

• 场景一：每次发起请求时，都会实时从localStorage中获取最新的token并设置到请求头。这意味着即使token是在页面加载后才存入localStorage的，请求时也能拿到正确的值，所以后端能识别有效token，请求正常。
• 场景二：axios_auth实例在模块（admin.ts）被加载时就创建了，此时localStorage.getItem("token")的取值是模块加载瞬间的值——如果你的token是在模块加载完成后才存入localStorage的（比如登录成功后才存），那实例初始化时拿到的token就是空值或者无效值，后续请求都会带着这个错误的token，导致后端返回JWT格式错误。

修改admin.ts，不要在实例创建时直接固定headers，改用请求拦截器在每次请求前动态设置token：

import axios from "axios";

const axios_auth = axios.create({
  baseURL: `${process.env.REACT_APP_API_URL}`,
});

// 添加请求拦截器，每次请求前动态获取最新token
axios_auth.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("token");
    if (token) {
      config.headers.token = token;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default axios_auth;

这样每次发起请求时，都会重新从localStorage获取最新的token，确保请求头里的token是有效的。

内容的提问来源于stack exchange，提问作者n9p4