Der ultimative JWT [ SingUp, Anmelden, Logout mit MERN Stack ]

1. EINFÜHRUNG: Willkommen zum ultimativen JWT-Kurs. In diesem Kurs werden wir JWT in einfacher und einfacher Sprache lernen . Nach Abschluss dieses Kurses haben Sie die JSON-Web-Token richtig verstanden . Zunächst werden wir sehen, was JWT ist und warum wir es brauchen. Danach beginnen wir mit dem Back-End-Teil von JWT, dem es darum geht, Token zu generieren, Token zu überprüfen und die Sicherheits-API nur für angemeldete Benutzer zu implementieren. Danach wechseln wir zum Frontend-Teil, in dem wir Dogan in unserem Browser speichern. Implementierung von Anmelde -, Anmelde- und Abmeldefunktionen, Senden von Token im Header und Erstellen einer Komponente für private Route. Im Bereich Projekt erhalten Sie alle Ressourcen für diesen Kurs. Ich freue mich sehr auf diesen Kurs und hoffe du auch. Lass uns anfangen. 2. Was ist JWT und warum brauchen wir es?: JWT steht also für JSON-Web-Token, das zur sicheren Übertragung Informationen zwischen zwei Parteien wie Back-End und Front-End verwendet wird. Der Hauptgrund für die Verwendung von JWT besteht jedoch darin, den Benutzer mit der Verwendung seines Tokens zu authentifizieren. Lassen Sie uns das anhand des Beispiels verstehen. Hier gibt es kaum ein Login mit seinen Kontoinformationen, E-Mail-Adresse und Passwort. Jetzt unser Server plus J, die Entzündung. Und wenn es wahr ist, Server seine Benutzer-ID als Antwort zurück und speichert diese im Bürger oder Cookie. Wann immer er der Anfrage sichere Informationen sendet , sagen wir alle seine Bankinformationen. Beim Serverbeitrag wurde nach der Benutzer-ID gefragt. Und wenn er eine Benutzer-ID hat, dann und dann sendet der Server die sicheren Informationen. Aber hier ein großes Problem, das ist nicht unser Cookie , in dem wir unsere Benutzer-ID speichern. Es kann einfach im Browser geändert werden. Nehmen wir an, ich habe gerade diese Benutzer-ID in eine andere Benutzer-ID geändert . Dann erhalten wir die Informationen über diesen Benutzer. Dieser Ansatz ist also nicht gesichert. dieses Problem zu lösen, haben wir nun ein JSON-Web-Token eingeführt. Jetzt logge dich kaum wieder mit seiner E-Mail und seinem Passwort ein. Jetzt hat unser Server angehalten, um die Entzündung zu überprüfen. Und wenn es stimmt, Server das verschlüsselte eindeutige Token zurück und speichert es im lokalen Speicher. Das Tolle an diesem Token ist, dass es mit Benutzerdetails und einem geheimen Schlüssel erstellt wird Benutzerdetails und einem geheimen Schlüssel , den wir auf dem Server definiert haben. Wenn also kaum eine Anfrage an die aktuellen Informationen gesendet wird, wird der Serverpost nach einem JWT-Token gefragt, überprüfen Sie es mit unserem geheimen Schlüssel. Wenn es verifiziert ist, dann und dann Service und diese Suchenden Informationen. Und wenn wir etwas an Benutzerinformationen ändern , ändert sich unser Token. Deshalb verwenden wir JWT, Benutzerauthentifizierung. Ich weiß, dass Sie viele Fragen zum JSON-Web-Token haben, aber schauen Sie sich dieses vollständige Tutorial an, es wird Ihre Zweifel ausräumen. In diesem Tutorial werde ich NodeJS als Backend und React JS für das Frontend verwenden . Sie können diesen aber trotzdem folgen , egal welche Programmiersprache Sie verwenden. 3. Mit Backend beginnen: Hier erstelle ich ein einfaches Projekt in Node.JS, in dem ich diesen Knotenserver mit meiner localhost MongoDB-Datenbank verbinde diesen Knotenserver mit meiner localhost MongoDB-Datenbank und diesen Server auf localhost zu tausend höre. Den Startercode können Sie übrigens auch herunterladen. Installieren wir zunächst alle Abhängigkeiten für dieses Projekt. Also öffne das Terminal und schreibe npm install. Lass es im Hintergrund laufen. Jetzt habe ich im Modellordner einen Modellbenutzer mit nur drei Pillen, Name, E-Mail und Passwort erstellt . Jetzt definiere ich im Route-Ordner alle Routen. Die Buslinie dient zur Benutzerregistrierung in dieser Datei users.js. Also hier erhalten wir zuerst alle Daten aus dem Anforderungspunktkörper und destrukturieren ihn. Dann suchen wir nach vorhandenen Benutzern. Und danach werden wir die Benutzerinformationen in der Datenbank und die Informationen des Sandy-Benutzers speichern Datenbank und die Informationen des Sandy-Benutzers da sie ziemlich einfache Route reagieren. Dann importiere ich in der Datei server.js diesen Benutzer aus und definiere dieses Routenpad als APIs weniger Benutzer. Also öffne zehn Minuten und schreibe Norman Server. Dadurch wird der Server auf Jane's kontinuierlich aktualisiert. Großartig, wir verbinden die Datenbank. Also lasst uns das mit Postman probieren. Jetzt passiere ich hier unsere Route und wähle Reihe und Jason aus. Jetzt übergebe ich hier Datenobjekt und klicke auf Senden und sehe, dass wir Benutzerdaten bekommen. Wenn B nun erneut auf die Schaltfläche Senden klickt, ist der Benutzer bereits vorhanden. Das ist also die kleine Einführung dafür, wer die Node-Pausenzeit nur zum Verständnis beobachtet. In ähnlicher Weise haben wir eine andere Route namens ungerade für die Anmeldung. Lassen Sie mich es Ihnen direkt in Postman zeigen. Also gebe ich die richtige E-Mail-Adresse und das richtige Passwort weiter. Dann klicken Sie auf Senden. Siehst du, wir bekommen den aktuellen Benutzer. Aber wenn wir ein falsches Passwort übergeben , erhalten wir einen Fehler. Jetzt gibt es drei Hauptaufgaben für JWT im Backend. Sah zu. Eine davon ist das Generieren von Token im Register. Zweitens: Generieren Sie ein Token bei der Anmeldung. Und zuletzt, wenn der Benutzer nach Sicherheitsinformationen fragt, müssen wir das Token überprüfen. Fangen wir mit Aufgabe Nummer eins an. 4. Generating für Registrierung und Anmeldung erstellen: Also öffne das Terminal und füge ein neues Terminal hinzu und schreibe npm I, JSON Web Token und drücke die Eingabetaste. Jetzt user out. Oben erkläre ich, dass JWT zwei erforderlichen und anständigen Web-Token entspricht . Nachdem wir nun Daten zur Registrierung gespeichert haben, begründen Sie den JWT-Token oder das JWT-Punktzeichen Das erste Argument sind nun unsere Daten, die wir mit diesem Token übergeben wollen . Also erstelle ich eine neue Variable namens JWT data, um ID user dot underscore id komma name, user.name zu unterstreichen. Übergeben Sie nun diese JWT-Daten hier. Jetzt ist der zweite Parameter unser geheimer JWT-Schlüssel. Also können wir hier jede Zeichenfolge wie Code bless you oder was auch immer weitergeben . Dieser geheime Schlüssel ist sehr wichtig für die Authentifizierung. In diesem Fall ist es nicht gesichert. Deshalb werden wir unseren geheimen Schlüssel hier in der Punkt-ENV-Datei deklarieren . JWT Secret entspricht etwas wie 123 Code Blast oder etwas, das nicht leicht zu erraten ist. Wenn Sie beispielsweise eine Zomato-App erstellen, ist der geheime Schlüssel so, als ob Zwicky der beste ist. Speichern Sie es jetzt und kehren Sie zu unserer Benutzerroute zurück. Bis hier fügen wir verarbeitete Punkt-ENV, JWT-Geheimnis hinzu. Mit diesem Prozess dot ENV können wir auf die Variable dieser ENV-Datei zugreifen. Wenn Sie das Token in einiger Zeit ablaufen lassen möchten, können wir das auch definieren. Also möchte ich dieses Token in Stunden ablaufen lassen. Wenn ein Benutzer dieses Token nach zwei Stunden kauft, meldet er sich erneut für ein neues Token an, oder? In object läuft in und in doppelten Anführungszeichen ab. Du kannst Zeit schreiben. Wenn Sie es an einem Tag exportieren möchten, bestehen Sie 1D. Aber ich verbringe hier zu nass oder zwei Stunden. Es ist optional, Ihnen dies erneut zu sagen. Speichern Sie dies nun in einer Variablen namens Token in der Antwort, senden Sie das Token, speichern Sie die Änderungen. Jetzt erstellen wir in Postmen einen neuen Benutzercode zum Lesen von gmail.com und klicken auf Senden. Siehst du, wir bekommen dieses verschlüsselte Token. Kopieren Sie nun dieses Token und den Header nach JWT.io. Dies ist die offizielle Seite von JWT. Sie können hier die Dokumentation lesen. Klicken Sie nun auf diesen Debugger. Ja, wir können unser Token entschlüsseln. Lassen Sie uns nun verstehen, was in diesem Token auf unserem Token basiert. Jetzt sind alle Tokens in drei Teile geteilt. Der erste Teil befasst sich mit dem Header, der in roter Farbe ist. Der zweite Teil befasst sich mit der Nutzlast, die in lila gehalten ist. Und der letzte und wichtigste Teil ist die Signatur, die in blauer Farbe ist. Jetzt enthält dieser Header den Algorithmus und den Token-Typ, was sehr verbreitet ist. Konzentrieren Sie sich nicht darauf. Jetzt enthält diese Nutzlast die Daten, die wir diesem Token übergeben möchten. In unserem Fall geben wir ID und Namen weiter. Sehen Sie, hier haben wir unsere Daten. So können wir diese Daten in unserem Frontend anzeigen, ohne dass eine neue API angefordert wird. Und wir haben mehr Daten, die für ausgegeben zu dem Zeitpunkt stehen , zu dem unser Token generiert wurde. Und EXP ist unsere Erkundungszeit. Nun der letzte Teil, die Signatur, die basierend auf unserem Header generiert wird, diese Nutzdaten und der geheime Schlüssel, die nur auf dem Server verfügbar sind. Dies verhindert also, dass Benutzer ihren eigenen Dogan erhalten und ihn dann mit einer ID ändern , um so zu tun, als wären sie jemand anderes. Denn wenn Sie irgendetwas an dieser Payload oder diesem Header ändern, wird es von der Signatur neu generiert. Es gibt keine Möglichkeit für Benutzer , etwas Unethisches zu tun. Deshalb ist JWT so beliebt. Deshalb haben wir erfolgreich unser JSON Web Token Board Register erstellt . Jetzt machen wir dasselbe für die Anmeldung. Also kopiere diese drei Zeilen und gehe zu ahd dot js file und füge sie hier ein. oben JWT gleich erneut, Deklarieren Sie oben JWT gleich erneut, um JSON Web Token zu benötigen, und speichern Sie es. Übergeben Sie jetzt beim Login die korrekten Daten und senden Sie sie. Wir kriegen ein Token. Wir haben unsere zweite Aufgabe oder unser Backend erfolgreich abgeschlossen. 5. Überprüfen von Token auf gesicherter Route: Jetzt die letzte Aufgabe, die Veranstaltungsorte sind oder eine gesicherte Route anfordern, was bedeutet, dass Daten nur für angemeldete Benutzer zugänglich sind. Dann müssen wir eine Pause machen, um das JSON-Web-Token zu überprüfen. Und wenn es gültig ist, geben wir Daten zurück. Also fügen wir in der Datei users.js eine neue API erhalten die aktuell angemeldeten Benutzerinformationen, die auf bra palpate angezeigt werden. Also der richtige Router bekommt Les Paul-Pfad und fügt eine Funktion mit der Anforderungsantwort hinzu. Jetzt müssen wir unsere Middleware erstellen, in der wir das Token auf jeder gesicherten Route überprüfen. Erstellen Sie also einen neuen Ordner namens Middleware. Und darin erstellen wir eine neue Datei namens ab.js. Großartig. Jetzt definieren wir hier zuerst die Funktion und fügen module.exports hinzu oder exportieren diese Funktion. Jetzt wissen Sie vielleicht, dass unsere Middleware-Funktion drei Parameter hat: Anfrage, Antwort und nächsten. Machen wir uns darüber keine Sorgen. Jetzt übergeben wir zuerst das Token, das Sie durch den Header passieren. Also fordere den Header an und übergebe hier den Header-Namen, ich übergebe x oder Token, was häufig verwendeter Name ist. Sie können alles übergeben, was Sie möchten , um dies in einer Token-Variablen zu speichern. Danach prüfen wir, ob der Token nicht verfügbar ist. Geben Sie dann den Antwortpunktstatus für 01, Dotson und Bass zurück, Zugriff verweigert. Dogan wurde nicht gefunden. Und wenn ein Token verfügbar ist, überprüfen wir es. Deklarieren Sie also oben JWT erneut, um ein JSON-Web-Token zu benötigen. Jetzt schreiben wir hier JWT dot verify. Jetzt ist der erste Parameter unser Token , den wir überprüfen möchten. Der zweite Parameter ist unser geheimer JWT-Schlüssel. Also richtig, verarbeiten Sie Punkt ENV, JWT Secret. Jetzt gibt uns das ID und den Namen, die wir früher übergeben haben. Speichern wir das also in der Variablen user, und wir übergeben diese Werte in Anfrage dot user gleich an user. Danach rufen wir die nächste Funktion auf. Es wird also die API ausgeführt. Wenn dieses Token gültig ist, gibt uns dieser Code einen Fehler. Sowjets versuchen, dafür einen Block zu fangen. Schieben Sie das jetzt in den Versuchsblock. In diesem Catch-Block schreiben wir jetzt den Antwort-Punktstatus, 400. Punkte senden ein ungültiges Token und speichern es. Jetzt zurück zur Route users.js. Und zuerst importieren wir ungerade. Schreiben Sie also const ungerade gleich zwei, erforderliche Middleware mit doppeltem Schrägstrich, weniger ungerade. Jetzt geben wir diese seltsame Middleware hier weiter. Wenn also jemand diese API aufgerufen hat, wird diese seltsame Middleware ausgeführt. Und wenn das Token verifiziert ist, dann und dann wird diese Funktion ausgeführt. Jetzt sofort IT-Benutzer Punkt nach ID und Passwort suchen dot user dot underscore ID, die wir im Herbst Middleware deklariert haben, und speichern Sie sie in einer Variablen namens profile. Dann Antwortpunkte und Profil. Hier fügen wir ein Gewicht hinzu. Deshalb müssen wir hier async schreiben, speichern. Testen wir nun diese private API. Also zurück zu Postman und füge neue Anfrage hinzu und übergebe hier http Doppelpunkt Doppelstrich lokalen Host, Doppelpunkt Python Slash API Slash Benutzer und klicke auf Senden. Sehen Sie, wir erhalten die Fehlermeldung access denied weil wir kein Token im Header übergeben haben. Gehen Sie also zum Header-Bereich. Und hier ist x ungerade Token, die wir in der Herbst-Middleware weitergeben. Und hier geben wir unsere Marke weiter. Also kopiere ich dieses Token aus dem Login, probiere es und füge es hier ein. Klicken Sie nun auf Senden und wir erhalten das Benutzerprofil. Wenn wir nun etwas an diesem Token ändern und es senden, erhalten wir ein ungültiges Token. Unser Backend-Teil ist also hier abgeschlossen. Minimieren Sie diesen Server über Score, da wir diesen Server weiter ausführen müssen. Jetzt werden wir sehen, wie man mit JWT in React umgeht. 6. Beginn der Frontend: Also hier habe ich den Client-Ordner in einem anderen VS-Code geöffnet. Zunächst werden wir alle Abhängigkeiten installieren. Also öffne und schreibe npm install und lass es im Hintergrund laufen. Lassen Sie mich Ihnen einen kurzen Überblick über diese React-Anwendung geben. In dieser App-Komponente erstelle ich jetzt eine Leiste, und in der Schnecke erstelle ich jetzt drei Links. Und für das Routing erstelle ich diese Routing-Komponente, in der ich alle Routen wie Home, Login und Register definiere , so einfach ist das. Lassen Sie uns diese Anwendung ausführen. Also öffne ein Terminal und schreibe npm start und drücke Enter C. Dies ist unsere Home-Komponente. Danach haben wir ein Anmeldeformular auf der Anmeldeseite. Wenn wir also E-Mail und Passwort schreiben und dann das Formular absenden, erhalten wir Werte in der Konsole. Ähnlich wie bei uns haben wir ein Anmeldeformular. Wir füllen das Formular aus und klicken auf die Schaltfläche Registrieren. Dann bekommen wir Werte in der Konsole, also weiter, JWT, wenn Sie einen Widerstand verwenden, senden wir Token vom Backend, oder? Danach speichern wir dieses Token im lokalen Speicher des Browsers und übergeben dieses Token, wenn wir eine sichere API-Anfrage stellen. In unserem Beispiel unsere Profil-API. Ähnlich wie beim Backend haben wir drei Aufgaben für das Frontend. Das erste ist, dass wir Token auf dem Widerstand speichern. Zweitens speichern wir Token bei der Anmeldung. Und zuletzt sagten wir Token zu unserem Header. So können wir eine sichere API-Anfrage stellen. 7. Token auf Registrieren und Anmelden: Also öffne das Terminal und füge neues Terminal hinzu und schreibe npm I SEOs und drücke die Eingabetaste. Wenn Sie keine SCOs kennen, injizieren Sie mein XES-Guide-Video. Jetzt erstelle ich einen neuen Ordner namens utils for utilities und erstelle eine neue Datei mit dem Namen STDP ab.js. Jetzt in dieser Datei importiere ich zunächst von Nullen. Und danach erstelle ich eine Variable namens instance equals zu XES dot create. Übergeben Sie nun das Objekt und schreiben Sie die Basis-URL neu. Hier. Wir können unsere Backend-Basis-URL übergeben, die http-Doppelpunkt-Doppelstrich lokaler Host-Doppelpunkt um tausend weniger API ist . Und am Ende die Standardinstanz exportieren. Also erstellen wir im Grunde eine Verknüpfung für API-Anfragen. Wir müssen also nicht jedes Mal die vollständige URL schreiben. Wenn wir eine Anfrage stellen oder localhost Doppelpunkt pi tausend Schrägstrich API Slash Benutzer, dann müssen wir nur Slash-Benutzer schreiben. Gehen Sie nun zum Komponentenordner register und öffnen Sie diese register dot js-Datei. Das ist also ein Anmeldeformular. In der Submit-Funktion rufen wir jetzt unsere Register-API auf. An der Spitze, zuerst STDP importieren, gehen wir zu den Inhabern und fügen Details als BIP hinzu. Jetzt entferne ich diese Konsole genau hier, http dot post. Jetzt ist der erste Parameter der Pfad unserer API, die weniger Benutzer ist. Und der zweite Parameter sind Benutzerdetails. Jetzt gibt diese Aussage ein Versprechen zurück. Lassen Sie uns das mit async await behandeln. Ich schreibe hier von acht, und hier passieren wir AC. Speichern wir diesen Wert nun in einer Variablen namens response. Und trösten Sie diese Antwort, speichern Sie die Änderungen und werfen Sie einen Blick darauf, gehen Sie zu Widerständen und fügen Sie die Daten ein und füllen Sie sie mit eindeutigen E-Mails. Und klicken Sie auf Registrieren. Sehen Sie, wir bekommen dieses Response-Objekt. In diesen Daten erhalten wir also unser Token. Lassen Sie uns diese Reaktion ablenken und diese Dateneigenschaft abrufen. Lassen Sie uns jetzt unser Token in unserem lokalen Speicher erstellen. Unser Browser hat also einen eigenen kleinen Speicher. Also schreiben wir lokalen Speicher, Punkt-Set-Artikel. Jetzt ist die Post-Variable der Name dieses Feldes, das Token ist. Und zweitens übergeben wir Daten, die ein echtes Token sind. Und danach werden wir den Benutzer auf die Homepage verschieben. Zur Schifffahrt. Wir verwenden React-Router dom. Ganz oben. Ich benutze wichtig navigiere vom React-Router dom, ende genau hier. Lassen Sie navigiere gleich navigieren verwenden. Und danach schreiben wir navigate. Und darin gehen wir unseren Weg , der weniger Verkaufsteilnehmer ist, und werfen einen Blick darauf. Übergeben Sie nun eine andere E-Mail und klicken Sie auf Registrieren. Sehen Sie, wir leiten zur Homepage um. Lassen Sie mich Ihnen zeigen, wo wir unsere Wertmarke aufbewahren. Gehen Sie also hier zum Anwendungsfenster. Klicken Sie nun auf lokale Geschichten und wählen Sie Ihre Web-URL aus. Siehst du, unser Token wurde hier wiederhergestellt. Nun zurück zu Registern und Palm und kauft dieselben Daten und klicken Sie auf Registrieren. In der Konsole erhalten wir einen Fehler. Also zurück zu unserer React-Anwendung. Und wir fügen try-catch-Block für die Behandlung dieser Fehlermodus-Discord in diesen try-block, engage block, ein. Wir werden diese Ära einfach trösten, die Änderungen speichern und einen Blick darauf werfen. Klicken Sie auf die Schaltfläche Registrieren. Siehst du, wir bekommen das Adder-Objekt. In dieser Fehlerantwort erhalten wir nun unsere Daten, die wir vom Back-End-Benutzer senden, bereits vorhanden. Also schreiben wir hier, ob Adder Dot Response verfügbar ist und fügen dann dot response.status gleich 400 hinzu . Dann setze error, adder dot response.data, was unsere Zustandsvariable ist. Weil wir keinen anderen Adder zeigen wollen , den wir nicht aus dem Backend senden. Und ganz unten füge ich bereits die Bedingung hinzu, nämlich wenn ein Adder verfügbar ist, dann drucke diesen Fehler aus, ändere ihn und sieh es mir an. Jetzt klicke ich auf diesen Registrieren-Button und wir bekommen diese Ära jetzt ähnlich wie unsere Login-Seite. Also kopiere ich diesen Versuch und Catch-Block und öffne die Login-Punkt-JS-Seite. Und fügen Sie es in der Handle Submit-Funktion ein. Kopieren Sie dies nun in Importe und fügen Sie es in die Login-Komponente ein. Kopieren Sie nun diese letzte Navigationszeile und fügen Sie sie ein. Also jetzt ändern wir hier den Pfad von user, do odd und kaufen diese Formulardaten, die auch Benutzerdetails sind. Die Teilnehmer, und werfen Sie einen Blick darauf. Füllen Sie nun dieses Formular mit den falschen Informationen aus und sehen Sie, dass wir unseren Adder jetzt über die richtigen Informationen hinaus erhalten. Und eine wirklich direkte Home-Komponente. Sie können auch die im lokalen Speicher gespeicherten Token überprüfen. 8. So erhältst du Benutzerinformationen aus Token: Jetzt möchte ich diesen Anmelde- und Registrierungslink nicht mehr anzeigen , wenn ein Benutzer bereits eingeloggt ist. Zurück zu Add Component erstellen wir eine Zustandsvariable namens user und den Anfangswert auf null. Und ganz oben hat der Import es von React verwendet. Die Logik ist nun, wenn das Datum dieser Benutzer null ist, was bedeutet, dass der Benutzer nicht angemeldet ist. Der Benutzer ist verfügbar, dann ist der Benutzer angemeldet. Die Frage ist, wie wir die aktuellen Benutzerdaten erhalten können. Denken Sie daran, dass wir unsere Benutzerdaten an unseren JWT-Nutzlastbereich weitergeben . Also verwenden wir diese Daten hier für die Authentifizierung. Jetzt fügen wir hier die Bedingung hinzu. Wenn wir im lokalen Speicher ein Token haben, dann bekommen wir Daten vom Token, oder? Wenn ein lokaler Speicherpunkt-Token verfügbar ist, ändern Sie den Benutzerstatus. Nun, wie wir unser Token dekodieren und diese Daten abrufen können , sodass wir eine Bibliothek namens JWT-Decodierung haben. Also öffne das Terminal und schreibe npm I JWT dash d Code und drücke Enter und schließe dieses Terminal. Jetzt importieren wir hier JWT-Decodierung von JWT-Dekor. Jetzt in dieser IV erhalten wir das erste Token aus dem lokalen Speicher, Punkt get item und token. Und jetzt verwenden wir JWT-Dekor. Und darin übergeben wir dieses JWT-Token. Speichern Sie dies nun im variablen Protokollbenutzer und setzen Sie user auf log user. Lassen Sie uns nun diese Benutzerstatusvariable trösten. Speichern Sie die Änderungen und werfen Sie einen Blick darauf und wir erhalten einen Fehler, der auf die Endlosschleife zurückzuführen ist. Lass mich dir das hier erklären. Zuerst suchen wir nach Token und wir sagten Benutzerdaten zu dieser Benutzervariablen, die eine endliche Schleife erzeugt. Wir müssen diesen Code also außerhalb dieser App-Komponente verschieben . Entfernen Sie nun diese eingestellte Benutzerfunktion und leiten Sie diesen Protokollbenutzerwert als Anfangswert an. , Definieren Sie nun vor dieser if-Bedingung diese Log-Benutzervariable neu denn wenn das Token nicht verfügbar ist, können wir nicht auf dieses Protokoll zugreifen und diese Konstante ebenfalls entfernen. Speichern Sie jetzt die Änderungen und werfen Sie einen Blick darauf. Sehen Sie, wir erhalten unsere Benutzerdetails. Mit dieser Benutzervariablen werden wir jetzt private Links und Height Days Login - und Registrierungslink anzeigen . Also vorbei an diesem Benutzer als Eingabeaufforderungen in dieser Navbar-Komponente. Jetzt nach Komponente, 3D-Struktur-Requisiten und Benutzervariable abrufen. Jetzt haben wir diese beiden Nav-Links mit Bedingung gepackt, das heißt, wenn der Benutzer nicht verfügbar ist, dann also diese Links. Jetzt müssen wir hier vorbeikommen, schwanger reagieren. Und danach, wenn ein Benutzer verfügbar ist, zeigen wir zwei weitere Links an, Profil und Abmelden. Also dupliziere ich diesen Block und Janes Zustand und poste den Link pro Profil. Und zweitens für Änderungen beim Abmelden und einen Blick darauf werfen. Sehen Sie, wir bekommen unser Profil und unsere Abmeldelinks. Gehen Sie nun zum Anwendungsfenster wählen Sie dieses Token aus und entfernen Sie es. Welcher Zweck der Verkostung Aktualisieren Sie jetzt die Seite. Wir erhalten Anmelde- und Registrierungslinks. 9. Beheben des Fehler aktualisieren: Im Moment denken Sie, dass unsere Anwendung gut läuft, aber wir haben hier einen Fehler. Lass es mich dir zeigen. Öffnen Sie also das Anmeldeformular und die richtige E-Mail-Adresse und das richtige Passwort. Klicken Sie nun auf diesen Login-Button. Um nun den lokalen Speicher C zu drücken, erhalten wir unseren Token. Diese Links sind jedoch immer noch sichtbar. Denn in der App-Komponente wird diese if-Bedingung nur einmal ausgeführt. Wenn wir die Seite also manuell aktualisieren, erhalten wir andere Links. Nach dem Login müssen wir die Seite also automatisch aktualisieren. Es ist sehr einfach. Also zurück zu unserer Login-Komponente. Und die Stimmung ist, hier eine Anzeige zu navigieren, Fenster Punkt Position entspricht. Entfernen Sie nun diese gebrauchte Navigation. Und entfernen Sie auch von wichtig, speichern Sie dies und kopieren Sie diese window.location und fügen Sie sie in die Registerkomponente ein. Ein Modus wird verwendet. Navigieren Sie und entfernen Sie auch, speichern Sie die Änderungen und werfen Sie einen Blick darauf. Jetzt nochmal, Remote-Token und aktualisiere die Seite. Filtern Sie jetzt E-Mail und Passwort. Klicken Sie anschließend auf Anmelden. Wir bekommen unsere Links ohne manuelle Aktualisierung. Perfekt. 10. Implementierung der Logout: Erstellen wir nun Komponenten. Was diese beiden Seiten im Komponentenordner sind. Ich erstelle einen neuen Ordner namens profile, und darin erstelle ich eine neue Datei, profile dot js. Schreiben Sie jetzt AFC, React Boilerplate, und ich übergebe hier H1. Dies ist eine Profilkomponente. Speichere es. Und lassen Sie uns einen neuen Ordner namens logout erstellen. Und darin erstellen Sie eine neue Datei, logout dot js. Schreiben Sie erneut unser AFC-Boilerplate und speichern Sie dieses. Gehen Sie nun zur Routing-Punkt-JS-Datei. Hier definieren wir unsere Routen. Duplizieren Sie also diese beiden Linien und Gene , aber um Profile und Elemente auch zu profilieren. Und für die zweite Route ändern wir uns schlecht, um uns abzumelden. Ein Element loggt auch die Änderungen ab und wirft einen Blick darauf. Siehst du, wir bekommen unsere Routen. Schließen wir nun zunächst die Abmeldefunktion ab. Also öffne logout dot js Datei. Logout entfernt also im Grunde genommen das Token aus dem lokalen Speicher. Das war's. Also habe ich use effect von React importiert. Und hier erstelle ich, benutze die back-Pfeil-Funktion und leere Array, weil wir das nur einmal ausführen wollen. Jetzt innerhalb dieses mit lokalem Speicher, Punkt entfernen Artikel, Token. Und danach werden wir zur Heimatbasis umleiten. Also richtig, die Position des Fensterpunkts entspricht 2s. Speichern wir es und schauen uns das an. Klicken Sie nun auf Logout und sehen Sie, dass wir uns erfolgreich abgemeldet haben. Jetzt melden wir uns erneut an. Und sieh mal, es funktioniert gut. 11. Gesicherte API mit Token erstellen: Jetzt möchten wir auf dieser Profilseite Benutzerinformationen anzeigen , die wir haben GET request user. Öffnen wir die Profil-Punkt-JS-Datei. Und zuerst importieren wir den Use-Effekt. Und danach importieren wir STDP von Vigo in Fullers up utils weniger STDP. Jetzt deklarieren wir in der Komponente eine Funktion namens get user profile, arrow function. Und darin haben wir Daten gepatcht, oder? Http Punkt bekommt Slash-Benutzer. Jetzt fügen wir ein Gewicht hinzu. Und dafür müssen wir ein C. Great hinzufügen . Speichern wir dies nun in einer Variablen namens response und sehen uns die Antwort an. Erstellen wir nun ein Benutzerobjekt. Und darin nennen wir diese Funktion. Speichern Sie die Änderungen und die Farbe. Gehen Sie zur Profilseite und sehen Sie, dass wir einen Fehler erhalten , der aufgrund unserer seltsamen Middleware, die im Backend deklariert wurde, nicht autorisiert ist . Nur der Benutzer kann auf diese Informationen zugreifen , der das Token in der Kopfzeile sendet. Also lasst uns dieses Problem lösen. Dafür erstellen wir in Ihren Tales eine neue Datei namens set oder token dot js. Erstellen Sie jetzt eine Funktion namens set oder token. Und Bars hier, Token. Jetzt schreiben wir, ob Dogan verfügbar ist, dann übergeben wir dieses Token im Header, indem wir x verwenden. So wichtig aus unserem STDP-Stapel, dies ein sehr wichtiger Schritt ist. Gleich hier. X entspricht den Standardwerten Punkt Header Punkt gemeinsam. In eckiger Klammer. Wir übergeben unseren Header-Namen, der x ist , oder Token, den wir in unserem Backend setzen, entspricht Token. Lesen, schreiben, löschen und dann kopieren und fügen Sie diesen Befehl ein. Und lassen Sie uns Standard, Set oder Token exportieren. Nennen wir nun diese Funktion App-Komponente. Bisher wichtigster Satz oder Token von Utils, weniger gesetztes Oktagon. Jetzt, nachdem wir dieses Token in JWT-Token gespeichert und unser Token übergeben haben, das JWT ist. Speichern Sie die Änderungen und aktualisieren Sie die Profilseite. Sehen Sie, wir bekommen Profildaten. So können Sie also Token im Header übergeben. Jetzt müssen Sie nicht mehr für alle Anfragen einen Header schreiben. Dieses Set oder dieser Token erledigt das für Sie. 12. Erstellen einer privaten Route: Lassen Sie uns diese Anwendung jetzt weiter vorantreiben. Weil ich hier einen Bug gefunden habe. Also melden wir uns ab und fügen in der URL ein Schrägstrich-Profil hinzu und drücken die Eingabetaste. Sehen. Hier erhalten wir die Profilkomponente, auf die nur authentifizierte Benutzer zugreifen können. Sie können zwar aufgrund unserer Sicherheits-API Daten abrufen , aber das ist keine gute Vorgehensweise. Also wenn Benutzer ohne Login, tue ich das, ich gebe in den Bereich ein. Wir leiten den Benutzer zur Anmeldeseite weiter. Erstellen wir also eine neue Datei im zweifelnden Ordner namens private Route. Jetzt richtig, RFC Quad Boilerplate und hier neu geschrieben. Wenn der Benutzer verfügbar ist, ventraler Auslass , der uns hilft, eine untergeordnete Komponente anzuzeigen. zeige ich dir in nur einer Sekunde. Wenn der Benutzer nicht verfügbar ist, navigieren Sie zu Slash-Anmeldung. Stellen Sie sicher, dass Sie Outlet importieren und vom React-Routerdom navigieren Wir bekommen Benutzer von Requisiten. Also zurück zur App-Komponente. Und in dieser Routing-Komponente übergeben wir user equals an user. Und beim Routing von Komponenten, 3D-Struktur Benutzer. In der React-Router-Version sechs können wir jetzt sehr einfach private Routen definieren. Diese private Route ist nichts anderes als eine Funktion , die Benutzer umleitet , wenn sie sich nicht angemeldet haben. Also richtige Route und passiere den Pfad nicht direkt und passe hier private Route-Komponente mit Benutzer gleich dem Benutzer und der nächsten Route. Jetzt, zwischen dieser Route, können wir alle unsere privaten Routen passieren. Verschieben wir also dieses Profil und melden uns ab. Das bedeutet im Grunde, dass immer dann, wenn jemand versucht, eine dieser Routen zu routen, diese private Route-Funktion einen Post ausführt, die Änderungen speichert und einen Blick darauf wirft. Sehen Sie, wir gehen direkt zur Anmeldeseite. 13. Die kleinen Fehler korrigieren: Loggen Sie sich nun mit Ihren Informationen in den URL-Typen less login ein und drücken Sie die Eingabetaste Siehst du, wir bekommen dieses Login-Formular. Also lass uns das ganz schnell beheben. Hier. Wer kauft diese Benutzeranmeldekomponente? Öffnen Sie nun diese Login-Komponente und Destruktor props user. Danach schreiben wir hier use effect und error function mit einem leeren Array. Und darin prüfen wir, ob der Benutzer verfügbar ist. Dann schicken wir dem Benutzer einen Schritt zurück. Lassen Sie uns den Benutzer aus React importieren und die Navigation von React, Router dom, verwenden. Und nachdem Sie angegeben haben, fügen wir Lead Navigate Equals hinzu, um navigate zu verwenden. Jetzt genau hier, navigiere und passe minus eins, was einen Schritt zurück bedeutet. Es funktioniert wie die Zurück-Schaltfläche im Browser. Wenn wir minus zwei schreiben, geht es zwei Schritte zurück. Speichern Sie das und sehen Sie sich das an. Jetzt tippe hier, es ist weniger Login und Enter. Sehen Sie, wir leiten auf die Homepage um. Kopieren wir dies nun aus der Login-Punkt-JS-Datei und fügen es in die Registerkomponente ein. Kopieren Sie nun erneut diese Eingabezeilen und fügen Sie sie oben ein. Kehren Sie nun zur Routing-Komponente zurück und übergeben Sie user equals an user. Während diese dritte Komponente und Registerkomponente, 3D-Struktur Benutzer in, die Änderungen fallen lässt und einen Blick darauf wirft. Sehen Sie, als wir versucht haben, auf die Registrierungsseite zu klicken, leiten wir einen Schritt zurück. Herzlichen Glückwunsch, Sie haben erfolgreich eine Benutzerauthentifizierung mit JWT erstellt , der am häufigsten verwendeten Methode zur Authentifizierung von Benutzeranwendungen. Ich hoffe du lernst viel aus diesem Tutorial. Wenn Sie Zweifel haben, fragen Sie mich im Kommentarbereich. Wir sehen uns im nächsten Video. Hab einen schönen Tag.