在使用React建立Web應(yīng)用時(shí)，我們經(jīng)常需要限制對(duì)某些路由的訪問，只允許已認(rèn)證的使用者存取。本文將說明如何使用React、react-router-dom和Outlet元件建立受保護(hù)的路由，並示範(fàn)如何基於localStorage中儲(chǔ)存的值來驗(yàn)證使用者是否為管理員。

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

受保護(hù)路由是指只有符合特定條件（例如已認(rèn)證或擁有特定權(quán)限，例如管理員權(quán)限）的使用者才能存取的頁面。如果不符合這些條件，使用者將被重新導(dǎo)向到其他頁面，例如登入頁面。

先決條件

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

• 已在專案中設(shè)定React。
• 已安裝react-router-dom：

npm install react-router-dom

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

此範(fàn)例將透過檢查localStorage中的值來驗(yàn)證使用者是否已認(rèn)證為管理員。如果不是管理員，則將其重新導(dǎo)向到登入頁面。

• 路由配置

首先，配置應(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;

• 建立ProtectedRoute元件

此元件在渲染受保護(hù)路由之前驗(yàn)證使用者是否已認(rèn)證為管理員。如果不是，則將其重新導(dǎo)向到登入頁面。

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元件將使用者重新導(dǎo)向到根路徑（/）。

• 建立登入頁面(Login) 此頁面模擬基本的登入過程，並將使用者角色儲(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;

• 建立Dashboard頁面

Dashboard頁面是受保護(hù)的路由，只有具有管理員角色的使用者才能存取。

import React from "react";

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

export default Dashboard;

範(fàn)例流程

使用者存取應(yīng)用程式：

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

如果使用者嘗試直接存取Dashboard而沒有管理員權(quán)限，則會(huì)自動(dòng)重定向到登入頁面。

總結(jié)

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

有任何問題，請(qǐng)?jiān)诹粞詤^(qū)留言! ?

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