如何使用 React 和 React Router DOM 建立受保護的路由

在使用React建立Web應用時，我們經常需要限制對某些路由的訪問，只允許已認證的使用者存取。本文將說明如何使用React、react-router-dom和Outlet元件建立受保護的路由，並示範如何基於localStorage中儲存的值來驗證使用者是否為管理員。

什麼是受保護路由？

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

先決條件

開始之前，請確保：

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

npm install react-router-dom

範例：帶有管理員驗證的受保護路由

此範例將透過檢查localStorage中的值來驗證使用者是否已認證為管理員。如果不是管理員，則將其重新導向到登入頁面。

• 路由配置

首先，配置應用程式的主要路由。

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元件

此元件在渲染受保護路由之前驗證使用者是否已認證為管理員。如果不是，則將其重新導向到登入頁面。

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元件，它代表受保護路由的內容。 如果不是，則使用Navigate元件將使用者重新導向到根路徑（/）。

• 建立登入頁面(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;

• 建立Dashboard頁面

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

import React from "react";

function Dashboard() {
  return (
    <div>
      <h1>仪表盘</h1>
      <p>这是受保护的页面内容。</p>
    </div>
  );
}

export default Dashboard;

範例流程

使用者存取應用程式：

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

如果使用者嘗試直接存取Dashboard而沒有管理員權限，則會自動重定向到登入頁面。

總結

受保護的路由對於處理使用者和權限的應用程式至關重要。使用React Router DOM、Outlet元件和瀏覽器儲存（如localStorage），我們可以實作一個基本的存取限制系統。這種方法非常適合小型應用程式或學習項目，但在大型專案中，建議使用更強大的身份驗證解決方案。

有任何問題，請在留言區留言! ?

以上是如何使用 React 和 React Router DOM 建立受保護的路由的詳細內容。更多資訊請關注PHP中文網其他相關文章！