React Router 7 全局路由保护-编程阁

之前项目的路由保护是这样的：每个需要登录的页面都判断一下token，没有就跳转登录页。

// 之前：每个页面都要写 const SomePage = () => { const token = localStorage.getItem('token'); if (!token) { return <Navigate to="/login" />; } return <div>页面内容</div>; };

这样写有几个问题：

每个页面都要重复这个逻辑
万一漏了一个页面，就有安全漏洞
代码很乱，业务逻辑混在一起

后来我改成全局路由保护，清爽多了。

React Router 7 的新特性

React Router 7 推出了<BrowserRouter>的basename和一些新特性，但最实用的是嵌套路由。

但我的方案不是在每个路由外面套<ProtectedRoute>，而是在main.jsx里套一个全局的：

// main.jsx <BrowserRouter> <ProtectedRoute> {/* 全局保护，只套一次 */} <ConfigProvider> <App /> </ConfigProvider> </ProtectedRoute> </BrowserRouter>

这样<App />里面的所有路由都会经过保护逻辑。

ProtectedRoute 的实现

ProtectedRoute组件要做三件事：

检查 token，没有就跳登录
检查路由是否合法（防止访问不存在的页面）
处理登录后跳回原页面的逻辑

const ProtectedRoute = ({ children }) => { const location = useLocation(); const pathname = location.pathname; // 1. 检查路由是否合法 const allowedRoutes = [ "/login", "/", "/chat", "/customer", "/review-dashboard", "/pdf-annotator/:id", ... ]; const isValidRoute = allowedRoutes.some(route => pathname === route || pathname.startsWith(`${route}/`) ); if (!isValidRoute) { return <Navigate to="/404" replace />; } // 2. 登录页面直接放行 if (pathname === "/login") { return <>{children}</>; } // 3. 检查 token const token = localStorage.getItem("token"); if (!token) { localStorage.setItem("pathname", pathname); // 保存原路径 return <Navigate to="/login" replace />; } // 4. 根路径重定向 if (pathname === "/") { return <Navigate to="/chat" replace />; } return <>{children}</>; };

这样写的好处：

所有路由都在一个地方管理，不会漏
未定义的路由自动跳 404
登录后自动跳回原页面

但是有个坑：401 错误处理

用户登录后，token 会过期。这时候后端返回 401，我需要自动跳转到登录页。

但这个逻辑不能写在ProtectedRoute里，因为它只在路由切换时执行，不会响应 API 请求。

我把它写在了 Axios 拦截器里：

// request.js export let isRelogin = { show: false }; request.interceptors.response.use( (response) => { if (response.data.code === 401) { if (!isRelogin.show) { isRelogin.show = true; message.error('登录状态已过期'); localStorage.setItem("pathname", window.location.pathname); localStorage.removeItem("token"); window.location.href = "/login"; } } else if (response.data.code !== 200) { message.error(response.data.msg); return Promise.reject(response.data); } return response; }, (error) => { if (error.response?.status === 401) { localStorage.removeItem("token"); window.location.href = "/login"; } return Promise.reject(error); } );

这里有个坑：如果多个请求同时返回 401，会弹出多次错误提示。

我用了个isRelogin.show标志位，确保只弹一次：

export let isRelogin = { show: false }; if (response.data.code === 401) { if (!isRelogin.show) { // 只处理第一次 isRelogin.show = true; message.error('登录状态已过期'); window.location.href = "/login"; } }

登录成功后，记得重置这个标志位：

// 登录成功后 isRelogin.show = false;

懒加载怎么处理？

React Router 7 推荐用懒加载，但ProtectedRoute会阻止懒加载的组件渲染。

我的方案是：只懒加载页面组件，不懒加载ProtectedRoute。

// App.jsx const HomePage = lazy(() => import("./view/HomePage")); const PDFAnnotatorDemo = lazy(() => import("./view/PDFAnnotatorDemo")); const App = () => { return ( <Suspense fallback={<PageLoading />}> <Routes> <Route path="/homepage" element={<HomePage />} /> <Route path="/pdf-annotator/:id" element={<PDFAnnotatorDemo />} /> ... </Routes> </Suspense> ); };

ProtectedRoute在main.jsx里，不会被懒加载，所以一开始就会加载。