🦌 React Router 权限路由控制 - 登录验证、私有路由封装、高阶组件实现路由守卫
🥕 老曹又来啦！今天咱们要学习 React Router的权限路由控制功能。通过本节课，你将学会如何实现登录验证、封装私有路由以及使用高阶组件（HOC）实现路由守卫。这些技能对于构建需要权限管理的单页应用（SPA）至关重要。
📖 引言
-
为什么需要权限路由控制？
在实际开发中，很多页面需要用户登录后才能访问。例如：
- 用户未登录时重定向到登录页。
- 管理员才能访问后台管理页面。
React Router 提供了灵活的路由守卫机制，让我们能够轻松实现这些需求。
-
什么是路由守卫？
路由守卫是指在路由跳转前执行某些逻辑（如权限校验），并根据结果决定是否允许跳转。
-
学习目标
在本节课中，我们将完成以下目标：
- 掌握登录验证的实现方式。
- 学习如何封装私有路由。
- 使用高阶组件实现路由守卫。
- 完成一个综合案例，巩固所学知识。
🎯 学习目标
1. 理解权限路由控制的作用
权限路由控制确保只有符合特定条件的用户才能访问某些页面。
2. 掌握登录验证的实现方法
学会在路由跳转前检查用户登录状态，并根据结果执行相应操作。
3. 学习私有路由的封装技巧
掌握如何封装私有路由组件，简化权限控制逻辑。
4. 使用高阶组件实现路由守卫
学会使用高阶组件（HOC）对路由进行权限校验。
5. 综合案例：构建一个支持权限控制的 SPA
通过一个完整的案例，将所有知识点串联起来，达到学以致用的效果。
🔧 代码讲解
✅1. 登录验证的基本实现
🛠️ 场景描述
在路由跳转前，我们需要检查用户的登录状态。如果用户未登录，则重定向到登录页。
💻 示例代码
javascript
import React from 'react';
import { Navigate } from 'react-router-dom';
// 模拟登录状态
const isAuthenticated = () => {
return !!localStorage.getItem('token'); // 假设 token 表示已登录
};
const PrivateRoute = ({ children }) => {
return isAuthenticated() ? children : <Navigate to="/login" />;
};
export default PrivateRoute;📝 代码解读
isAuthenticated函数：检查用户是否已登录。PrivateRoute组件：根据登录状态决定渲染内容或重定向到登录页。Navigate组件：用于实现重定向。
✅2. 封装私有路由
🛠️ 场景描述
为了简化权限控制逻辑，我们可以封装一个私有路由组件，专门用于保护需要登录的页面。
💻 示例代码
javascript
import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';
// 模拟登录状态
const isAuthenticated = () => {
return !!localStorage.getItem('token');
};
const PrivateRoute = () => {
return isAuthenticated() ? <Outlet /> : <Navigate to="/login" />;
};
export default PrivateRoute;📝 代码解读
PrivateRoute组件：作为父路由，负责保护子路由。<Outlet>：在父组件中渲染子路由的内容。Navigate组件：用于重定向到登录页。
使用示例
javascript
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import PrivateRoute from './PrivateRoute';
import Dashboard from './pages/Dashboard';
import Login from './pages/Login';
const App = () => {
return (
<Routes>
<Route path="/login" element={<Login />} />
<Route element={<PrivateRoute />}>
<Route path="/dashboard" element={<Dashboard />} />
</Route>
</Routes>
);
};
export default App;✅3. 高阶组件实现路由守卫
🛠️ 场景描述
高阶组件（HOC）是一种常见的设计模式，可以用来增强组件的功能。我们可以通过 HOC 实现路由守卫。
💻 示例代码
javascript
import React from 'react';
import { Navigate } from 'react-router-dom';
// 高阶组件
const withAuth = (Component) => {
const isAuthenticated = () => {
return !!localStorage.getItem('token');
};
return (props) => {
return isAuthenticated() ? <Component {...props} /> : <Navigate to="/login" />;
};
};
export default withAuth;📝 代码解读
withAuthHOC：接受一个组件作为参数，并返回一个新的组件。isAuthenticated函数：检查用户是否已登录。Navigate组件：用于重定向到登录页。
使用示例
javascript
import React from 'react';
import withAuth from './withAuth';
const Dashboard = () => {
return <h1>欢迎来到仪表盘</h1>;
};
export default withAuth(Dashboard);✅4. 综合案例：构建一个支持权限控制的 SPA
🛠️ 场景描述
我们要构建一个简单的后台管理系统，包括：
- 登录页：用户输入用户名和密码后登录。
- 仪表盘页：需要登录后才能访问。
- 公共页：无需登录即可访问。
💻 路由配置
javascript
import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import PrivateRoute from './PrivateRoute';
import Login from './pages/Login';
import Dashboard from './pages/Dashboard';
import PublicPage from './pages/PublicPage';
const App = () => {
return (
<Routes>
<Route path="/login" element={<Login />} />
<Route element={<PrivateRoute />}>
<Route path="/dashboard" element={<Dashboard />} />
</Route>
<Route path="/public" element={<PublicPage />} />
<Route path="/" element={<Navigate to="/public" />} />
</Routes>
);
};
export default App;📝 页面组件
javascript
// Login.js
const Login = () => {
const handleLogin = () => {
localStorage.setItem('token', 'fake-token'); // 模拟登录
window.location.href = '/dashboard'; // 跳转到仪表盘
};
return (
<div>
<h1>登录页面</h1>
<button onClick={handleLogin}>登录</button>
</div>
);
};
// Dashboard.js
const Dashboard = () => {
return <h1>欢迎来到仪表盘</h1>;
};
// PublicPage.js
const PublicPage = () => {
return <h1>公共页面</h1>;
};📝 代码解读
- 登录页：模拟用户登录，并存储 token。
- 私有路由 ：保护
/dashboard页面，未登录用户无法访问。 - 公共页：无需登录即可访问。
🏁 总结
✅1. 权限路由控制的核心作用
权限路由控制确保只有符合特定条件的用户才能访问某些页面，提升了应用的安全性。
✅2. 私有路由的封装优势
通过封装私有路由组件，我们可以简化权限控制逻辑，使代码更加模块化。
✅3. 高阶组件的灵活性
高阶组件提供了一种通用的方式来增强组件功能，适用于多种场景。
✅4. 综合案例的意义
通过构建一个支持权限控制的 SPA，我们能够将所有知识点融会贯通，真正掌握权限路由控制的使用技巧。
💻 老曹希望今天的课程能让你对 React Router的权限路由控制有一个全面而深刻的理解。下节课我们将继续探索前端路由的性能优化技巧，敬请期待！