React 路由守卫详解
React 路由守卫机制用于根据特定条件（例如用户登录状态、角色权限或数据可用性）控制对特定路由的访问。这对于保护敏感页面（如管理面板、用户资料等）至关重要。 路由守卫通过重定向未授权用户或显示错误信息来防止非法访问。
在 React 中，我们可以结合 react-router 和自定义逻辑实现路由守卫。
路由守卫工作原理
身份验证检查: 验证用户是否已登录。 访问控制: 根据验证结果，决定是否允许访问路由，或重定向到其他页面（例如登录页）。 基于角色的访问控制 (RBAC): 对于多角色系统（管理员、用户等），根据用户角色限制访问权限。React 路由守卫示例
以下示例演示如何使用 react-router 实现基于身份验证和角色的路由守卫。
基于身份验证的路由守卫
此示例保护 /dashboard 路由，只有登录用户才能访问。
步骤一：创建路由守卫组件创建一个 PrivateRoute 组件，检查用户登录状态：
1
2
3
4
5
6
7
8
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 保护 /dashboard 路由：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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 组件以处理角色：
1
2
3
4
5
6
7
8
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 路由：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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 获取。
以上就是在 React 中实现 Route Guards：通过身份验证和角色保护您的路由的详细内容，更多请关注php中文网其它相关文章！