如何从工具模块访问Redux Store，全局配置Axios注入令牌？

嘿，我来帮你搞定把Redux里的令牌注入Axios全局请求头的事儿！下面是一步步的具体实现方案：

核心思路是让Axios能访问到Redux Store，再通过请求拦截器自动把令牌注入到请求头里，同时处理页面刷新等边缘情况。

1. 先导出你的Redux Store #

在你的应用入口文件里，创建Store之后直接导出它，这样Axios的配置代码就能引用到：

// 你的入口文件（比如index.js）
import React from 'react';
import ReactDOM from 'react-dom';
import createHistory from 'history/createBrowserHistory';
import { createStore, compose, applyMiddleware } from 'redux';
import { ConnectedRouter, routerMiddleware } from 'react-router-redux';
import rootReducer from './reducers'; // 你的根reducer

const history = createHistory();
const routerMid = routerMiddleware(history);

// 创建Store并导出，让其他文件能访问
export const store = createStore(
  rootReducer,
  compose(
    applyMiddleware(routerMid),
    // 保留Redux DevTools的配置（如果你在用的话）
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

// 后续渲染代码不变
ReactDOM.render(
  <ConnectedRouter history={history}>
    {/* 你的App组件 */}
  </ConnectedRouter>,
  document.getElementById('root')
);

2. 创建全局Axios实例并配置拦截器 #

新建一个专门的Axios配置文件，比如src/utils/axiosInstance.js，在这里完成令牌注入的逻辑：

import axios from 'axios';
import { store } from '../index'; // 导入刚才导出的Store

// 创建自定义Axios实例
const axiosInstance = axios.create({
  baseURL: 'http://localhost:你的API端口/api', // 替换成你的API基础地址
});

// 添加请求拦截器：发送请求前自动注入令牌
axiosInstance.interceptors.request.use(
  (config) => {
    // 从Store中获取令牌，路径根据你的reducer结构调整
    const token = store.getState().auth.token;
    if (token) {
      // 按后端要求的格式设置Authorization头，通常是Bearer格式
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

// 可选：添加响应拦截器，处理令牌过期等场景
axiosInstance.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      // 令牌过期时的处理，比如触发登出action、跳转到登录页
      store.dispatch({ type: 'AUTH_LOGOUT' });
    }
    return Promise.reject(error);
  }
);

export default axiosInstance;

3. 在应用中使用配置好的Axios实例 #

之后在组件或API调用文件里，直接导入这个配置好的实例就行，不用每次手动加请求头：

// 比如在某个业务组件里
import axiosInstance from '../utils/axiosInstance';

const fetchUserInfo = async () => {
  try {
    const response = await axiosInstance.get('/user/profile');
    // 处理返回的数据
    console.log(response.data);
  } catch (error) {
    // 处理请求错误
    console.error(error);
  }
};

4. 处理页面刷新后的令牌同步 #

用户刷新页面时Redux Store会重置，这时候要先从持久化存储（比如localStorage）里取出令牌，同步到Store，确保Axios能拿到最新令牌：

// 在入口文件index.js的Store创建后添加这段逻辑
const savedToken = localStorage.getItem('authToken');
if (savedToken) {
  store.dispatch({
    type: 'AUTH_SET_TOKEN', // 你的设置令牌的action类型
    payload: savedToken
  });
}

这样不管是正常操作还是页面刷新，Axios都能自动带上有效的令牌啦！

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