首先准备好以下页面
登录页：用户可以在此页面登录。
受保护页：只有登录的用户可以访问，否则会重定向到登录页。
公共页面：不需要鉴权，任何人都可以访问。
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 应用，适合大部分的需求。
