React登录重定向后Auth Token请求头缺失问题及解决

我来帮你拆解这个问题——你遇到的核心问题其实是axios请求头的设置时机错误，导致登录后首次调用接口时Token没被带上，刷新页面后才正常。下面详细说清楚原因和正确的解决方式：

为什么会出现这个问题？ #

看你原来的api/config.js代码，它是在**模块首次加载时（也就是页面初始化的时候）**就执行了一次axios默认头的赋值操作：

import axios from 'axios';
// 这行代码只跑一次！页面初始化时执行，登录后不会重新执行
sessionStorage.getItem('credentials') ? axios.defaults.headers.common['Authorization'] = 'Bearer ' + JSON.parse(sessionStorage.credentials).authToken : undefined;

登录成功后，你把凭证存入了sessionStorage，但此时config.js已经加载完成了，不会再重新执行这段代码。所以axios的默认请求头还是初始化时的空状态，首次调用接口自然就没带Token。而刷新页面时，模块会重新加载，这时候sessionStorage里已经有凭证了，所以能正确设置请求头，接口也就成功了。

正确的解决方案：用axios请求拦截器动态设置头 #

你后来修改的代码方向完全正确！使用axios的请求拦截器，可以在每一次请求发送前动态读取sessionStorage里的最新凭证，而不是只在模块初始化时设置一次。下面是完整的解析：

修复后的代码详解 #

1. api/config.js：创建带拦截器的axios实例

import axios from 'axios';
// 创建独立的axios实例，避免污染全局axios配置
const axiosInstance = axios.create();
// 添加请求拦截器——每次发请求前都会走这里的逻辑
axiosInstance.interceptors.request.use(
  config => {
    // 每次请求前都读取最新的sessionStorage内容
    const credentials = sessionStorage.getItem('credentials');
    if (credentials) {
      const authToken = JSON.parse(credentials).authToken;
      config.headers['Authorization'] = `Bearer ${authToken}`;
    }
    return config;
  },
  error => Promise.reject(error)
);
export default axiosInstance;

• 用axios.create()创建独立实例，不会影响项目里其他地方的axios使用
• 拦截器的request.use会在每一次请求发送前执行，所以不管是登录后首次请求，还是后续的请求，都能拿到最新的Token，完美解决你的问题

2. api/packageApi.js：使用自定义的axios实例

import axiosInstance from './config';
class PackageApi {
  static getAllPackages() {
    return axiosInstance.get('/get/my/packages')
      .then(response => {
        console.log(response);
        return response;
      })
      .catch(error => {
        console.log(error);
      });
  }
}
export default PackageApi;

• 不再直接用全局的axios，而是导入我们配置好拦截器的实例，确保所有接口请求都经过拦截器处理

额外的优化小建议 #

• 可以把sessionStorage的凭证读取逻辑封装成工具函数，避免重复写JSON.parse和getItem：

// 新建utils/auth.js
export const getAuthToken = () => {
  const credentials = sessionStorage.getItem('credentials');
  return credentials ? JSON.parse(credentials).authToken : null;
};

然后在拦截器里直接调用getAuthToken()就行，代码更简洁

• 登出的时候记得清除sessionStorage里的credentials，避免残留无效的Token

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