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 コンポーネントを使用してユーザーをルート パス (/) にリダイレクトします。

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

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

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

import React from "react";

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

export default Dashboard;

プロセス例

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

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

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

概要

保護されたルーティングは、ユーザーと権限を処理するアプリケーションにとって重要です。 React Router DOM、Outlet コンポーネント、ブラウザ ストレージ (localStorage など) を使用して、基本的なアクセス制限システムを実装できます。このアプローチは小規模なアプリケーションや学習プロジェクトには最適ですが、大規模なプロジェクトでは、より強力な認証ソリューションが推奨されます。

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

以上がReact および React Router DOM を使用して保護されたルートを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。