Normalerweise werden beim Erstellen von Webanwendungen Anmeldeseiten verwendet, um private Seiten zu schützen. Bei einer Blogging-Plattform ist das Dashboard beispielsweise möglicherweise nur für authentifizierte Benutzer zugänglich. Wenn ein nicht authentifizierter Benutzer versucht, auf diese Seite zuzugreifen, leitet die Anwendung ihn auf die Anmeldeseite um. Sobald sie eingeloggt sind, erhalten sie Zugang.
In diesem Artikel sehen wir uns an, wie Sie einen Benutzer von einer eingeschränkten Seite auf eine Anmeldeseite umleiten können. Wir werden auch besprechen, wie Sie den Benutzer nach der Anmeldung auf die Seite zurückbringen können, auf der er sich befand.
In React Router v6 gibt es zwei Möglichkeiten, einen Benutzer umzuleiten – die Navigate-Komponente und die useNavigate() Haken.
Erstellen Sie eine React-Anwendung
Erstellen Sie eine einfache React-Anwendung mit der Erstellen-Reagieren-App Befehl. Sie werden diese Anwendung verwenden, um zu testen, wie die Navigate-Komponente und die useNavigate() Hakenarbeit.
npx schaffen-reagieren-app reagieren-umleiten
Erstellen Sie eine Anmeldeseite
Sie müssen eine Anmeldeseite erstellen, um Benutzer zu authentifizieren. Da dies kein Lernprogramm zur Authentifizierung ist, verwenden Sie ein Array von Objekten als Benutzerdatenbank.
Erstellen Sie eine neue Datei in der Quelle Ordner und benennen Sie ihn Login.js. Fügen Sie dann den folgenden Code hinzu, um Anmeldeformular erstellen.
importieren { useState } aus "reagieren";
importieren Armaturenbrett aus "./Armaturenbrett";
konst Anmelden = () => {
const [Benutzername, SetBenutzername] = useState("");
const [Passwort, setpassword] = useState("");
konst [authenticated, setauthenticated] = useState (localStorage.getItem (localStorage.getItem("authenticated")|| FALSCH));
const users = [{ Benutzername: "Jane", Passwort: "Testpasswort" }];
konst handleSubmit = (e) => {
e.Standard verhindern()
konst account = users.find ((user) => user.username username);
Wenn (Konto && account.password Passwort) {
setauthenticated(Stimmt)
localStorage.setItem("authentifiziert", Stimmt);
}
};
Rückkehr (
<div>
<p>Willkommen zurück</p>
<form onSubmit={handleSubmit}>
<Eingang
Typ="Text"
name="Nutzername"
value={Benutzername}
onChange={(e) => setusername (e.ziel.wert)}
/>
<Eingang
Typ="Passwort"
name="Passwort"
onChange={(e) => setpassword (e.ziel.wert)}
/>
<Eingabetyp="einreichen" wert="Einreichen" />
</form>
</div>
)
};
}
ExportUrsprünglich Anmeldung;
Dies ist ein einfaches Anmeldeformular. Wenn ein Benutzer seinen Benutzernamen und sein Passwort übermittelt, werden sie mit dem Array verglichen. Wenn diese Angaben korrekt sind, wird der authentifizierte Zustand gesetzt Stimmt. Da Sie überprüfen, ob der Benutzer in der Dashboard-Komponente authentifiziert ist, müssen Sie den Authentifizierungsstatus auch an einem Ort speichern, auf den andere Komponenten zugreifen können. Dieser Artikel verwendet lokalen Speicher. In einer realen Anwendung mit Kontext reagieren wäre die bessere Wahl.
Erstellen Sie eine Dashboard-Seite
Fügen Sie den folgenden Code in einer neuen Datei namens Dashboard.js.
konst Dashboard = () => {
Rückkehr (
<div>
<p>Willkommen auf Ihrem Dashboard</p>
</div>
);
};
ExportUrsprünglich Armaturenbrett;
Das Dashboard sollte nur für authentifizierte Benutzer zugänglich sein. Überprüfen Sie daher beim Besuch der Dashboard-Seite zuerst, ob Sie authentifiziert sind. Wenn dies nicht der Fall ist, leiten Sie sie auf die Anmeldeseite um.
Richten Sie dazu zunächst die Anwendungsrouten mit dem React-Router ein.
npm Installieren reagieren-router-dom
Richten Sie in index.js das Routing für Ihre Anwendung ein.
importieren Reagieren aus "reagieren";
importieren ReactDOM aus "react-dom/client";
importieren App aus "./App";
importieren { BrowserRouter, Route, Routen } aus "reagieren-router-dom";
importieren Anmeldung aus "./Anmeldung";
importieren Armaturenbrett aus "./Armaturenbrett";
konst root = ReactDOM.createRoot(dokumentieren.getElementById("root"));
Wurzel.machen(
<Reagieren. Strikter Modus>
<BrowserRouter>
<Routen>
<Routenindexelement={<Anwendung />} />
<Routenpfad="Anmeldung" element={<Anmeldung />} />
<Routenpfad="Armaturenbrett" element={<Armaturenbrett />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);
Schützen Sie die Dashboard-Seite
Nachdem Ihre Bewerbungsrouten eingerichtet sind, geht es im nächsten Schritt weiter Machen Sie die Dashboard-Route privat. Wenn die Dashboard-Komponente geladen wird, wird der Authentifizierungsstatus aus dem lokalen Speicher abgerufen und im Status gespeichert. Wenn der Benutzer nicht authentifiziert ist, leitet die Anwendung zur Anmeldeseite weiter, andernfalls zeigt sie die Dashboard-Seite an.
importieren { useEffect, useState } aus "reagieren";
konst Dashboard = () => {
konst [authenticated, setauthenticated] = useState(Null);
useEffect(() => {
const logInUser = localStorage.getItem("authentifiziert");
if (eingeloggter Benutzer) {
setauthenticated (angemeldeter Benutzer);
}
}, []);
if (!authentifiziert) {
// Umleitung
} anders {
Rückkehr (
<div>
<p>Willkommen auf Ihrem Dashboard</p>
</div>
);
}
};
ExportUrsprünglich Armaturenbrett;
Benutzer mit Navigate zur Anmeldeseite umleiten
Die Navigate-Komponente ersetzte die Redirect-Komponente, die in React Router v5 verwendet wurde. Navigieren von React-Router-Dom importieren.
importieren { Navigieren } aus "reagieren-router-dom";
Um nicht authentifizierte Benutzer umzuleiten, verwenden Sie es wie folgt.
if (!authentifiziert) {
Rückkehr <Navigieren Sie ersetzen zu="/login" />;
} anders {
Rückkehr (
<div>
<p>Willkommen auf Ihrem Dashboard</p>
</div>
);
}
Die Navigate-Komponente ist eine deklarative API. Es stützt sich auf ein Benutzerereignis, das in diesem Fall die Authentifizierung ist, um eine Statusänderung zu bewirken und folglich eine erneute Darstellung der Komponente zu bewirken. Beachten Sie, dass Sie das Schlüsselwort replace nicht verwenden müssen. Wenn Sie es verwenden, wird die aktuelle URL ersetzt, anstatt sie in den Verlauf des Browsers zu verschieben.
Benutzer mit useNavigate() auf eine andere Seite umleiten
Die andere Option zum Ausführen von Weiterleitungen in React ist die useNavigate() Haken. Dieser Hook bietet Zugriff auf die API zum Navigieren im Imperativ. Beginnen Sie mit dem Importieren von React-Router-Dom.
importieren { verwendenNavigieren } aus "reagieren-router-dom";
Umleitung, sobald der Benutzer erfolgreich in der authentifiziert wurde handleSubmit() funktionieren so:
konst navigieren = verwendenNavigate();
konst Anmelden = () => {
konst navigieren = verwendenNavigate();
const [Benutzername, SetBenutzername] = useState("");
const [Passwort, setpassword] = useState("");
konst [authenticated, setauthenticated] = useState(
localStorage.getItem (localStorage.getItem("authentifiziert") || FALSCH)
);
const users = [{ Benutzername: "Jane", Passwort: "Testpasswort" }];
konst handleSubmit = (e) => {
e.Standard verhindern();
konst account = users.find ((user) => user.username username);
Wenn (Konto && account.password Passwort) {
localStorage.setItem("authentifiziert", Stimmt);
navigieren("/dashboard");
}
};
Rückkehr (
<div>
<form onSubmit={handleSubmit}>
<Eingang
Typ="Text"
name="Nutzername"
value={Benutzername}
onChange={(e) => setusername (e.ziel.wert)}
/>
<Eingang
Typ="Passwort"
name="Passwort"
onChange={(e) => setpassword (e.ziel.wert)}
/>
<Eingabetyp="einreichen" wert="Einreichen" />
</form>
</div>
);
};
In diesem Beispiel wird der Benutzer, sobald er das Formular mit den korrekten Details absendet, zum Dashboard weitergeleitet.
Bei der Erstellung von Anwendungen besteht eines der Ziele darin, den Benutzern die beste Erfahrung zu bieten. Sie können dies tun, indem Sie den Benutzer auf die vorherige Seite zurückbringen, indem Sie ihn auf die Anmeldeseite umleiten. Sie können dies tun, indem Sie -1 übergeben, um so zu navigieren, navigieren(-1). Dies funktioniert genauso wie das Drücken der Zurück-Taste in Ihrem Browser.
Weiterleitung in React
In diesem Artikel haben Sie gelernt, wie Sie einen Benutzer auf eine andere Seite in React umleiten können, indem Sie sowohl die Navigate-Komponente als auch die verwenden useNavigate() Haken. Der Artikel verwendete ein Anmeldeformular, um zu demonstrieren, wie Sie nicht authentifizierte Benutzer von einer geschützten Seite auf die Anmeldeseite umleiten können.