So behalten Sie einen angemeldeten Benutzer in React

Wenn Sie eine schnelle Google-Suche durchführen, um einen in React angemeldeten Benutzer zu behalten (oder einen in React angemeldeten Benutzer zu behalten), erhalten Sie nicht viele einfache Ergebnisse. Es gibt keine leicht zu befolgenden Beispiele, wie dies erreicht werden kann. Also entschied ich mich, diesen einfachen Leitfaden zu schreiben.

Möglicherweise haben Sie eine Suche durchgeführt und das Wort localStorage herumgeworfen . Ja, wir werden localStorage verwenden, aber ich werde Ihnen genau zeigen, wie es gemacht wird.

Einige Hinweise zu localStorage.

  1. localStorage ist die Datenbank des Browsers. Die Daten werden in Ihrem Browser im Speicher Ihres Computers gespeichert.
  2. localStorage ist spezifisch für einen Ursprung. Mit anderen Worten, auf den localStorage für eine Website kann keine andere zugreifen.

Ersteinrichtung

Lass uns anfangen. Ich habe Heroku einen einfachen Express-Server zum Testen dieser Anwendung bereitgestellt.

  1. Erstellen Sie eine neue React-Anwendung und gehen Sie in die Komponente.
  2. Installieren Sie Axios mit npm install axiosund importieren Sie es in
  3. Erstellen Sie als Nächstes ein einfaches Anmeldeformular, das einen Benutzernamen und ein Kennwort akzeptiert.
import React, { useState } from "react"; import axios from "axios"; const App = () => { const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [user, setUser] = useState() const handleSubmit = async e => { }; // if there's a user show the message below if (user) { return {user.name} is loggged in ; } // if there's no user, show the login form return (  Username:   setUsername(target.value)} /> password:   setPassword(target.value)} /> Login  ); }; export default App; 

Wie Sie sehen, haben wir eine asynchrone handleSubmit- Funktion definiert, um die Anmeldeanforderung zu verarbeiten. Wir haben auch eine Bedingung definiert, die anzeigt, dass ein Benutzername angemeldet ist , wenn wir einen Benutzer haben, und das Anmeldeformular, wenn wir keinen Benutzer haben.

Als nächstes schließen wir die Funktion ab. Diese Funktion funktioniert in den folgenden Schritten:

  1. Senden Sie die Anmeldedaten an den Server.
  2. Wenn die Anforderung erfolgreich ist (asynchron warten), speichern Sie die Benutzerinformationen in localStorage und legen Sie den Status des Benutzers fest.

Behandeln Sie das Anmeldeereignis

Definieren wir den handleSubmit- Ereignishandler.

const handleSubmit = async e => { e.preventDefault(); const user = { username, password }; // send the username and password to the server const response = await axios.post( "//blogservice.herokuapp.com/api/login", user ); // set the state of the user setUser(response.data) // store the user in localStorage localStorage.setItem('user', response.data) console.log(response.data) }; 

Hinweis: Verwenden Sie einen tryCatch- Block, um Fehler in asynchronen Funktionen zu behandeln.

Nachdem unsere Funktion abgeschlossen ist, können Sie npm start ausführen, um Ihre App zu testen. Melden Sie sich mit dem Benutzernamen an : Benutzer2, Passwort : Passwort.

Sie sollten Folgendes als Antwort erhalten. Die Benutzer- ID , das Token und der Benutzername

Überprüfen Sie, ob sich ein Benutzer zuvor angemeldet hat

Als Nächstes möchten wir überprüfen, ob bei jedem Laden der App ein Benutzer angemeldet ist. Dafür verwenden wir den useEffect-Hook.

 useEffect(() => { const loggedInUser = localStorage.getItem("user"); if (loggedInUser) { const foundUser = JSON.parse(loggedInUser); setUser(foundUser); } }, []); 

Denken Sie daran, ein leeres Abhängigkeitsarray in Ihrem useEffect-Hook zu verwenden, damit beim ersten Laden der App überprüft wird, ob ein angemeldeter Benutzer vorhanden ist.

Jetzt sollte unsere App perfekt funktionieren. Die folgende Seite wird angezeigt, nachdem sich ein Benutzer zum ersten Mal angemeldet und seine Daten gespeichert haben. Wenn Sie die Seite aktualisieren, sehen Sie, dass unser Benutzer angemeldet bleibt und die angemeldete Seite weiterhin angezeigt wird.

Als Bonus-Tipp erfahren Sie hier, wie Sie die Abmeldung implementieren.

Implementieren der Abmeldefunktion

Zum Abmelden leeren wir einfach den Benutzerstatus und entfernen den Benutzer aus localStorage.

Lassen Sie uns das umsetzen.

Zuerst erstellen wir eine Abmeldeschaltfläche

logout 

Dann erstellen wir die Abmeldefunktion.

const handleLogout = () => { setUser({}); setUsername(""); setPassword(""); localStorage.clear(); }; 

Und das war's, wir sind fertig.

Hier ist ein Link zum vollständigen Inhalt von GitHub. Sie können mir dort für weitere Updates folgen.