如何在全局Axios拦截器中实现React Router路由跳转至登录页？

嘿，这个需求太常见了——用window.location跳转确实有点破坏单页应用的体验，毕竟会整页刷新。下面给你两种适配你当前技术栈的优雅实现方式：

核心思路是让Axios拦截器能访问到React Router的history对象，这样就能调用history.push('/Login')实现应用内无刷新跳转，完全贴合单页应用的路由机制。

方案一：结合Redux Thunk注入History对象 #

适配你当前用Redux Thunk的技术栈，步骤如下：

1. 先安装history包（如果还没装）：

npm install history

2. 修改你的index.js代码，创建自定义history实例并集成到Redux和Router中：

import "materialize-css/dist/css/materialize.min.css";
import "jquery/dist/jquery.min.js";
import "materialize-css/dist/js/materialize.min.js";
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import reduxThunk from 'redux-thunk';
import axios from "axios";
import { BrowserRouter as Router } from 'react-router-dom';
// 引入history创建工具
import { createBrowserHistory } from 'history';
import App from "./components/App";
import reducers from './reducers';

// 创建全局可用的history实例
const history = createBrowserHistory();

// 自定义Thunk中间件，把history传入action的额外参数（可选，方便后续action里也能用）
const customThunk = reduxThunk.withExtraArgument({ history });

const store = createStore(reducers, {}, applyMiddleware(customThunk));

// 修改Axios响应拦截器，用history实现无刷新跳转
axios.interceptors.response.use(undefined, function (error) {
  if(error.response.status === 401) {
    localStorage.setItem('current_user', null);
    // 这里就是优雅的应用内跳转了！
    history.push('/Login');
  }
  // 务必把错误抛出，让后续的catch逻辑能正常处理
  return Promise.reject(error);
});

ReactDOM.render(
  <Provider store={store}>
    {/* 把自定义history传给Router，确保路由实例和我们用的是同一个 */}
    <Router history={history}>
      <App />
    </Router>
  </Provider>,
  document.querySelector("#root")
);

方案二：封装全局History工具（更灵活的独立方案） #

如果之后项目结构调整，或者不想依赖Redux，也可以单独封装一个全局跳转工具：

1. 创建src/history.js文件：

import { createBrowserHistory } from 'history';
export default createBrowserHistory();

2. 在index.js中导入并关联到Router：

import history from './history';

// ...其他代码

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <App />
    </Router>
  </Provider>,
  document.querySelector("#root")
);

3. 在Axios拦截器中直接导入使用：

import history from './history';

axios.interceptors.response.use(undefined, function (error) {
  if(error.response.status === 401) {
    localStorage.setItem('current_user', null);
    history.push('/Login');
  }
  return Promise.reject(error);
});

为什么这比window.location更好？ #

• 无刷新体验：完全保留单页应用的流畅性，不会重新加载页面资源
• 状态保留：跳转后Redux Store的状态（除了你主动清除的）会保留，而window.location会重置整个应用
• 路由机制兼容：能正确触发React Router的路由守卫、组件生命周期钩子等逻辑

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