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

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

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

先決條件

開始之前，請(qǐng)確保：

• 已在項(xiàng)目中配置React。
• 已安裝react-router-dom：

npm install react-router-dom

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

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

• 路由配置

首先，配置應(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ù)路由之前驗(yàn)證用戶是否已認(rèn)證為管理員。如果不是，則將其重定向到登錄頁(yè)面。

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

• 創(chuàng)建登錄頁(yè)面(Login) 此頁(yè)面模擬基本的登錄過(guò)程，并將用戶角色存儲(chǔ)在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頁(yè)面

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

import React from "react";

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

export default Dashboard;

示例流程

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

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

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

總結(jié)

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

有任何問(wèn)題，請(qǐng)?jiān)谠u(píng)論區(qū)留言! ?

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