React.js中Axios拦截器处理错误时无法重定向至/login页面

问题原因分析 #

1. redirect("/login") 是React Router专为路由组件、loader或action设计的导航API，在Axios拦截器这类普通函数中调用无法触发实际导航，因为它依赖React Router的路由上下文。
2. 若router.navigate("/login")无效，大概率是因为没有正确使用路由实例，或者调用时机未触发React的更新机制。

可行解决方案 #

方案1：直接操作浏览器location（最简单可靠） #

在拦截器中清除token后，直接修改window.location.href跳转，这种方式不依赖React Router上下文，适用于任何环境：

if (
  error.response.status === 401 &&
  originalRequest.url === "http://0.0.0.0:8000/auth/refresh-token"
) {
  localStorage.removeItem("refresh_token");
  localStorage.removeItem("access_token");
  
  // 直接跳转
  window.location.href = "/login";
  
  return Promise.reject(error);
}

方案2：正确使用React Router的router实例导航 #

确保你导入的router是createBrowserRouter创建的同一个实例，并且调用navigate后正确处理Promise：

// 确保导入正确的router实例
import { router } from "./path-to-your-router-file";

// 拦截器中修改如下
if (
  error.response.status === 401 &&
  originalRequest.url === "http://0.0.0.0:8000/auth/refresh-token"
) {
  localStorage.removeItem("refresh_token");
  localStorage.removeItem("access_token");
  
  // 使用router实例导航
  router.navigate("/login");
  
  return Promise.reject(error);
}

注意：如果你的应用是用<RouterProvider router={router}>渲染的，这个实例肯定是有效的，若仍无效，检查是否在拦截器中存在异步逻辑阻塞导航。

方案3：创建全局导航工具（适合复杂场景） #

如果需要在非组件环境中统一处理导航，可以封装一个导航工具：

1. 创建导航工具文件navigation.js：

import { createBrowserRouter, RouterProvider } from "react-router-dom";

export const router = createBrowserRouter([
  { path: "*", Component: Root },
  // 其他路由配置
]);

// 导出全局导航函数
export const navigate = (to) => {
  router.navigate(to);
};

2. 在Axios拦截器中导入使用：

import { navigate } from "./navigation";

// 拦截器中
navigate("/login");

额外注意事项 #

• 拦截器中必须返回Promise.reject(error)，否则Axios会将错误视为已处理，可能导致后续错误逻辑不执行。
• 确保/login路由已在你的router配置中定义，否则跳转后会匹配到*路由的Root组件。

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