当前位置：首页 > news >正文

React Router v6配置路由守卫

news 来源：原创 2025/5/18 4:18:59

首先准备好以下页面

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

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

//AuthContext.jsimport 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.jsimport 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.jsimport 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><inputtype="text"placeholder="Enter username"value={username}onChange={(e) => setUsername(e.target.value)}/><button onClick={handleLogin}>Login</button></div>);
};export default LoginPage;

//ProtectedPage.jsimport 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.jsimport 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.jsimport 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 保护受保护页 */}<Routepath="/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 应用，适合大部分的需求。

相关文章：