React でのルート ガードの実装: 認証とロールによるルートの保護

React のルート ガード

React の

ルート ガード は、ユーザー認証、ロール、権限、さらにはデータの可用性など、特定の条件や基準に基づいて特定のルートへのアクセスを制限または許可するメカニズムを指します。これは、プライベート ルートまたは保護されたルート (管理者ダッシュボード、ユーザー プロファイル、その他の機密領域など) を持つアプリケーションでは一般的な要件です。

ルート ガードは、権限のないユーザーが表示を許可されていないルートにアクセスしようとすると、別のページにリダイレクトするか、エラー メッセージを表示することで、制限されたルートにアクセスするのを防ぎます。

React では、React Router を認証状態やロールベースのアクセス制御などのカスタム ロジックと組み合わせて利用することで、ルート ガードを実装できます。

---

ルートガードの仕組み

1. ユーザー認証の確認: ユーザーがログインしているかどうかを確認します。
2. アクセスのリダイレクトまたは制限: ユーザーが承認されていない場合は、ログイン ページ、権限が拒否されたページ、またはその他の適切なビューにリダイレクトします。
3. ロールに基づいたアクセス制御: 複数のユーザー ロール (管理者、ゲスト、通常ユーザーなど) を持つアプリの場合、ユーザーのロールに基づいてアクセスを制限します。

---

React でのルート ガードの実装例

基本認証ガードを備えた React Router を使用してルート ガードを実装する方法を見てみましょう。ユーザーが認証されているかどうかを確認し、それに基づいて条件付きでルートをレンダリングします。

---

基本的な例: 認証に基づいたルートの保護

この例では、/dashboard のような制限されたルートへのアクセスを許可する前に、ルート ガードを使用してユーザーが認証されているかどうかを確認します。

ステップ 1: Route Guard コンポーネントを作成する

ユーザーが認証されているかどうかを確認し、保護されたルートへのアクセスを許可するか、ログイン ページにリダイレクトする PrivateRoute コンポーネントを作成します。

import React from 'react';
import { Route, Navigate } from 'react-router-dom';

// PrivateRoute component for protecting routes
const PrivateRoute = ({ element, isAuthenticated, ...rest }) => {
  return (
    <Route
      {...rest}
      element={isAuthenticated ? element : <Navigate to="/login" />}
    />
  );
};

export default PrivateRoute;

• PrivateRoute コンポーネントは、要素 (保護されたルート コンポーネント)、isAuthenticated ブール値、および残りのルート プロパティ (...rest) を受け取ります。
• isAuthenticated が true の場合、保護されたコンポーネント (要素) がレンダリングされます。そうでない場合は、 を使用してユーザーをログイン ページにリダイレクトします。コンポーネント。

---

ステップ 2: ルート ガードを使用してルートを設定する

次に、PrivateRoute を使用して /dashboard などの特定のルートを保護するメイン アプリケーションをセットアップしましょう。

import React from 'react';
import { Route, Navigate } from 'react-router-dom';

// PrivateRoute component for protecting routes
const PrivateRoute = ({ element, isAuthenticated, ...rest }) => {
  return (
    <Route
      {...rest}
      element={isAuthenticated ? element : <Navigate to="/login" />}
    />
  );
};

export default PrivateRoute;

説明:

• 単純な isAuthenticated 状態を使用して、ユーザーがログインしているかどうかを追跡します。
• ユーザーがログインしている場合 (つまり、isAuthenticated が true の場合)、/dashboard ルートにアクセスできます。それ以外の場合は、/login ページにリダイレクトされます。
• PrivateRoute コンポーネントは、/dashboard ルートを保護するために使用されます。
• ログイン ボタンを使用して isAuthenticated 状態を切り替えます。ユーザーがボタンをクリックすると、ログインまたはログアウトされます。

---

例 2: ユーザーの役割に基づくルート ガード

この例では、ユーザーが管理者の役割を持っている場合にのみ /admin ルートへのアクセスを許可するルート ガードを実装します。

ステップ 1: ロールベースのルート ガードを作成する

認証とロールベースのアクセスの両方を処理できるように PrivateRoute コンポーネントを変更します。

import React, { useState } from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import PrivateRoute from './PrivateRoute'; // Import the route guard

// Simple page components
const Home = () => <h2>Home Page</h2>;
const Login = () => <h2>Login Page</h2>;
const Dashboard = () => <h2>Dashboard (Private)</h2>;

const App = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false); // Authentication state

  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/login">Login</Link></li>
          <li><Link to="/dashboard">Dashboard</Link></li>
        </ul>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        {/* Protected route using PrivateRoute */}
        <PrivateRoute
          path="/dashboard"
          isAuthenticated={isAuthenticated}
          element={<Dashboard />}
        />
      </Routes>

      <div>
        {/* Toggle authentication state */}
        <button onClick={() => setIsAuthenticated(!isAuthenticated)}>
          {isAuthenticated ? "Logout" : "Login"}
        </button>
      </div>
    </BrowserRouter>
  );
};

export default App;

ステップ 2: 役割に基づいてルートを保護する

メイン アプリケーションでは、ユーザーが管理者の場合にのみ /admin ルートへのアクセスを許可するロールベースのルート ガードを設定します。

import React from 'react';
import { Route, Navigate } from 'react-router-dom';

// Role-based Route Guard
const RoleBasedRoute = ({ element, isAuthenticated, userRole, requiredRole, ...rest }) => {
  return (
    <Route
      {...rest}
      element={
        isAuthenticated && userRole === requiredRole
          ? element
          : <Navigate to="/login" />
      }
    />
  );
};

export default RoleBasedRoute;

説明:

• RoleBasedRoute コンポーネントは、ユーザーが認証されているかどうか、およびユーザーのロールがルートに必要なロールと一致するかどうかの両方をチェックします (たとえば、ロール「admin」を持つユーザーのみが /admin ページにアクセスできます)。
• userRole の状態によって、ユーザーが管理者であるか通常のユーザーであるかが決まります。
• ボタンを使用して、「ユーザー」ロールと「管理者」ロールを切り替えることができます。

---

結論

ルート ガードは、認証やユーザー ロールなどの条件に基づいてアプリケーションの特定の部分へのアクセスを制御するために不可欠な機能です。これらは、承認されたユーザーのみが特定のルートにアクセスできるようにすることで、アプリのセキュリティと機能を向上させるのに役立ちます。 React Router では、条件付きレンダリング、リダイレクト用の Navigate コンポーネント、複雑なロジックを処理するカスタム コンポーネントを使用して、ルート ガードを簡単に実装できます。

---

以上がReact でのルート ガードの実装: 認証とロールによるルートの保護の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。