React Router v6配置路由守卫

首先准备好以下页面

登录页：用户可以在此页面登录。
受保护页：只有登录的用户可以访问，否则会重定向到登录页。
公共页面：不需要鉴权，任何人都可以访问。

1. 安装依赖
首先，我们需要安装 react-router-dom：
npm install react-router-dom
2. 设置鉴权逻辑
使用 React Context 来管理用户的登录状态（模拟鉴权）。创建一个简单的 AuthContext 来保存和提供用户的登录信息。

//AuthContext.js

import React, { createContext, useContext, useState } from 'react';

// 创建 AuthContext
const AuthContext = createContext();

// 提供 AuthContext 的自定义 Hook
export const useAuth = () => {
  return useContext(AuthContext);
};

// 创建 AuthProvider 来管理用户认证状态
export const AuthProvider = ({ children }) => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const login = () => setIsAuthenticated(true);
  const logout = () => setIsAuthenticated(false);

  return (
    <AuthContext.Provider value={
  
  { isAuthenticated, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

 3. 配置路由守卫
在 React Router v6 中，路由守卫通过 Navigate 组件进行重定向。我们需要创建一个 PrivateRoute 组件来作为守卫，用于保护受限制的页面。

//PrivateRoute.js

import React from 'react';
import { Navigate } from 'react-router-dom';
import { useAuth } from './AuthContext';

// PrivateRoute 组件用于保护需要认证的路由
const PrivateRoute = ({ element }) => {
  const { isAuthenticated } = useAuth();

  if (!isAuthenticated) {
    // 如果用户未认证，重定向到登录页面
    return <Navigate to="/login" />;
  }

  return element;
};

export default PrivateRoute;

 4. 创建页面组件
需要三个页面：登录页、受保护页和公共页面。

//LoginPage.js

import React, { useState } from 'react';
import { useAuth } from './AuthContext';
import { useNavigate } from 'react-router-dom';

const LoginPage = () => {
  const [username, setUsername] = useState('');
  const { login } = useAuth();
  const navigate = useNavigate();

  const handleLogin = () => {
    // 这里可以做更复杂的验证
    if (username) {
      login(); // 登录
      navigate('/protected'); // 登录后跳转到受保护页
    }
  };

  return (
    <div>
      <h2>Login Page</h2>
      <input
        type="text"
        placeholder="Enter username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button onClick={handleLogin}>Login</button>
    </div>
  );
};

export default LoginPage;

//ProtectedPage.js

import React from 'react';
import { useAuth } from './AuthContext';

const ProtectedPage = () => {
  const { logout } = useAuth();

  return (
    <div>
      <h2>Protected Page</h2>
      <p>This page is only accessible after login.</p>
      <button onClick={logout}>Logout</button>
    </div>
  );
};

export default ProtectedPage;

//PublicPage.js

import React from 'react';

const PublicPage = () => {
  return (
    <div>
      <h2>Public Page</h2>
      <p>This page is accessible to everyone.</p>
    </div>
  );
};

export default PublicPage;

5. 配置路由
配置 App.js，并使用 BrowserRouter 和 Routes 来定义路由。
 

//App.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { AuthProvider } from './AuthContext';
import LoginPage from './LoginPage';
import ProtectedPage from './ProtectedPage';
import PublicPage from './PublicPage';
import PrivateRoute from './PrivateRoute';

const App = () => {
  return (
    <AuthProvider>
      <Router>
        <Routes>
          <Route path="/" element={<PublicPage />} />
          <Route path="/login" element={<LoginPage />} />
          {/* 使用 PrivateRoute 保护受保护页 */}
          <Route
            path="/protected"
            element={<PrivateRoute element={<ProtectedPage />} />}
          />
        </Routes>
      </Router>
    </AuthProvider>
  );
};

export default App;

6. 代码解释
AuthContext.js：提供一个简单的上下文 (AuthContext)，用于管理用户的认证状态，包括登录 (login) 和登出 (logout) 操作。
PrivateRoute.js：通过 PrivateRoute 组件来保护受保护的页面。如果用户未登录，自动重定向到登录页面。
页面组件：登录页、受保护页和公共页面通过普通的 React 组件实现。登录页允许用户输入用户名并登录，受保护页需要用户登录才能访问，公共页面可以供所有用户访问。
App.js：在 App.js 中使用 React Router 的 Routes 来配置路由，并根据需要使用 PrivateRoute 来保护需要鉴权的页面。

总结
使用 React Router v6 配置路由守卫。
使用 React Context 来管理认证状态，并通过 Navigate 组件来控制页面访问权限。
PrivateRoute 是路由守卫的核心，它根据用户的认证状态来决定是否允许访问某些受保护的页面。
这种方式适用于构建具有基本鉴权逻辑的 React 应用，适合大部分的需求。