‫Sprecher: Willkommen zurück.
‫In diesem Video lernen Sie eine supersichere Methode zum
‫Abmelden von Benutzern kennen.
‫Wenn wir einen Benutzer bis zu diesem Zeitpunkt löschen wollten, haben
‫wir das Cookie einfach aus unserem Browser gelöscht.
‫Rechts?
‫Also so etwas wie dieses,
‫und dann entfernen.
‫Die Sache ist jedoch, dass wir dieses
‫Cookie als reines http-Cookie erstellt haben.
‫Denken Sie
‫daran, und das bedeutet, dass wir dieses Cookie in
‫unserem Browser in keiner Weise manipulieren können.
‫Wir können es also
‫nicht ändern, und wir können es auch nicht löschen.
‫Schauen wir uns also kurz die Stelle im Code an, an der wir
‫das gemacht haben.
‫Also im Authentifizierungscontroller
‫dort oben, wo wir tatsächlich dieses Cookie erstellen,
‫damit es genau hier ist.
‫Denken Sie auch daran, dass wir das
‫Cookie im Browser in keiner Weise manipulieren können.
‫Nicht einmal zerstören.
‫Also löschen.
‫Wenn wir also weiterhin diese supersichere Methode zum Speichern
‫von Cookies verwenden möchten,
‫wie können wir dann Benutzer auf unserer Website
‫tatsächlich abmelden?
‫Denn normalerweise löschen wir bei der JWT-Authentifizierung nur
‫das Cookie oder
‫den Token aus dem lokalen Speicher.
‫Aber auch das ist bei dieser Verwendung nicht möglich.
‫Was wir stattdessen tun werden, ist, eine
‫sehr einfache Abmelderoute zu erstellen, die einfach ein neues
‫Cookie mit genau demselben Namen, aber
‫ohne das Token zurücksendet.
‫Damit wird dann das aktuelle Cookie, das
‫wir im Browser haben, mit einem mit demselben Namen,
‫aber ohne Token überschrieben.
‫Wenn dieses Cookie dann zusammen mit
‫der nächsten Anfrage gesendet wird, können wir den
‫Benutzer nicht als eingeloggt identifizieren.
‫Und so wird dieser dann effektiv den Benutzer abmelden.
‫Und wir würden diesem
‫Cookie auch eine sehr kurze Ablaufzeit geben.
‫Dies ist also ein bisschen so, als
‫würde man
‫das Cookie löschen, aber mit einem sehr cleveren Workaround wie diesem, okay?
‫Also lass uns das hier machen, gleich nach dem Einloggen.
‫Wenn wir also eine tokenbasierte Authentifizierung durchführen, brauchen wir
‫normalerweise nie einen solchen Endpunkt, aber
‫wenn wir ein supersicheres Cookie senden möchten, wie wir es gut machen, müssen
‫wir es so machen.
‫Also setzen wir bei der Antwort das Cookie wieder, und das Geheimnis
‫besteht darin, ihm genau denselben Namen zu geben.
‫Also genau wie ich
‫bereits erwähnt habe, und das ist jwt.
‫Also genau wie hier, okay?
‫Aber hier senden wir dann den
‫Token, aber jetzt senden wir einfach einen Dummy-Text.
‫Sagen wir, abgemeldet und
‫dann die Cookie-Optionen.
‫Also ein Ablaufdatum, wie in
‫10 Sekunden ab jetzt.
‫Erstellen wir also ein neues Datum
‫basierend
‫auf dem Datum. jetzt
‫plus 10 Sekunden.
‫Das sind also 10 mal 1000.
‫Und ich werde es auch wieder auf http only setzen.
‫Auf "true" setzen,
‫aber wir müssen es nicht als sicher festlegen,
‫da in diesem Fall keine sensiblen Daten
‫vorhanden sind, die jeder abrufen kann.
‫Hier fehlt das Komma,
‫also müssen wir jetzt nur noch diese Antwort zurücksenden.
‫Also Status 200 und lasst es uns
‫hier einfach als Erfolg markieren.
‫Dann müssen wir es natürlich auch in unserer Route hinzufügen, damit
‫das bei der Benutzerroute ist,
‫also lass es uns gleich hier nach
‫dem Einloggen machen, aber dieses wird eigentlich eine Get-Anfrage
‫sein, weil wir keine Daten
‫senden werden zusammen
‫mit der Aufforderung, nichts
‫zu ändern, bekommen wir eigentlich nur ein Cookie.
‫Und so macht dieser Name tatsächlich Sinn.
‫Oder dieses Verb macht tatsächlich Sinn.
‫Also loggen Sie
‫sich aus, und jetzt können wir diesen Weg tatsächlich einschlagen, genau wie wir
‫es hier mit unserer Axios-Bibliothek getan haben.
‫Also exportieren, ausloggen oder
‫eigentlich const zuerst
‫und so wie
‫vorher verwenden wir einen
‫try-catch-Block, der in diesem
‫Fall nicht so wichtig ist, da beim
‫Ausloggen nicht wirklich ein Fehler auftreten kann,
‫oder?
‫Aber trotzdem, nur für den Fall, dass wir
‫zum Beispiel keine Internetverbindung haben.
‫In diesem Fall erhalten wir dann einen schönen Fehler und lassen
‫uns das hier zuerst tun.
‫Also Fehler beim
‫Abmelden anzeigen,
‫versuchen Sie es erneut.
‫Okay, aber das hier sollte, wie gesagt,
‫nicht so oft vorkommen.
‫Lassen Sie uns
‫stattdessen
‫unsere Anfrage mit Axios erledigen.
‫Gut.
‫Und so ist die Methode dieses
‫Mal get und
‫die URL ist ähnlich wie
‫hier, aber es
‫ist Abmelden.
‫Und dann laden wir als nächsten Schritt auch die Seite neu.
‫Das machen wir also immer
‫manuell, wenn wir ein Cookie löschen, oder?
‫Und hier müssen wir es natürlich programmatisch tun.
‫Rechts?
‫Und wir müssen es
‫hier tun, denn da dies eine Ajax-Anfrage ist, können wir dies nicht auf
‫der Backend-Seite tun.
‫Wir können es also nicht mit Express machen.
‫Und deshalb müssen wir es hier natürlich manuell tun.
‫Rechts?
‫Andernfalls wären wir technisch abgemeldet, aber unser Benutzermenü würde
‫immer noch widerspiegeln, sodass es immer noch
‫anzeigen würde, dass wir angemeldet sind.
‫Und so müssen wir natürlich nur die Seite neu laden,
‫die dann im Grunde das ungültige Cookie an
‫den Server
‫senden würde, so dass eines, das wir gerade ohne
‫Token erhalten haben und dann sind
‫wir nicht mehr eingeloggt, und daher wird dann unser Benutzermenü verschwinden, ja?
‫Also machen wir das, wenn es einen Erfolg gab.
‫Also, wie zuvor, ruhen Sie sich aus. Daten. Status.
‫Und so senden wir in diesem Endpunkt auch den auf
‫Erfolg gesetzten Status zurück
‫und können das hier noch einmal testen.
‫Und wenn dies der
‫Fall ist, brauchen wir dies eigentlich nicht
‫einmal, also in diesem Fall Witwenstandort. neu laden.
‫Und dann ist etwas wirklich
‫Wichtiges, dass wir es hier tatsächlich auf
‫"true" setzen müssen, und das erzwingt dann ein
‫Neuladen vom Server und nicht vom Browser-Cache, in Ordnung?
‫Jetzt und natürlich müssen wir es hier als
‫asynchron markieren, und okay.
‫Dieser Teil hier ist also noch einmal sehr
‫wichtig, da er sonst möglicherweise einfach dieselbe Seite
‫aus dem
‫Cache lädt, die dann noch unser Benutzermenü dort oben hätte.
‫Aber das ist natürlich nicht das,
‫was wir wollen, wir wollen wirklich, dass eine neue Seite vom Server kommt.
‫Gut?
‫Wir haben also unsere Logout-Funktion und
‫jetzt im Index müssen wir sie im Grunde jetzt auslösen, sobald
‫wir diese Schaltfläche drücken.
‫Lassen Sie uns hier zuerst ein Element erstellen.
‫Also das Dokument
‫mit der Schaltfläche zum Abmelden. querySelector und erinnern
‫Sie sich daran, wie wir dieses Element erstellt haben.
‫Das ist also hier.
‫Also dieser.
‫Also selektieren wir jetzt nach dieser Klasse.
‫Okay, und wir könnten hier natürlich auch einen Ausweis gebrauchen,
‫aber das ist nicht wirklich wichtig, okay?
‫Was hier wichtig ist, ist jetzt zu
‫sagen, wenn es
‫einen Abmelde-Button gibt, dann logOutButton. addEventListener.
‫Wir möchten also, dass es bei jedem
‫Klick auf alle Ereignisse hört, die auf dieser Schaltfläche stattfinden.
‫Wir warten also auf das
‫Click-Ereignis und rufen dann die Log-Out-Funktion auf, die wir
‫noch nicht importiert haben, also fügen
‫wir das hier hinzu.
‫Also einloggen und ausloggen.
‫Alles klar, und das sollte es eigentlich sein.
‫Also, lass es uns jetzt testen.
‫Laden Sie es zur Sicherheit noch einmal
‫neu, und jetzt
‫bekommen wir einen Fehler beim Abmelden.
‫Versuchen Sie es erneut, warum ist das so.
‫Nun, versuchen wir, den Fehler besser zu untersuchen.
‫Wichtig ist aber, dass das alles eigentlich
‫schon funktioniert.
‫Dieser Event-Listener hier
‫und auch diese Logout-Funktion machen also ihre Arbeit.
‫Also lass
‫uns einfach trösten. Protokollfehler. Antwort.
‫Also lass uns das hier neu laden.
‫Sollte irgendwie automatisch passieren.
‫Gut.
‫Versuchen Sie es also noch einmal.
‫Also, was hier passiert,
‫so dass das Umwandeln in die Objekt-ID beim Abmelden des Werts fehlgeschlagen ist.
‫Das ist also sehr seltsam.
‫Sehen Sie sich diese Route an.
‫Oh, das
‫ist natürlich ein schwerwiegender Fehler.
‫Sollte sich natürlich einloggen.
‫Okay, aber diese Art kommt natürlich immer wieder vor.
‫Also lass uns das hier neu laden.
‫Und versuchen Sie es noch einmal.
‫Und jetzt bekommen wir hier etwas.
‫Jetzt ist es still und
‫ein Fehler, aber das ist überhaupt kein Problem.
‫Wir haben also einen
‫JSON-Webtoken-Fehler, weil unser JSON-Webtoken fehlerhaft ist.
‫Und so kommt es, wie
‫Sie sehen können, von der eingeloggten Middleware.
‫Und so können wir irgendwie erraten, warum das so ist, oder?
‫Gehen wir also zurück und fügen unseren Authentifizierungscontroller hinzu.
‫Und das JSON-Webtoken, das wir
‫jetzt im Grunde senden, ist das hier, oder?
‫Das hat sich also abgemeldet.
‫Und dann hier
‫im isLoggedIn, das dann im Grunde einen Fehler auslöst.
‫Also hier in der JSON-Webtoken-Verifizierung, oder?
‫Und da diese gesamte Funktion hier
‫in dieses catchASync eingeschlossen ist, wird dieser Fehler an die
‫gesamte globale Fehlerbehandlungs-Middleware gesendet.
‫Und das wird dann diesen Fehler erzeugen, den wir in diesem
‫Fall nicht wollen, erinnerst du dich?
‫In dieser
‫isLoggedIn-Middleware möchten wir also keine Fehler verursachen.
‫Lassen Sie uns das
‫also tatsächlich beheben und entfernen Sie dieses
‫catchASync von hier, da wir keine Async-Fehler abfangen möchten.
‫Stattdessen möchten wir sie grundsätzlich lokal
‫abfangen und dann,
‫wenn ein Fehler auftritt, einfach weiter sagen.
‫So, okay?
‫Also machen wir das.
‫Also packen Sie all dies in einen Versuch ein.
‫Schließen Sie es hier.
‫Nun, etwas anderes stimmt nicht.
‫Ah! Wahrscheinlich fehlt uns nur der Fangblock.
‫Und so wollen wir in diesem Fall zur nächsten Middleware übergehen.
‫Also im Grunde sagen, dass es keinen angemeldeten Benutzer gibt.
‫Rechts?
‫Also, testen wir es noch einmal.
‫Geh zurück, oh , und jetzt sind wir nicht mehr eingeloggt.
‫Also melde dich an.
‫Das war erfolgreich.
‫Und jetzt gleich abmelden.
‫Ah! Wunderschönen! Jetzt funktioniert es richtig.
‫Diesmal ist die Verifizierung hier
‫natürlich fehlgeschlagen, weil das
‫JSON-Webtoken nicht das von diesem Algorithmus erwartete
‫Format hatte.
‫Aber was in diesem Fall passiert ist, ist,
‫dass der Fehler nicht mit unserer
‫catchASync-Funktion abgefangen wurde, sondern er ging dann direkt zum
‫Catch-Fehler, der dann direkt zur nächsten Middleware ging.
‫Alles klar, großartig!
‫Wenn wir uns jetzt also unsere Cookies
‫ansehen, haben wir einen im Einsatz, der wahrscheinlich schon abgelaufen ist.
‫Sie sehen also, es hat nur diese Lebensdauer von 10 Sekunden und wenn ich
‫diese Seite jetzt neu lade, dann sollte sie
‫eigentlich schon weg sein.
‫Sie sehen also, dass keine Cookies verwendet werden.
‫Okay, und das ist eigentlich alles, was
‫wir tun müssen, um den Benutzer von unserer Website abzumelden.