如何创建全局Axios实例，自动从Redux store获取token设置请求头

React Hook 只能在 React 组件或自定义 Hook 内部调用，你之前的写法报错属于正常规则限制。推荐使用 Axios 请求拦截器 + 直接访问 Redux Store 实例 的方式实现全局自动注入请求头，实现步骤如下：

第一步：修改 ProductionInstanceAPI.js #

首先导入你项目中创建好的 Redux Store 实例（即调用 configureStore 或 createStore 生成的全局对象，一般存放在项目的 redux/store.js 这类文件中，路径根据你的项目结构调整即可），再给 Axios 实例添加请求拦截器：

import axios from 'axios';
// 导入自己项目的Redux Store实例
import store from './redux/store';

const ProductionAPI = axios.create({
  baseURL: `https://my.app/`,
});

// 添加请求拦截器：每次发起请求前自动注入Authorization头
ProductionAPI.interceptors.request.use(
  (config) => {
    // 直接从store读取最新的账户状态
    const accessToken = store.getState().account.accessToken;
    // 仅token存在时添加头，避免传输无效的Authorization字段
    if (accessToken) {
      config.headers.Authorization = `Bearer ${accessToken}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

export default ProductionAPI;

第二步：简化组件内的接口调用 #

后续所有组件发起请求时，无需再手动传递 Authorization 头，也不需要调用 useSelector 读取 token，直接调用 Axios 实例即可：

import ProductionAPI from '../../ProductionInstanceAPI';

const Predictions = () => {
  useEffect(() => {
    ProductionAPI.get('ml/get_linear_regressions/')
      .then((response) => {
        const data = response.data;
        console.log(data);
      })
      .catch(error => {
        console.log(error);
      })
  }, []); // 无需再把accessToken加入依赖数组
}

补充说明 #

• 该方案每次请求都会读取 Store 中最新的 token，就算后续 token 刷新更新，也会自动使用最新值，不需要额外做同步处理
• 如果你的项目有 token 过期逻辑，还可以给同一个 Axios 实例添加响应拦截器，检测到 401 状态码时自动触发登出/刷新 token 逻辑，不需要每个接口重复编写捕获代码

内容的提问来源于stack exchange，提问作者Tony Hoan Trinh