Implementieren von Route Guards in React: Schützen Sie Ihre Routen mit Authentifizierung und Rollen

Route Guards in Reaktion

Route Guards in React beziehen sich auf den Mechanismus, der den Zugriff auf bestimmte Routen basierend auf bestimmten Bedingungen oder Kriterien wie Benutzerauthentifizierung, Rollen, Berechtigungen oder sogar Datenverfügbarkeit einschränkt oder zulässt. Dies ist eine häufige Anforderung in Anwendungen mit privaten oder geschützten Routen (z. B. Admin-Dashboards, Benutzerprofile oder andere sensible Bereiche).

Routenwächter verhindern, dass unbefugte Benutzer auf eingeschränkte Routen zugreifen, indem sie sie entweder auf eine andere Seite umleiten oder eine Fehlermeldung anzeigen, wenn sie versuchen, auf eine Route zuzugreifen, die sie nicht anzeigen dürfen.

In React können Routenwächter implementiert werden, indem React Router in Kombination mit benutzerdefinierter Logik wie Authentifizierungszuständen oder rollenbasierter Zugriffskontrolle verwendet wird.

---

Wie Route Guards funktionieren

1. Benutzerauthentifizierung prüfen: Stellen Sie fest, ob der Benutzer angemeldet ist.
2. Zugriff umleiten oder einschränken: Wenn der Benutzer nicht autorisiert ist, leiten Sie ihn entweder auf eine Anmeldeseite, eine Seite mit verweigerter Berechtigung oder eine andere geeignete Ansicht um.
3. Zugriffskontrolle basierend auf der Rolle: Beschränken Sie den Zugriff für Apps mit mehreren Benutzerrollen (z. B. Administrator, Gast oder normaler Benutzer) basierend auf der Rolle des Benutzers.

---

Beispiel für die Implementierung von Route Guards in React

Sehen wir uns an, wie man Route Guards mithilfe von React Router mit einem einfachen Authentifizierungsschutz implementiert. Wir prüfen, ob der Benutzer authentifiziert ist und stellen die Routen darauf basierend bedingt dar.

---

Grundlegendes Beispiel: Schutz von Routen basierend auf Authentifizierung

In diesem Beispiel verwenden wir einen Route Guard, um zu prüfen, ob der Benutzer authentifiziert ist, bevor wir den Zugriff auf eine eingeschränkte Route wie /dashboard zulassen.

Schritt 1: Erstellen Sie die Route Guard-Komponente

Wir erstellen eine PrivateRoute-Komponente, die prüft, ob ein Benutzer authentifiziert ist, und entweder den Zugriff auf die geschützte Route zulässt oder ihn zur Anmeldeseite weiterleitet.

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;

• Die PrivateRoute-Komponente übernimmt das Element (das die geschützte Routenkomponente ist), den booleschen Wert isAuthenticated und den Rest der Routen-Requisiten (...rest).
• Wenn isAuthenticated wahr ist, wird die geschützte Komponente (Element) gerendert. Wenn nicht, wird der Benutzer über die Schaltfläche zur Anmeldeseite weitergeleitet. Komponente.

---

Schritt 2: Routen mit Route Guards einrichten

Jetzt richten wir die Hauptanwendung ein, in der wir PrivateRoute verwenden, um bestimmte Routen wie /dashboard zu schützen.

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;

Erklärung:

• Wir verwenden einen einfachen isAuthenticated-Status, um zu verfolgen, ob der Benutzer angemeldet ist oder nicht.
• Wenn der Benutzer angemeldet ist (d. h. isAuthenticated ist wahr), kann er auf die Route /dashboard zugreifen. Andernfalls werden sie zur Seite /login weitergeleitet.
• Die PrivateRoute-Komponente wird zum Schutz der /dashboard-Route verwendet.
• Wir schalten den isAuthenticated-Status über die Anmeldeschaltfläche um. Wenn der Benutzer auf die Schaltfläche klickt, wird er entweder angemeldet oder abgemeldet.

---

Beispiel 2: Route Guards basierend auf Benutzerrollen

In diesem Beispiel implementieren wir einen Routenwächter, der den Zugriff auf die Route /admin nur dann zulässt, wenn der Benutzer eine Administratorrolle hat.

Schritt 1: Erstellen Sie einen rollenbasierten Route Guard

Wir werden die PrivateRoute-Komponente ändern, um sowohl die Authentifizierung als auch den rollenbasierten Zugriff zu verarbeiten.

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;

Schritt 2: Routen basierend auf der Rolle schützen

In der Hauptanwendung richten wir einen rollenbasierten Routenwächter ein, der den Zugriff auf die Route /admin nur dann zulässt, wenn der Benutzer ein Administrator ist.

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;

Erklärung:

• Die RoleBasedRoute-Komponente prüft sowohl, ob der Benutzer authentifiziert ist, als auch, ob seine Rolle mit der erforderlichen Rolle für die Route übereinstimmt (z. B. können nur Benutzer mit der Rolle „admin“ auf die Seite /admin zugreifen).
• Der userRole-Status bestimmt, ob der Benutzer ein Administrator oder ein regulärer Benutzer ist.
• Mit der Schaltfläche können Sie zwischen den Rollen „Benutzer“ und „Administrator“ wechseln.

---

Fazit

Route Guards sind eine wesentliche Funktion zur Kontrolle des Zugriffs auf bestimmte Teile Ihrer Anwendung basierend auf Bedingungen wie Authentifizierung und Benutzerrollen. Sie tragen dazu bei, die Sicherheit und Funktionalität Ihrer App zu verbessern, indem sie sicherstellen, dass nur autorisierte Benutzer auf bestimmte Routen zugreifen können. React Router erleichtert die Implementierung von Routenwächtern durch die Verwendung von bedingtem Rendering, der Navigate-Komponente für die Umleitung und benutzerdefinierten Komponenten zur Handhabung komplexer Logik.

---

Das obige ist der detaillierte Inhalt vonImplementieren von Route Guards in React: Schützen Sie Ihre Routen mit Authentifizierung und Rollen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!