React 路由守卫详解
React 路由守卫机制用于根据特定条件（例如用户登录状态、角色权限或数据可用性）控制对特定路由的访问。这对于保护敏感页面（如管理面板、用户资料等）至关重要。 路由守卫通过重定向未授权用户或显示错误信息来防止非法访问。
在 React 中，我们可以结合 react-router 和自定义逻辑实现路由守卫。
路由守卫工作原理
- 身份验证检查: 验证用户是否已登录。
- 访问控制: 根据验证结果，决定是否允许访问路由，或重定向到其他页面（例如登录页）。
- 基于角色的访问控制 (RBAC): 对于多角色系统（管理员、用户等），根据用户角色限制访问权限。
React 路由守卫示例
以下示例演示如何使用 react-router 实现基于身份验证和角色的路由守卫。
基于身份验证的路由守卫
此示例保护 /dashboard 路由，只有登录用户才能访问。
步骤一：创建路由守卫组件
创建一个 PrivateRoute 组件，检查用户登录状态：
<code class="javascript">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;</code>
-
PrivateRoute接收element(受保护组件),isAuthenticated(登录状态) 和其他路由属性。 - 如果
isAuthenticated为true，则渲染element；否则重定向到/login。
步骤二：应用路由守卫
在主应用中使用 PrivateRoute 保护 /dashboard 路由：
<code class="javascript">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;</code>
基于角色的路由守卫
此示例保护 /admin 路由，只有具有 admin 角色的用户才能访问。
步骤一：创建基于角色的路由守卫
修改 PrivateRoute 组件以处理角色：
<code class="javascript">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;</code>
步骤二：应用基于角色的路由守卫
在主应用中使用 RoleBasedRoute 保护 /admin 路由：
<code class="javascript">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;</code>
总结
路由守卫是构建安全可靠 React 应用的关键。通过结合 react-router 和自定义逻辑，我们可以有效地控制对应用不同部分的访问权限，提升应用安全性。 记住，在实际应用中，isAuthenticated 和 userRole 通常会从后端 API 获取。
