在 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;

登入後複製