So erstellen Sie geschützte Routen mit React und React Router DOM

Beim Erstellen von Webanwendungen mit React müssen wir häufig den Zugriff auf bestimmte Routen beschränken und den Zugriff nur authentifizierten Benutzern erlauben. In diesem Artikel wird erläutert, wie Sie mit React, React-Router-Dom und der Outlet-Komponente eine geschützte Route erstellen und anhand des in localStorage gespeicherten Werts überprüfen, ob der Benutzer ein Administrator ist.

Was ist geschütztes Routing?

Geschützte Routen beziehen sich auf Seiten, auf die nur Benutzer zugreifen können, die bestimmte Bedingungen erfüllen (z. B. Authentifizierung oder bestimmte Berechtigungen, z. B. Administratorrechte). Wenn diese Bedingungen nicht erfüllt sind, wird der Benutzer auf eine andere Seite weitergeleitet, beispielsweise eine Anmeldeseite.

Voraussetzungen

Bevor Sie beginnen, stellen Sie bitte Folgendes sicher:

• React wurde im Projekt konfiguriert.
• React-router-dom installiert:

npm install react-router-dom

Beispiel: Geschütztes Routing mit Administratorverifizierung

In diesem Beispiel wird überprüft, ob der Benutzer als Administrator authentifiziert ist, indem der Wert in localStorage überprüft wird. Wenn Sie kein Administrator sind, leiten Sie sie zur Anmeldeseite weiter.

• Routing-Konfiguration

Konfigurieren Sie zunächst die Hauptroute der Anwendung.

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-Komponente erstellen

Diese Komponente überprüft, ob der Benutzer als Administrator authentifiziert ist, bevor die geschützte Route gerendert wird. Wenn nicht, leiten Sie es zur Anmeldeseite weiter.

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;

Code-Erklärung:

localStorage.getItem("role"): Rufen Sie die in localStorage gespeicherte Benutzerrolle ab. Wenn die Rolle „admin“ ist, wird die Outlet-Komponente gerendert, die den Inhalt der geschützten Route darstellt. Wenn nicht, verwenden Sie die Navigate-Komponente, um den Benutzer zum Stammpfad (/) umzuleiten.

• Erstellen Sie eine Anmeldeseite (Login). Diese Seite simuliert den grundlegenden Anmeldevorgang und speichert die Benutzerrolle in 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-Seite erstellen

Die Dashboard-Seite ist eine geschützte Route und kann nur von Benutzern mit Administratorrolle aufgerufen werden.

import React from "react";

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

export default Dashboard;

Beispielprozess

Benutzerzugriffsanwendung:

Wenn Sie nicht angemeldet sind, wird die Anmeldeseite (/) angezeigt. Nach der Anmeldung als Administrator wird die Rolle in localStorage gespeichert und an Dashboard (/dashboard) weitergeleitet. Im Dashboard werden geschützte Inhalte (Statistiken und Konfiguration) angezeigt.

Wenn ein Benutzer ohne Administratorrechte versucht, direkt auf das Dashboard zuzugreifen, wird er automatisch zur Anmeldeseite weitergeleitet.

Zusammenfassung

Geschütztes Routing ist für Anwendungen, die Benutzer und Berechtigungen verwalten, von entscheidender Bedeutung. Mithilfe des React Router DOM, der Outlet-Komponente und des Browserspeichers (z. B. localStorage) können wir ein grundlegendes Zugriffsbeschränkungssystem implementieren. Dieser Ansatz eignet sich hervorragend für kleine Anwendungen oder Lernprojekte, bei größeren Projekten wird jedoch eine stärkere Authentifizierungslösung empfohlen.

Wenn Sie Fragen haben, hinterlassen Sie bitte eine Nachricht im Kommentarbereich ?

Das obige ist der detaillierte Inhalt vonSo erstellen Sie geschützte Routen mit React und React Router DOM. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!