React を使用して Web アプリケーションを構(gòu)築する場合、多くの場合、アクセスを特定のルートに制限し、認(rèn)証されたユーザーのみにアクセスを許可する必要があります。この記事では、React、react-router-dom、および Outlet コンポーネントを使用して保護(hù)されたルートを作成する方法を説明し、localStorage に格納されている値に基づいてユーザーが管理者であるかどうかを確認(rèn)する方法を示します。

保護(hù)されたルーティングとは何ですか?

保護(hù)されたルートとは、特定の條件 (認(rèn)証されている、または管理者権限などの特定の権限を持っているなど) を満たすユーザーのみがアクセスできるページを指します。これらの條件が満たされない場合、ユーザーはログイン ページなどの別のページにリダイレクトされます。

前提條件

始める前に次のことを確認(rèn)してください:

• プロジェクト內(nèi)で React が設(shè)定されました。
• React-router-dom がインストールされました:

npm install react-router-dom

例: 管理者検証による保護(hù)されたルーティング

この例では、localStorage の値をチェックすることで、ユーザーが管理者として認(rèn)証されていることを確認(rèn)します。管理者でない場合は、ログイン ページにリダイレクトします。

• ルーティング構(gòu)成

まず、アプリケーションのメインルートを設(shè)定します。

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ù)されたルートをレンダリングする前に、ユーザーが管理者として認(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」の場合、保護(hù)されたルートのコンテンツを表す Outlet コンポーネントが表示されます。 そうでない場合は、Navigate コンポーネントを使用してユーザーをルート パス (/) にリダイレクトします。

• ログイン ページの作成 (ログイン) このページは、基本的なログイン プロセスをシミュレートし、ユーザー ロールを 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;

• ダッシュボードページの作成

ダッシュボード ページは保護(hù)されたルートであり、管理者の役割を持つユーザーのみがアクセスできます。

import React from "react";

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

export default Dashboard;

プロセス例

ユーザー アクセス アプリケーション:

ログインしていない場合は、ログイン ページ (/) が表示されます。 管理者としてログインすると、ロールは localStorage に保存され、ダッシュボード (/dashboard) にリダイレクトされます。 ダッシュボードには、保護(hù)されたコンテンツ (統(tǒng)計と構(gòu)成) が表示されます。

ユーザーが管理者権限なしでダッシュボードに直接アクセスしようとすると、自動的にログイン ページにリダイレクトされます。

概要

保護(hù)されたルーティングは、ユーザーと権限を処理するアプリケーションにとって重要です。 React Router DOM、Outlet コンポーネント、ブラウザ ストレージ (localStorage など) を使用して、基本的なアクセス制限システムを?qū)g裝できます。このアプローチは小規(guī)模なアプリケーションや學(xué)習(xí)プロジェクトには最適ですが、大規(guī)模なプロジェクトでは、より強(qiáng)力な認(rèn)証ソリューションが推奨されます。

ご質(zhì)問がございましたら、コメント欄にメッセージを殘してください?

以上がReact および React Router DOM を使用して保護(hù)されたルートを作成する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。