在 React 中实现 Route Guards：通过身份验证和角色保护您的路由-js教程-PHP中文网

Implementing Route Guards in React: Protecting Your Routes with Authentication and Roles

React 中的路由守卫

React 中的

Route Guards 是指根据特定条件或标准（例如用户身份验证、角色、权限甚至数据可用性）限制或允许访问某些路由的机制。这是具有私有或受保护路由的应用程序（例如管理仪表板、用户配置文件或其他敏感区域）中的常见要求。

路由防护通过将未经授权的用户重定向到另一个页面或在尝试访问不允许他们查看的路由时显示错误消息来防止未经授权的用户访问受限路由。

在 React 中，可以通过利用 React Router 结合自定义逻辑（例如身份验证状态或基于角色的访问控制）来实现路由保护。

路由守卫如何工作

检查用户身份验证：确定用户是否已登录。
重定向或限制访问：如果用户未获得授权，请将其重定向到登录页面、拒绝权限的页面或任何其他适当的视图。
基于角色的访问控制：对于具有多个用户角色（例如管理员、访客或普通用户）的应用，根据用户的角色限制访问。

在 React 中实现 Route Guard 的示例

让我们看看如何使用 React Router 和基本的身份验证防护来实现路由防护。我们将检查用户是否经过身份验证，并根据该情况有条件地渲染路由。

基本示例：基于身份验证保护路由

在此示例中，我们将使用路由防护来检查用户是否经过身份验证，然后才允许访问 /dashboard 等受限制的路由。

第 1 步：创建 Route Guard 组件

我们将创建一个 PrivateRoute 组件，用于检查用户是否经过身份验证，并允许访问受保护的路由或将其重定向到登录页面。

import React from 'react';
import { Route, Navigate } from 'react-router-dom';

// PrivateRoute component for protecting routes
const PrivateRoute = ({ element, isAuthenticated, ...rest }) => {
  return (
    <Route
      {...rest}
      element={isAuthenticated ? element : <Navigate to="/login" />}
    />
  );
};

export default PrivateRoute;

登录后复制

PrivateRoute 组件采用元素（即受保护的路由组件）、isAuthenticated 布尔值和其余路由属性（...其余）。
如果 isAuthenticated 为 true，则渲染受保护的组件（元素）。如果没有，它会使用将用户重定向到登录页面。组件。

第 2 步：使用 Route Guard 设置路由

现在，让我们设置主应用程序，在其中使用 PrivateRoute 来保护某些路由，例如 /dashboard。

import React from 'react';
import { Route, Navigate } from 'react-router-dom';

// PrivateRoute component for protecting routes
const PrivateRoute = ({ element, isAuthenticated, ...rest }) => {
  return (
    <Route
      {...rest}
      element={isAuthenticated ? element : <Navigate to="/login" />}
    />
  );
};

export default PrivateRoute;

登录后复制

说明：

我们使用简单的 isAuthenticated 状态来跟踪用户是否登录。
如果用户已登录（即 isAuthenticated 为 true），他们可以访问 /dashboard 路由。否则，他们将被重定向到 /login 页面。
PrivateRoute 组件用于保护 /dashboard 路由。
我们使用登录按钮切换 isAuthenticated 状态。如果用户单击该按钮，他们要么登录，要么注销。

示例2：基于用户角色的路由守卫

在此示例中，我们将实现一个路由防护，仅当用户具有管理员角色时才允许访问 /admin 路由。

第 1 步：创建基于角色的 Route Guard

我们将修改 PrivateRoute 组件以处理身份验证和基于角色的访问。

import React, { useState } from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import PrivateRoute from './PrivateRoute'; // Import the route guard

// Simple page components
const Home = () => <h2>Home Page</h2>;
const Login = () => <h2>Login Page</h2>;
const Dashboard = () => <h2>Dashboard (Private)</h2>;

const App = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false); // Authentication state

  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/login">Login</Link></li>
          <li><Link to="/dashboard">Dashboard</Link></li>
        </ul>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        {/* Protected route using PrivateRoute */}
        <PrivateRoute
          path="/dashboard"
          isAuthenticated={isAuthenticated}
          element={<Dashboard />}
        />
      </Routes>

      <div>
        {/* Toggle authentication state */}
        <button onClick={() => setIsAuthenticated(!isAuthenticated)}>
          {isAuthenticated ? "Logout" : "Login"}
        </button>
      </div>
    </BrowserRouter>
  );
};

export default App;

登录后复制

第 2 步：根据角色保护路由

在主应用程序中，我们将设置一个基于角色的路由防护，仅当用户是管理员时才允许访问 /admin 路由。

import React from 'react';
import { Route, Navigate } from 'react-router-dom';

// Role-based Route Guard
const RoleBasedRoute = ({ element, isAuthenticated, userRole, requiredRole, ...rest }) => {
  return (
    <Route
      {...rest}
      element={
        isAuthenticated && userRole === requiredRole
          ? element
          : <Navigate to="/login" />
      }
    />
  );
};

export default RoleBasedRoute;

登录后复制