React 路由守卫详解
React 路由守卫机制用于根据特定条件（例如用户登录状态、角色权限或数据可用性）控制对特定路由的访问。这对于保护敏感页面（如管理面板、用户资料等）至关重要。 路由守卫通过重定向未授权用户或显示错误信息来防止非法访问。
在 React 中，我们可以结合 react-router 和自定义逻辑实现路由守卫。
路由守卫工作原理
- 身份验证检查: 验证用户是否已登录。
- 访问控制: 根据验证结果，决定是否允许访问路由，或重定向到其他页面（例如登录页）。
- 基于角色的访问控制 (RBAC): 对于多角色系统（管理员、用户等），根据用户角色限制访问权限。
React 路由守卫示例
以下示例演示如何使用 react-router 实现基于身份验证和角色的路由守卫。
基于身份验证的路由守卫
此示例保护 /dashboard 路由，只有登录用户才能访问。
步骤一：创建路由守卫组件
创建一个 PrivateRoute 组件，检查用户登录状态：
import React from 'react'; import { Route, Navigate } from 'react-router-dom'; const PrivateRoute = ({ element, isAuthenticated, ...rest }) => { return isAuthenticated ? element : <Navigate to="/login" />; }; export default PrivateRoute;
- PrivateRoute 接收 element (受保护组件), isAuthenticated (登录状态) 和其他路由属性。
- 如果 isAuthenticated 为 true，则渲染 element；否则重定向到 /login。
步骤二：应用路由守卫
在主应用中使用 PrivateRoute 保护 /dashboard 路由：
import React, { useState } from 'react'; import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'; import PrivateRoute from './PrivateRoute'; const Home = () => <h2>主页</h2>; const Login = () => <h2>登录页</h2>; const Dashboard = () => <h2>仪表盘 (私有)</h2>; const App = () => { const [isAuthenticated, setIsAuthenticated] = useState(false); return ( <BrowserRouter> <nav> <ul> <li><Link to="/">主页</Link></li> <li><Link to="/login">登录</Link></li> <li><Link to="/dashboard">仪表盘</Link></li> </ul> </nav> <Routes> <Route path="/" element={<Home />} /> <Route path="/login" element={<Login />} /> <Route path="/dashboard" element={ <PrivateRoute isAuthenticated={isAuthenticated} element={<Dashboard />} /> } /> </Routes> <div> <button onClick={() => setIsAuthenticated(!isAuthenticated)}> {isAuthenticated ? '退出登录' : '登录'} </button> </div> </BrowserRouter> ); }; export default App;
基于角色的路由守卫
此示例保护 /admin 路由，只有具有 admin 角色的用户才能访问。
步骤一：创建基于角色的路由守卫
修改 PrivateRoute 组件以处理角色：
import React from 'react'; import { Route, Navigate } from 'react-router-dom'; const RoleBasedRoute = ({ element, isAuthenticated, userRole, requiredRole, ...rest }) => { return isAuthenticated && userRole === requiredRole ? element : <Navigate to="/login" />; }; export default RoleBasedRoute;
步骤二：应用基于角色的路由守卫
在主应用中使用 RoleBasedRoute 保护 /admin 路由：
import React, { useState } from 'react'; import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'; import RoleBasedRoute from './RoleBasedRoute'; // ... (Home, Login, Dashboard components remain the same) const Admin = () => <h2>管理员页面 (私有)</h2>; const App = () => { const [isAuthenticated, setIsAuthenticated] = useState(false); const [userRole, setUserRole] = useState('user'); // 用户角色 return ( <BrowserRouter> {/* ... (Navigation remains the same) */} <Routes> {/* ... (other routes remain the same) */} <Route path="/admin" element={ <RoleBasedRoute isAuthenticated={isAuthenticated} userRole={userRole} requiredRole="admin" element={<Admin />} /> } /> </Routes> <div> <button onClick={() => setIsAuthenticated(!isAuthenticated)}> {isAuthenticated ? '退出登录' : '登录'} </button> <button onClick={() => setUserRole(userRole === 'user' ? 'admin' : 'user')}> 切换角色 ({userRole}) </button> </div> </BrowserRouter> ); }; export default App;
总结
路由守卫是构建安全可靠 React 应用的关键。通过结合 react-router 和自定义逻辑，我们可以有效地控制对应用不同部分的访问权限，提升应用安全性。 记住，在实际应用中，isAuthenticated 和 userRole 通常会从后端 API 获取。
