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 :
-
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 = () => 主页
;
const Login = () => 登录页
;
const Dashboard = () => 仪表盘 (私有)
;
const App = () => {
const [isAuthenticated, setIsAuthenticated] = useState(false);
return (
);
};
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 :
步骤二：应用基于角色的路由守卫
在主应用中使用 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 = () => 管理员页面 (私有)
;
const App = () => {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const [userRole, setUserRole] = useState('user'); // 用户角色
return (
{/* ... (Navigation remains the same) */}
{/* ... (other routes remain the same) */}
);
};
export default App;
总结
路由守卫是构建安全可靠 React 应用的关键。通过结合 react-router 和自定义逻辑，我们可以有效地控制对应用不同部分的访问权限，提升应用安全性。 记住，在实际应用中，isAuthenticated 和 userRole 通常会从后端 API 获取。
