如何结合React Hook动态配置Axios的Authorization头并保留类式服务

1. 重构http-axios.js，用拦截器动态注入授权头 #

把原来直接创建带固定头的axios实例，改成创建基础实例，再通过拦截器动态添加Authorization头，同时提供一个更新拦截器的函数：

import axios from "axios";

// 创建基础axios实例，仅配置基础URL和默认Content-Type
const http = axios.create({
  baseURL: "http://localhost:4000/api/",
  headers: { 
    "Content-type": "application/json"
  }
});

// 用于存储拦截器ID，方便后续移除旧拦截器
let authInterceptor = null;

// 定义更新授权拦截器的函数
export const setupAuthInterceptor = (user) => {
  // 先移除已存在的拦截器，避免重复添加
  if (authInterceptor) {
    http.interceptors.request.eject(authInterceptor);
  }

  // 添加新的请求拦截器，动态注入Authorization头
  authInterceptor = http.interceptors.request.use(
    (config) => {
      // 仅当用户token存在时才添加授权头
      if (user?.token) {
        config.headers.Authorization = `Bearer ${user.token}`;
      }
      return config;
    },
    (error) => Promise.reject(error)
  );
};

export default http;

2. 在根组件中监听用户状态，更新拦截器 #

在App.js中，通过useAuthContext获取用户状态，并用useEffect监听用户变化，实时更新拦截器的授权头：

import { useEffect } from "react";
import { useAuthContext } from './services/useAuthContext';
import { setupAuthInterceptor } from "./http-axios";
import VMsDataService from "./services/vms";

function App() {
  const { user } = useAuthContext();

  // 当用户状态变化时，重新设置授权拦截器
  useEffect(() => {
    setupAuthInterceptor(user);
  }, [user]);

  // 示例：在用户登录后调用数据服务
  useEffect(() => {
    // 确保用户已登录（token存在）再发起请求
    if (user?.token) {
      VMsDataService.getLatest()
        .then(response => {
          // 处理返回数据
          console.log(response.data);
        }).catch(e => {
          // 处理错误
          console.error(e);
        });
    }
  }, [user]);

  return (
    <div className="App">
      {/* 你的组件内容 */}
    </div>
  );
}

export default App;

3. 修正数据服务类的导出（原代码遗漏） #

确保vms.js导出类的实例，否则无法直接调用实例方法：

import http from "../http-axios";

class VMsDataService {
    getLatest(page=0){
        return http.get(`vms/latest`);
    }
}

// 导出类的实例，而非类本身
export default new VMsDataService();

核心思路 #

• 避开在模块顶层直接调用Hook的限制，将授权头的动态设置放在React组件环境中完成。
• 利用axios拦截器自动为所有请求注入最新的Authorization头，无需修改现有类式服务的调用逻辑。
• 通过监听用户状态变化，实时更新拦截器，保证请求头始终与当前用户状态同步。

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