React Router v6配置路由守卫

首先准备好以下页面

登录页:用户可以在此页面登录。

受保护页:只有登录的用户可以访问,否则会重定向到登录页。

公共页面:不需要鉴权,任何人都可以访问。

  1. 安装依赖

首先,我们需要安装 react-router-dom:

npm install react-router-dom

  1. 设置鉴权逻辑

使用 React Context 来管理用户的登录状态(模拟鉴权)。创建一个简单的 AuthContext 来保存和提供用户的登录信息。

javascript 复制代码
//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>
  );
};
  1. 配置路由守卫

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

javascript 复制代码
//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;
  1. 创建页面组件

需要三个页面:登录页、受保护页和公共页面。

javascript 复制代码
//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;
javascript 复制代码
//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;
javascript 复制代码
//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;
  1. 配置路由

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

javascript 复制代码
//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;
  1. 代码解释

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 应用,适合大部分的需求。

相关推荐
webYin16 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
gnip16 小时前
结合Worker通知应用更新
前端·javascript
叶玳言17 小时前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植
高级测试工程师欧阳17 小时前
HTML 基本结构
前端
Gazer_S17 小时前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js
一只小阿乐17 小时前
Html重绘和重排
前端·html
_Rookie._17 小时前
vue3 使用css变量
前端·javascript·html
杨超越luckly17 小时前
HTML应用指南:利用GET请求获取全国招商银行网点位置信息
前端·arcgis·信息可视化·html·银行网点
蔗理苦17 小时前
2025-09-04 HTML3——区块布局与表单
前端·css·html
GIS之路17 小时前
GDAL 开发起步
前端