Geschützte Routen sind solche Routen, die nur autorisierten Benutzern Zugriff gewähren. Dies bedeutet, dass Benutzer zunächst bestimmte Bedingungen erfüllen müssen, bevor sie auf diese bestimmte Route zugreifen können. Beispielsweise kann Ihre Anwendung erfordern, dass nur angemeldete Benutzer die Dashboard-Seite besuchen können.

In diesem Tutorial erfahren Sie, wie Sie geschützte Routen in einer React-Anwendung erstellen.

Beachten Sie, dass Sie React Router v6 verwenden werden, was sich ein wenig von früheren Versionen unterscheidet.

Einstieg

Verwenden Sie zunächst Erstellen-Reagieren-App um eine einfache React-Anwendung zu booten.

npx create-react-app protect-routes-react

Navigieren Sie zu dem gerade erstellten Ordner und starten Sie Ihre Anwendung.

cd protect-routes-react
npm starten

Öffnen Sie Ihren Anwendungsordner mit Ihrem bevorzugten Texteditor und bereinigen Sie ihn. Dein app.js sollte so aussehen.

Funktion App() {
 Rückkehr ;
}
Standard-App exportieren;

Sie können jetzt die Routen einrichten.

Verwandt: So erstellen Sie Ihre erste React-App mit JavaScript

Einrichten des React-Routers

Sie verwenden React Router, um die Navigation für Ihre Anwendung einzurichten.

Installieren reagieren-router-dom.

npm installiere reagieren-router-dom

Für diese Anwendung haben Sie drei Hauptseiten:

• Homepage (die Zielseite).
• Profilseite (geschützt, sodass nur eingeloggte Benutzer Zugriff haben).
• About-Seite (öffentlich, damit jeder darauf zugreifen kann).

Im Navbar.js, verwenden Sie die Verknüpfung Komponente aus reagieren-router-dom um die Navigationslinks zu verschiedenen Pfaden zu erstellen.

const { Link } = require("react-router-dom");
const Navbar = () => {
 Rückkehr (

 );
};
Standard-Navbar exportieren;

Im app.js Erstellen Sie die Routen, die den Links im Navigationsmenü entsprechen.

importiere { BrowserRouter als Router, Routen, Route } aus "react-router-dom";
Navbar aus "./Navbar" importieren;
Home aus "./Home" importieren;
Profil aus "./Profile" importieren;
Über von "./About" importieren;
Funktion App() {
 Rückkehr (



} />
} />
} />


 );
}
Standard-App exportieren;

Jetzt müssen Sie die Komponenten erstellen, auf die Sie verwiesen haben EINpp.js.

Im Home.js:

const Home = () => {
 Rückkehr 
Startseite
;
};
Standard Home exportieren;

Im Profil.js

konstantes Profil = () => {
 Rückkehr 
Profilseite
;
};
Standardprofil exportieren;

Im Über.js

const Über = () => {
 Rückkehr 
Über Seite
;
};
Exportstandard Über;

Erstellen geschützter Routen in React

Als nächstes erstellen Sie geschützte Routen. Die Zuhause und Über Routen sind öffentlich, was bedeutet, dass jeder darauf zugreifen kann, aber die Profilroute erfordert, dass Benutzer zuerst authentifiziert werden. Daher müssen Sie eine Möglichkeit schaffen, Benutzer anzumelden.

Einrichten einer gefälschten Authentifizierung

Da dies kein Authentifizierungs-Tutorial ist, verwenden Sie React useState-Hook um ein Anmeldesystem zu simulieren.

Im EINpp.js, fügen Sie Folgendes hinzu.

importiere {Routen, Route, BrowserRouter} aus "react-router-dom";
importiere { useState } aus "reagieren";
// Andere Importanweisungen
Funktion App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (wahr);
 };
 const logOut = () => {
 setisLoggedIn (falsch);
 };
 Rückkehr (


 {isLoggedIn? (
Ausloggen
 ): (
Anmeldung
 )}



 );
}
Standard-App exportieren;

Hier verfolgen Sie den Anmeldestatus des Benutzers mithilfe von state. Sie haben zwei Schaltflächen, die Login- und die Logout-Schaltfläche. Diese Schaltflächen werden wiederum abhängig davon gerendert, ob ein Benutzer angemeldet ist oder nicht.

Wenn der Benutzer abgemeldet ist, wird die Anmeldeschaltfläche angezeigt. Ein Klick darauf löst die Login-Funktion aus, die die aktualisiert ist eingeloggt state auf true und damit die Anzeige vom Login- zum Logout-Button.

Verwandt: Was ist Benutzerauthentifizierung und wie funktioniert sie?

Schutz privater Komponenten

Um Routen zu schützen, müssen die privaten Komponenten auch Zugriff auf die haben ist eingeloggt Wert. Sie können dies tun, indem Sie eine neue Komponente erstellen, die die akzeptiert ist eingeloggt Staat als Requisite und die private Komponente als Kind.

Wenn Ihre neue Komponente beispielsweise "Geschützt" heißt, würden Sie eine private Komponente wie diese rendern.

Die Protected-Komponente prüft, ob ist eingeloggt wahr oder falsch ist. Wenn es wahr ist, wird es fortfahren und die Private-Komponente zurückgeben. Wenn es falsch ist, wird der Benutzer auf eine Seite umgeleitet, auf der er sich anmelden kann.

Erfahren Sie ab diesem Artikel mehr über andere Möglichkeiten zum Rendern einer Komponente in Abhängigkeit von Bedingungen bedingtes Rendern in React.

Erstellen Sie in Ihrer Anwendung Protected.js.

Importieren Sie {Navigieren} aus "React-Router-Dom";
const Protected = ({ isLoggedIn, children }) => {
 if (!isLoggedIn) {
 Rückkehr ;
 }
 Kinder zurückgeben;
};
Exportstandard geschützt;

In dieser Komponente wird die if-Anweisung verwendet, um zu prüfen, ob der Benutzer authentifiziert ist. Wenn sie es nicht sind, Navigieren von reagieren-router-dom leitet sie auf die Startseite weiter. Wenn der Benutzer jedoch authentifiziert ist, wird die untergeordnete Komponente gerendert.

Verwenden Protected.js in EINpp.js modifiziere den Profil Seite Route.

 Pfad="/Profil"
 element={



 }
/>

App.js sollte so aussehen.

importiere {Routen, Route, BrowserRouter} aus "react-router-dom";
importiere { useState } aus "reagieren";
Navbar aus "./Navbar" importieren;
import Geschützt vor "./Protected";
Home aus "./Home" importieren;
Über von "./About" importieren;
Profil aus "./Profile" importieren;
Funktion App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (wahr);
 };
 const logOut = () => {
 setisLoggedIn (falsch);
 };
 Rückkehr (




 {isLoggedIn? (
Ausloggen
 ): (
Anmeldung
 )}

} />
 element={



 }
 />
} />





 );
}
Standard-App exportieren;

Das war's beim Erstellen geschützter Routen. Sie können jetzt nur auf die Profilseite zugreifen, wenn Sie angemeldet sind. Wenn Sie versuchen, ohne Anmeldung zur Profilseite zu navigieren, werden Sie zur Startseite weitergeleitet.

Rollenbasierte Zugriffskontrolle

Dieses Tutorial hat Ihnen gezeigt, wie Sie nicht authentifizierte Benutzer daran hindern können, auf eine Seite in einer React-Anwendung zuzugreifen. In einigen Fällen müssen Sie möglicherweise sogar noch weiter gehen und Benutzer basierend auf ihren Rollen einschränken. Beispielsweise können Sie eine Seite als Analyseseite bezeichnen, die nur Administratoren Zugriff gewährt. Hier müssen Sie der Protected-Komponente Logik hinzufügen, die überprüft, ob ein Benutzer die erforderlichen Bedingungen erfüllt.

So implementieren Sie bedingtes Rendering in React.js (mit Beispielen)

Bedingtes Rendern ist eine nützliche Möglichkeit, Ihre App zu verbessern. Hier finden Sie eine Auswahl an Verwendungsmöglichkeiten.

Lesen Sie weiter

Über den Autor