【前端路由】React Router 权限路由控制 - 登录验证、私有路由封装、高阶组件实现路由守卫

🦌 React Router 权限路由控制 - 登录验证、私有路由封装、高阶组件实现路由守卫

🥕 老曹又来啦！今天咱们要学习 React Router的权限路由控制功能。通过本节课，你将学会如何实现登录验证、封装私有路由以及使用高阶组件（HOC）实现路由守卫。这些技能对于构建需要权限管理的单页应用（SPA）至关重要。

---

📖 引言

1. 为什么需要权限路由控制？

   在实际开发中，很多页面需要用户登录后才能访问。例如：

   • 用户未登录时重定向到登录页。
   • 管理员才能访问后台管理页面。
     React Router 提供了灵活的路由守卫机制，让我们能够轻松实现这些需求。

2. 什么是路由守卫？

   路由守卫是指在路由跳转前执行某些逻辑（如权限校验），并根据结果决定是否允许跳转。

3. 学习目标

   在本节课中，我们将完成以下目标：

   • 掌握登录验证的实现方式。
   • 学习如何封装私有路由。
   • 使用高阶组件实现路由守卫。
   • 完成一个综合案例，巩固所学知识。

---

🎯 学习目标

1. 理解权限路由控制的作用

权限路由控制确保只有符合特定条件的用户才能访问某些页面。

2. 掌握登录验证的实现方法

学会在路由跳转前检查用户登录状态，并根据结果执行相应操作。

3. 学习私有路由的封装技巧

掌握如何封装私有路由组件，简化权限控制逻辑。

4. 使用高阶组件实现路由守卫

学会使用高阶组件（HOC）对路由进行权限校验。

5. 综合案例：构建一个支持权限控制的 SPA

通过一个完整的案例，将所有知识点串联起来，达到学以致用的效果。

---

🔧 代码讲解

✅1. 登录验证的基本实现

🛠️ 场景描述

在路由跳转前，我们需要检查用户的登录状态。如果用户未登录，则重定向到登录页。

💻 示例代码

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;

📝 代码解读

1. isAuthenticated 函数：检查用户是否已登录。
2. PrivateRoute 组件：根据登录状态决定渲染内容或重定向到登录页。
3. Navigate 组件：用于实现重定向。

---

✅2. 封装私有路由

🛠️ 场景描述

为了简化权限控制逻辑，我们可以封装一个私有路由组件，专门用于保护需要登录的页面。

💻 示例代码

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;

📝 代码解读

1. PrivateRoute 组件：作为父路由，负责保护子路由。
2. <Outlet>：在父组件中渲染子路由的内容。
3. Navigate 组件：用于重定向到登录页。

使用示例

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 实现路由守卫。

💻 示例代码

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;

📝 代码解读

1. withAuth HOC：接受一个组件作为参数，并返回一个新的组件。
2. isAuthenticated 函数：检查用户是否已登录。
3. Navigate 组件：用于重定向到登录页。

使用示例

import React from 'react';
import withAuth from './withAuth';

const Dashboard = () => {
  return <h1>欢迎来到仪表盘</h1>;
};

export default withAuth(Dashboard);

---

✅4. 综合案例：构建一个支持权限控制的 SPA

🛠️ 场景描述

我们要构建一个简单的后台管理系统，包括：

• 登录页：用户输入用户名和密码后登录。
• 仪表盘页：需要登录后才能访问。
• 公共页：无需登录即可访问。

💻 路由配置

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;

📝 页面组件

// 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>;
};

📝 代码解读

1. 登录页：模拟用户登录，并存储 token。
2. 私有路由 ：保护 /dashboard 页面，未登录用户无法访问。
3. 公共页：无需登录即可访问。

---

🏁 总结

✅1. 权限路由控制的核心作用

权限路由控制确保只有符合特定条件的用户才能访问某些页面，提升了应用的安全性。

✅2. 私有路由的封装优势

通过封装私有路由组件，我们可以简化权限控制逻辑，使代码更加模块化。

✅3. 高阶组件的灵活性

高阶组件提供了一种通用的方式来增强组件功能，适用于多种场景。

✅4. 综合案例的意义

通过构建一个支持权限控制的 SPA，我们能够将所有知识点融会贯通，真正掌握权限路由控制的使用技巧。

---

💻 老曹希望今天的课程能让你对 React Router的权限路由控制有一个全面而深刻的理解。下节课我们将继续探索前端路由的性能优化技巧，敬请期待！