‫Dies ist Teil zwei des Aufbaus unserer Login-Funktionalität.
‫Das erste, was ich in
‫diesem Video tun möchte, ist, diesen Teil der Seite bedingt zu rendern.
‫Es bedeutet also, diese Anmelde-
‫und Anmeldeschaltflächen hier darzustellen, falls
‫der Benutzer nicht angemeldet ist
‫und falls der Benutzer tatsächlich gut
‫angemeldet ist, dann hier eine Art Benutzermenü und auch
‫eine Abmeldeschaltfläche darstellen.
‫Diese Art von Rendering
‫sollte natürlich im Backend erfolgen, also in einem unserer Mops-Templates.
‫Wie erkennt unsere Vorlage nun, ob der
‫Benutzer eingeloggt ist oder nicht?
‫Um festzustellen, ob wir
‫eine neue Middleware-Funktion erstellen müssen, besteht
‫das einzige Ziel dieser neuen Middleware-Funktion darin,
‫ob der Benutzer derzeit angemeldet ist oder nicht.
‫Sie könnten denken, dass unsere Protect-Middleware auch
‫etwas Ähnliches macht, und tatsächlich ist es ähnlich.
‫Aber der Unterschied ist,
‫dass man nur für geschützte Stäbe funktioniert, also macht das Sinn, oder?
‫Aber unsere neue Middleware-Funktion wird
‫für jede einzelne Anfrage auf unserer gerenderten Website ausgeführt.
‫Lassen Sie uns das jetzt hier
‫in unserem authController in die Praxis umsetzen, und da
‫es der Protect-Route oder eigentlich Middleware sehr ähnlich
‫ist, werde ich diese hier kopieren und dann
‫nur einige Änderungen vornehmen.
‫Also kopieren wir es und fügen es hier
‫ein und dieses wird isLoggedIn heißen.
‫Diese Middleware ist wirklich nur für gerenderte Seiten gedacht, daher
‫besteht das Ziel hier nicht darin, eine Route zu schützen,
‫damit in dieser Middleware nie ein Fehler auftritt.
‫Schreiben wir das hier
‫eigentlich nur für gerenderte Seiten, und es wird keine Fehler geben.
‫Unser Token sollte aus den Cookies stammen
‫und nicht aus einem
‫Autorisierungs-Header, da wir bei gerenderten
‫Seiten natürlich keinen Token im Header haben.
‫Auch hier wird für unsere gesamte gerenderte Website
‫das Token immer nur mit
‫dem Cookie gesendet und niemals mit dem Autorisierungs-Header.
‫Das ist nur für die API.
‫Und eigentlich muss es nicht so komplex sein, wir können einfach
‫sagen, dass wir den gesamten Code ausführen
‫sollen, den wir hier haben, wenn ein Token vorhanden ist.
‫Oder eigentlich, wenn es im Grunde ein Cookie namens jwt gibt.
‫Also lasst uns all dies entfernen und es im Grunde hier einfügen.
‫Ich werde dieses entfernen und ans Ende stellen.
‫Und das formatiert es dann neu.
‫Nun existiert dieses Token hier nicht, es
‫werden lediglich Cookies angefordert. jwt.
‫Das hier verifiziert also das Token.
‫Dann müssen wir auch prüfen, ob der Benutzer noch existiert,
‫und daher wird alles von
‫hier aus sehr ähnlich sein wie zuvor, mit der
‫großen Ausnahme, dass wir keine neuen Fehler erstellen.
‫Wir werden einfach zur nächsten Middleware übergehen, aber
‫es wird nichts passieren.
‫Dann wollen wir auch prüfen,
‫ob der Benutzer kürzlich sein Passwort geändert hat.
‫Und wieder so, dann kein Fehler.
‫Nun, hier am Ende, was passiert, wenn
‫das hier alles richtig ist, also
‫wenn das Token verifiziert ist, wenn der Benutzer noch existiert und wenn
‫er sein Passwort nicht geändert hat, nun, in diesem
‫Fall bedeutet es, dass es da ist ist ein angemeldeter Benutzer.
‫Setze das hier ein.
‫Es gibt also einen angemeldeten Benutzer.
‫Was wir in diesem Fall
‫tun möchten, ist, diesem Benutzer unsere Vorlagen zugänglich zu machen.
‫Und wie können wir das tun?
‫Nun, das haben wir vorher nicht gemacht und
‫das ist jetzt ein schöner Ort, um das zu lernen.
‫Wir können antworten. locals und fügen
‫Sie dort eine beliebige Variable ein.
‫Und unsere Mops-Vorlagen erhalten dann Zugriff darauf.
‫Also wenn ich eine Antwort sage. Einheimische. user, dann
‫befindet sich innerhalb einer Vorlage
‫eine Variable namens user.
‫Auch hier hat jede einzelne Mops-Vorlage
‫Zugriff auf response . locals und was auch
‫immer wir dort platzieren, wird dann eine
‫Variable innerhalb dieser Vorlagen sein.
‫Es ist also ein bisschen so, als ob Daten mit der Render-Funktion
‫an eine Vorlage übergeben werden.
‫Diesen benötigen wir nicht mehr, da wir diesen aktuellen
‫Benutzer auf Antwort setzen werden. Einheimische.
‫Und natürlich wird danach die nächste Middleware aufgerufen.
‫Und das müssen wir auch außerhalb dieses Falls, also falls
‫kein Cookie vorhanden ist, dann
‫wird natürlich gleich
‫die nächste Middleware aufgerufen,
‫denn dann gibt es natürlich keine Möglichkeit,
‫dass tatsächlich ein angemeldeter Benutzer vorhanden ist.
‫Wenn also kein Cookie vorhanden ist, gibt
‫es keinen angemeldeten Benutzer.
‫Und so gleich weiter, und wir werden den aktuellen
‫Benutzer nicht auf Antwort setzen. Einheimische.
‫Aber wenn es ein Cookie
‫gibt, nun, dann gehen wir alle diese Überprüfungsschritte durch und
‫am Ende, wenn keiner von ihnen die
‫nächste Middleware im Stack gut aufgerufen
‫hat, dann bedeutet das, dass ein angemeldeter Benutzer vorhanden ist.
‫Aus diesem Grund setzen wir diesen Benutzer in Reaktion . locals, und so haben wir
‫dann Zugriff auf diesen Benutzer in
‫unseren Mops-Vorlagen.
‫Zum Beispiel direkt hier in der Kopfzeile,
‫wo sich die Benutzernavigation befindet.
‫Lassen Sie uns das also
‫gleich hier verwenden, aber vorher brauchen wir natürlich auch die
‫neue Middleware, die wir gerade erstellt haben.
‫Lassen Sie uns also hierher kommen, um die Route
‫anzuzeigen, und wie ich eingangs
‫sagte, möchten wir, dass diese Middleware auf
‫jede einzelne Route angewendet wird, die wir hier haben.
‫Wir machen das also ein
‫bisschen wie zuvor mit der Protect-Middleware.
‫Also im Grunde hier vor allen anderen Routen.
‫Und so wird es dann für jede
‫eingehende Anfrage in den Middleware-Stack gestellt.
‫Also Router. verwenden, authController. isLoggedIn.
‫Und entfernen wir diesen Schutz auch
‫von der Tour-Detailseite,
‫denn das macht eigentlich keinen Sinn.
‫Jetzt sind wir also tatsächlich bereit, dies zu verwenden.
‫Kommen wir also zu unserem Header und verwenden eine Bedingung.
‫Denken Sie
‫daran, wie ich bereits sagte, dass die Bedingungen in Pug nicht
‫sehr mächtig sind und wir so oft Java Script verwenden.
‫Aber für das, was wir jetzt
‫machen wollen, sind sie eigentlich gut genug.
‫Alles, was wir jetzt tun möchten, ist zu sagen, ob Benutzer.
‫Und dafür funktionieren sie gut für sehr einfache Dinge, einfach um zu
‫testen, ob eine Variable existiert oder nicht.
‫Wenn es also einen Benutzer gibt, möchten wir das anzeigen, was wir
‫hier haben, also lasst uns das tatsächlich dort platzieren.
‫Also kopiere ich
‫es hierher,
‫kommentiere diesen Code und dann hier, sagen wir anders.
‫Genau wie bei Java Script können wir also sagen, ob, sonst.
‫Dann möchte ich hier eigentlich meine
‫Buchungen nicht, sondern ausloggen.
‫Ich bin mir nicht sicher, warum das da ist.
‫Es ist also abmelden, und es hat auch eine spezielle Klasse,
‫die ich erstellt habe, damit es in CSS besonders aussieht.
‫Also nav, el, und dann mit dem Modifikator abmelden und
‫auch dieses href-Attribut von dort entfernen.
‫Dann wollen wir hier den Namen
‫des Benutzers, also Benutzer. Namen, und eigentlich wollen wir nur den Vornamen.
‫Wenn ich zum Beispiel einen Account
‫namens Jonas Schmedtmann erstellt habe, so möchte ich hier
‫nur den Jonas-Teil anzeigen.
‫Teilen wir also den Namen mit Leerzeichen auf und
‫zeigen dann nur das erste Element
‫des resultierenden Arrays an.
‫Denken Sie daran, dass wir hier einfach Java Script verwenden können.
‫Teilen Sie es durch ein Leerzeichen und dann nur das erste Element.
‫Dann wollen wir hier natürlich auch das
‫Bild, also das Bild /Benutzer, denk dran, glaube ich
‫zumindest.
‫Also, hier gehen wir, Benutzer.
‫Und was auch immer aus unserer Datenbank kommt.
‫Also Benutzer. Foto, und dann
‫können wir ihm auch einen schönen Alternativtext geben, der
‫für die Zugänglichkeit sehr wichtig ist.
‫Lass es uns gleich hier machen.
‫Also, lass uns das
‫jetzt testen, denn ich bin wirklich sehr gespannt, ob das funktioniert.
‫Lassen Sie mich also wie zuvor fortfahren
‫und das Cookie hier tatsächlich löschen.
‫Ich bin mir nicht sicher, was dieser lokale Speicher jetzt hier macht.
‫Lassen Sie uns auch das entfernen und dieses Cookie ebenfalls.
‫Gehen wir also zurück, um uns hier anzumelden, und
‫jetzt muss ich dies erneut eingeben. io-Test, eins, zwei, drei, vier.
‫Lass es uns einfach hierher kopieren, einloggen und
‫tatsächlich sind wir erfolgreich eingeloggt.
‫Also, wir bekommen jetzt unseren Keks, los geht's.
‫Aber natürlich wurde unser User-Foto und Name hier oben
‫nicht sofort angezeigt, und das liegt natürlich
‫daran, dass dies nur nach einem
‫Reload passieren kann,
‫weil es ausdrücklich ist, wer diese
‫Seiten rendert, also muss irgendwie ein Reload erfolgen.
‫Lassen Sie uns das in einer Sekunde tatsächlich
‫implementieren, aber jetzt sehen wir, ob wir jetzt tatsächlich eingeloggt sind.
‫Gehen wir also zu allen Touren hier, und jetzt
‫bekommen wir diesen Fehler hier.
‫Versuchen Sie, hier neu zu laden.
‫Nun, sagt, es kann es auf dem Server nicht finden.
‫Was passiert, wenn wir hier neu laden?
‫Nun, dieser funktioniert, und Sie
‫sehen, dass unser Benutzermenü bereits hier ist.
‫So bekommen wir unseren Logout-Button
‫und das Bild und natürlich meinen Namen.
‫Groß.
‫Versuchen wir nun, uns
‫grundsätzlich abzumelden, indem wir dieses Cookie löschen.
‫Und im nächsten Video
‫werden wir genau diese Funktionalität tatsächlich implementieren.
‫Und wenn wir jetzt neu laden, dann ist es wieder da, großartig!
‫Die Middleware-Funktion, die wir gerade erstellt haben,
‫macht also tatsächlich ihre Arbeit.
‫Melden wir uns hier
‫einfach als jemand anderes an, also sagen wir Laura, in Ordnung.
‫Also Laura, und dann mit dem gleichen
‫Passwort eins zwei drei vier testen,
‫einloggen, es ist ok, neu laden, und los gehts.
‫Also das funktioniert einfach super.
‫Ich mache mir nur Sorgen über diesen
‫Fehler, und bevor wir etwas anderes tun, müssen
‫wir diesen Fehler tatsächlich beheben.
‫Und da dieser Fehler erst auftrat,
‫als wir mit der
‫Verwendung dieser neuen Middleware begannen, lassen Sie uns einfach
‫überprüfen, ob es damit zu tun hat.
‫Wenn wir diese Middleware
‫entfernen, sehen wir, ob sie wieder funktioniert.
‫Und ja, das tut es jetzt.
‫Also das ist in der Tat etwas seltsam.
‫Sehen wir uns an,
‫ob wir in dieser Middleware-Funktion einen Fehler finden können.
‫Was ich hier sofort sehe,
‫ist, dass wir bei jedem nächsten Anruf immer wiederkommen, aber
‫hier beim nächsten nicht.
‫Das heißt, wenn wir diesen
‫Block hier eingeben, wird zwar die nächste Middleware
‫aufgerufen, danach aber
‫wieder die nächste Middleware.
‫Also müssen wir wahrscheinlich auch dieses hier zurückgeben.
‫Aber das stellen wir sicher, dass next immer nur einmal aufgerufen wird.
‫Also lass es uns versuchen, setze das hier wieder
‫ein, speichere es, scrolle tatsächlich hier nach unten.
‫Ja, das funktioniert jetzt.
‫Wir bekommen
‫also unseren eingeloggten Benutzer jetzt auch hier, und wenn wir
‫also das Cookie löschen, im Grunde den Benutzer abmelden, jetzt neu laden,
‫dann sind wir wieder normal.
‫Als nächstes wollten wir hier Abhilfe schaffen, um hier tatsächlich eine
‫Benachrichtigung zu erhalten und die
‫Seite nach einiger Zeit neu zu laden.
‫Eigentlich nicht wirklich neu laden, sondern zurück auf
‫die Homepage schicken.
‫Im Moment ist dies also weg, und wie ich
‫bereits sagte, sehen wir dieses
‫Benutzermenü immer nur, wenn wir die Seite neu laden.
‫Das machen wir jetzt automatisch
‫in unserem Java-Script-Code hier.
‫Lassen Sie uns diese Daten hier zunächst loswerden.
‫Es ist nie eine gute Idee, sensible Daten in der Konsole
‫zu protokollieren, und jetzt machen wir das,
‫was ich gerade gesagt habe.
‫Hier stellen wir also eine Anfrage, und ich
‫zeige Ihnen natürlich auch, wie wir Daten direkt aus einem
‫htl-Formular in unsere Note-Anwendung senden können.
‫Es gibt zwei Möglichkeiten.
‫Eine Möglichkeit besteht darin, Daten
‫über eine http-Anfrage zu senden, wie wir es hier getan haben.
‫Und eine andere ist, einfach direkt ein HTML-Formular zu verwenden.
‫Und damit auch dieser sehr wichtig ist, und etwas später
‫in diesem Abschnitt werde
‫ich Ihnen auch zeigen, wie man das macht.
‫Wie auch immer, lassen Sie uns jetzt diese Warnung anzeigen und die Seite neu laden.
‫Tun wir das nur, wenn wir wirklich sicher
‫sind, dass unser API-Aufruf erfolgreich war.
‫Sagen wir Antwort. Daten, und damit sind Daten eigentlich
‫die Daten, die
‫wir als Antwort unseres Tages gesendet
‫haben, und von dort können wir . Status, und prüfen Sie, ob es
‫gleich erfolgreich ist.
‫Denken Sie also daran, dass wir den Status
‫immer auf Erfolg gesetzt haben und jetzt können wir diesen tatsächlich
‫verwenden, um diese Überprüfung durchzuführen.
‫Lassen Sie uns also eine einfache Java-Script-Warnung verwenden,
‫eine Warnung wie diese und sagen Sie, dass Sie erfolgreich eingeloggt sind.
‫Lassen Sie uns das loswerden, und laden wir
‫dann nach eineinhalb Sekunden die Titelseite.
‫Also im Grunde die Homepage.
‫Also Fenster. setTimeout, dann hier
‫die Callback-Funktion, und um eine weitere Seite
‫zu laden, sagen wir location . zuweisen, und dann gehen wir einfach
‫so auf die Startseite.
‫Und wir wollen es nach 1500 Millisekunden
‫machen, also nach eineinhalb Sekunden.
‫Sollten wir dann
‫keinen Erfolg haben, möchten wir
‫dies eigentlich nicht protokollieren, sondern stattdessen benachrichtigen.
‫Also wachsam, und wieder
‫sind diese Daten hier eigentlich unsere Datenantwort.
‫Von hier aus lesen wir also die Message-Eigenschaft.
‫Das sollte den Job machen, lass uns hier neu laden.
‫Okay, das ist nicht die richtige Person.
‫Also stattdessen admin bei natours. io, teste eins
‫zwei drei vier fünf, um
‫den Fehler zuerst zu sehen.
‫Und Sie sehen,
‫falsche E-Mail-Adresse oder falsches Passwort,
‫und das liegt natürlich daran, dass
‫unser Passwort falsch war.
‫Mal sehen, was passiert.
‫Und es wird nicht automatisch neu
‫geladen, denn bevor das passieren kann, müssen
‫wir dieses Fenster schließen.
‫Sobald wir es schließen, sollte es sofort neu geladen werden.
‫Und so geht's.
‫Wir sind jetzt auf der
‫Startseite und wieder mit unserem korrekten Benutzermenü, das hier gerendert ist, perfekt.
‫Damit ist auch dieser Teil abgeschlossen, und jetzt möchte ich
‫als letzten Schritt diese Benachrichtigungen verbessern,
‫die der Benutzer erhält.
‫Anstatt diese integrierten Java-Script-Warnungen anzuzeigen.
‫Außerdem werden wir die Java-Script-Bündelung durchführen, die ich bereits ein
‫paar Mal erwähnt habe, aber das alles werden
‫wir für das nächste Video belassen,
‫weil ich nicht jedes davon allzu sehr überladen möchte.