在使用React構(gòu)建Web應(yīng)用時，我們經(jīng)常需要限制對某些路由的訪問，只允許已認(rèn)證的用戶訪問。本文將講解如何使用React、react-router-dom和Outlet組件創(chuàng)建受保護(hù)的路由，并演示如何基于localStorage中存儲的值驗證用戶是否為管理員。

什么是受保護(hù)路由？

受保護(hù)路由是指只有滿足特定條件（例如已認(rèn)證或擁有特定權(quán)限，比如管理員權(quán)限）的用戶才能訪問的頁面。如果不滿足這些條件，用戶將被重定向到其他頁面，例如登錄頁面。

先決條件

開始之前，請確保：

• 已在項目中配置React。
• 已安裝react-router-dom：

npm install react-router-dom

示例：帶有管理員驗證的受保護(hù)路由

此示例將通過檢查localStorage中的值來驗證用戶是否已認(rèn)證為管理員。如果不是管理員，則將其重定向到登錄頁面。

• 路由配置

首先，配置應(yīng)用程序的主要路由。

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from "./Login";
import Dashboard from "./Dashboard";
import ProtectedRoute from "./ProtectedRoute";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Login />} />
        <Route element={<ProtectedRoute />} path="/dashboard/*">
          <Route index element={<Dashboard />} /> {/*  添加index路由處理/dashboard */}
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

• 創(chuàng)建ProtectedRoute組件

此組件在渲染受保護(hù)路由之前驗證用戶是否已認(rèn)證為管理員。如果不是，則將其重定向到登錄頁面。

import React from "react";
import { Navigate, Outlet } from "react-router-dom";

const ProtectedRoute = () => {
  // 從localStorage中檢查用戶是否為管理員
  const isAdmin = localStorage.getItem("role") === "admin";

  return isAdmin ? <Outlet /> : <Navigate to="/" />;
};

export default ProtectedRoute;

代碼解釋：

localStorage.getItem("role"): 獲取存儲在localStorage中的用戶角色。 如果角色是“admin”，則渲染Outlet組件，它代表受保護(hù)路由的內(nèi)容。 如果不是，則使用Navigate組件將用戶重定向到根路徑（/）。

• 創(chuàng)建登錄頁面(Login) 此頁面模擬基本的登錄過程，并將用戶角色存儲在localStorage中。

import React from "react";
import { useNavigate } from "react-router-dom";

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // 模擬登錄并保存用戶角色
    localStorage.setItem("role", "admin");
    navigate("/dashboard");
  };

  return (
    <div>
      {/* 登錄表單 */}
      <button onClick={handleLogin}>登錄</button>
    </div>
  );
}

export default Login;

• 創(chuàng)建Dashboard頁面

Dashboard頁面是受保護(hù)的路由，只有具有管理員角色的用戶才能訪問。

import React from "react";

function Dashboard() {
  return (
    <div>
      <h1>儀表盤</h1>
      <p>這是受保護(hù)的頁面內(nèi)容。</p>
    </div>
  );
}

export default Dashboard;

示例流程

用戶訪問應(yīng)用程序：

如果未登錄，則會看到登錄頁面(/)。 登錄為管理員后，角色將存儲在localStorage中，并重定向到Dashboard(/dashboard)。 在Dashboard中，顯示受保護(hù)的內(nèi)容（統(tǒng)計信息和配置）。

如果用戶嘗試直接訪問Dashboard而沒有管理員權(quán)限，則會自動重定向到登錄頁面。

總結(jié)

受保護(hù)的路由對于處理用戶和權(quán)限的應(yīng)用程序至關(guān)重要。使用React Router DOM、Outlet組件和瀏覽器存儲（如localStorage），我們可以實現(xiàn)一個基本的訪問限制系統(tǒng)。這種方法非常適合小型應(yīng)用程序或?qū)W習(xí)項目，但在大型項目中，建議使用更強大的身份驗證解決方案。

有任何問題，請在評論區(qū)留言! ?

以上是如何使用 React 和 React Router DOM 創(chuàng)建受保護(hù)的路由的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！