1 00:00:01,750 --> 00:00:05,683 ‫Dies ist Teil zwei des Aufbaus unserer Login-Funktionalität. 2 00:00:07,280 --> 00:00:09,600 ‫Das erste, was ich in 3 00:00:09,600 --> 00:00:14,160 ‫diesem Video tun möchte, ist, diesen Teil der Seite bedingt zu rendern. 4 00:00:14,160 --> 00:00:16,390 ‫Es bedeutet also, diese Anmelde- 5 00:00:16,390 --> 00:00:18,570 ‫und Anmeldeschaltflächen hier darzustellen, falls 6 00:00:18,570 --> 00:00:21,010 ‫der Benutzer nicht angemeldet ist 7 00:00:21,010 --> 00:00:23,470 ‫und falls der Benutzer tatsächlich gut 8 00:00:23,470 --> 00:00:27,450 ‫angemeldet ist, dann hier eine Art Benutzermenü und auch 9 00:00:27,450 --> 00:00:29,543 ‫eine Abmeldeschaltfläche darstellen. 10 00:00:30,720 --> 00:00:32,650 ‫Diese Art von Rendering 11 00:00:32,650 --> 00:00:36,720 ‫sollte natürlich im Backend erfolgen, also in einem unserer Mops-Templates. 12 00:00:36,720 --> 00:00:39,420 ‫Wie erkennt unsere Vorlage nun, ob der 13 00:00:39,420 --> 00:00:41,603 ‫Benutzer eingeloggt ist oder nicht? 14 00:00:42,510 --> 00:00:44,600 ‫Um festzustellen, ob wir 15 00:00:44,600 --> 00:00:47,550 ‫eine neue Middleware-Funktion erstellen müssen, besteht 16 00:00:47,550 --> 00:00:50,970 ‫das einzige Ziel dieser neuen Middleware-Funktion darin, 17 00:00:50,970 --> 00:00:54,813 ‫ob der Benutzer derzeit angemeldet ist oder nicht. 18 00:00:55,720 --> 00:00:58,790 ‫Sie könnten denken, dass unsere Protect-Middleware auch 19 00:00:58,790 --> 00:01:02,080 ‫etwas Ähnliches macht, und tatsächlich ist es ähnlich. 20 00:01:02,080 --> 00:01:03,590 ‫Aber der Unterschied ist, 21 00:01:03,590 --> 00:01:07,720 ‫dass man nur für geschützte Stäbe funktioniert, also macht das Sinn, oder? 22 00:01:07,720 --> 00:01:10,370 ‫Aber unsere neue Middleware-Funktion wird 23 00:01:10,370 --> 00:01:14,003 ‫für jede einzelne Anfrage auf unserer gerenderten Website ausgeführt. 24 00:01:17,060 --> 00:01:19,710 ‫Lassen Sie uns das jetzt hier 25 00:01:19,710 --> 00:01:23,170 ‫in unserem authController in die Praxis umsetzen, und da 26 00:01:23,170 --> 00:01:26,430 ‫es der Protect-Route oder eigentlich Middleware sehr ähnlich 27 00:01:26,430 --> 00:01:29,450 ‫ist, werde ich diese hier kopieren und dann 28 00:01:29,450 --> 00:01:31,483 ‫nur einige Änderungen vornehmen. 29 00:01:34,250 --> 00:01:37,240 ‫Also kopieren wir es und fügen es hier 30 00:01:37,240 --> 00:01:39,860 ‫ein und dieses wird isLoggedIn heißen. 31 00:01:43,210 --> 00:01:46,900 ‫Diese Middleware ist wirklich nur für gerenderte Seiten gedacht, daher 32 00:01:46,900 --> 00:01:50,510 ‫besteht das Ziel hier nicht darin, eine Route zu schützen, 33 00:01:50,510 --> 00:01:53,593 ‫damit in dieser Middleware nie ein Fehler auftritt. 34 00:01:55,200 --> 00:01:57,370 ‫Schreiben wir das hier 35 00:01:58,550 --> 00:02:03,550 ‫eigentlich nur für gerenderte Seiten, und es wird keine Fehler geben. 36 00:02:08,360 --> 00:02:11,560 ‫Unser Token sollte aus den Cookies stammen 37 00:02:11,560 --> 00:02:13,640 ‫und nicht aus einem 38 00:02:13,640 --> 00:02:16,230 ‫Autorisierungs-Header, da wir bei gerenderten 39 00:02:16,230 --> 00:02:19,133 ‫Seiten natürlich keinen Token im Header haben. 40 00:02:20,050 --> 00:02:23,220 ‫Auch hier wird für unsere gesamte gerenderte Website 41 00:02:23,220 --> 00:02:25,800 ‫das Token immer nur mit 42 00:02:25,800 --> 00:02:29,000 ‫dem Cookie gesendet und niemals mit dem Autorisierungs-Header. 43 00:02:29,000 --> 00:02:32,143 ‫Das ist nur für die API. 44 00:02:33,070 --> 00:02:36,320 ‫Und eigentlich muss es nicht so komplex sein, wir können einfach 45 00:02:36,320 --> 00:02:38,790 ‫sagen, dass wir den gesamten Code ausführen 46 00:02:38,790 --> 00:02:42,030 ‫sollen, den wir hier haben, wenn ein Token vorhanden ist. 47 00:02:42,030 --> 00:02:46,083 ‫Oder eigentlich, wenn es im Grunde ein Cookie namens jwt gibt. 48 00:02:49,680 --> 00:02:54,460 ‫Also lasst uns all dies entfernen und es im Grunde hier einfügen. 49 00:02:54,460 --> 00:02:57,303 ‫Ich werde dieses entfernen und ans Ende stellen. 50 00:03:02,780 --> 00:03:04,373 ‫Und das formatiert es dann neu. 51 00:03:08,630 --> 00:03:10,900 ‫Nun existiert dieses Token hier nicht, es 52 00:03:10,900 --> 00:03:13,907 ‫werden lediglich Cookies angefordert. jwt. 53 00:03:20,000 --> 00:03:22,743 ‫Das hier verifiziert also das Token. 54 00:03:28,060 --> 00:03:31,320 ‫Dann müssen wir auch prüfen, ob der Benutzer noch existiert, 55 00:03:31,320 --> 00:03:33,290 ‫und daher wird alles von 56 00:03:33,290 --> 00:03:36,513 ‫hier aus sehr ähnlich sein wie zuvor, mit der 57 00:03:36,513 --> 00:03:39,533 ‫großen Ausnahme, dass wir keine neuen Fehler erstellen. 58 00:03:41,500 --> 00:03:43,780 ‫Wir werden einfach zur nächsten Middleware übergehen, aber 59 00:03:43,780 --> 00:03:45,123 ‫es wird nichts passieren. 60 00:03:47,540 --> 00:03:49,530 ‫Dann wollen wir auch prüfen, 61 00:03:49,530 --> 00:03:51,910 ‫ob der Benutzer kürzlich sein Passwort geändert hat. 62 00:03:51,910 --> 00:03:55,113 ‫Und wieder so, dann kein Fehler. 63 00:03:56,210 --> 00:03:58,410 ‫Nun, hier am Ende, was passiert, wenn 64 00:03:58,410 --> 00:04:00,420 ‫das hier alles richtig ist, also 65 00:04:00,420 --> 00:04:03,920 ‫wenn das Token verifiziert ist, wenn der Benutzer noch existiert und wenn 66 00:04:03,920 --> 00:04:06,400 ‫er sein Passwort nicht geändert hat, nun, in diesem 67 00:04:06,400 --> 00:04:09,673 ‫Fall bedeutet es, dass es da ist ist ein angemeldeter Benutzer. 68 00:04:11,800 --> 00:04:12,713 ‫Setze das hier ein. 69 00:04:17,810 --> 00:04:20,440 ‫Es gibt also einen angemeldeten Benutzer. 70 00:04:20,440 --> 00:04:22,130 ‫Was wir in diesem Fall 71 00:04:22,130 --> 00:04:25,320 ‫tun möchten, ist, diesem Benutzer unsere Vorlagen zugänglich zu machen. 72 00:04:25,320 --> 00:04:26,950 ‫Und wie können wir das tun? 73 00:04:26,950 --> 00:04:29,960 ‫Nun, das haben wir vorher nicht gemacht und 74 00:04:29,960 --> 00:04:33,283 ‫das ist jetzt ein schöner Ort, um das zu lernen. 75 00:04:34,970 --> 00:04:38,340 ‫Wir können antworten. locals und fügen 76 00:04:38,340 --> 00:04:40,500 ‫Sie dort eine beliebige Variable ein. 77 00:04:40,500 --> 00:04:43,650 ‫Und unsere Mops-Vorlagen erhalten dann Zugriff darauf. 78 00:04:43,650 --> 00:04:46,920 ‫Also wenn ich eine Antwort sage. Einheimische. user, dann 79 00:04:46,920 --> 00:04:49,000 ‫befindet sich innerhalb einer Vorlage 80 00:04:49,000 --> 00:04:50,963 ‫eine Variable namens user. 81 00:04:52,320 --> 00:04:55,060 ‫Auch hier hat jede einzelne Mops-Vorlage 82 00:04:55,060 --> 00:04:59,410 ‫Zugriff auf response . locals und was auch 83 00:04:59,410 --> 00:05:02,060 ‫immer wir dort platzieren, wird dann eine 84 00:05:02,060 --> 00:05:04,300 ‫Variable innerhalb dieser Vorlagen sein. 85 00:05:04,300 --> 00:05:07,350 ‫Es ist also ein bisschen so, als ob Daten mit der Render-Funktion 86 00:05:07,350 --> 00:05:08,713 ‫an eine Vorlage übergeben werden. 87 00:05:11,870 --> 00:05:14,400 ‫Diesen benötigen wir nicht mehr, da wir diesen aktuellen 88 00:05:14,400 --> 00:05:17,593 ‫Benutzer auf Antwort setzen werden. Einheimische. 89 00:05:20,710 --> 00:05:24,450 ‫Und natürlich wird danach die nächste Middleware aufgerufen. 90 00:05:24,450 --> 00:05:27,833 ‫Und das müssen wir auch außerhalb dieses Falls, also falls 91 00:05:30,930 --> 00:05:32,660 ‫kein Cookie vorhanden ist, dann 92 00:05:32,660 --> 00:05:34,180 ‫wird natürlich gleich 93 00:05:34,180 --> 00:05:35,900 ‫die nächste Middleware aufgerufen, 94 00:05:35,900 --> 00:05:38,380 ‫denn dann gibt es natürlich keine Möglichkeit, 95 00:05:38,380 --> 00:05:41,010 ‫dass tatsächlich ein angemeldeter Benutzer vorhanden ist. 96 00:05:41,010 --> 00:05:44,260 ‫Wenn also kein Cookie vorhanden ist, gibt 97 00:05:44,260 --> 00:05:46,170 ‫es keinen angemeldeten Benutzer. 98 00:05:46,170 --> 00:05:49,050 ‫Und so gleich weiter, und wir werden den aktuellen 99 00:05:49,050 --> 00:05:52,283 ‫Benutzer nicht auf Antwort setzen. Einheimische. 100 00:05:53,410 --> 00:05:55,240 ‫Aber wenn es ein Cookie 101 00:05:55,240 --> 00:05:58,180 ‫gibt, nun, dann gehen wir alle diese Überprüfungsschritte durch und 102 00:05:58,180 --> 00:06:00,400 ‫am Ende, wenn keiner von ihnen die 103 00:06:00,400 --> 00:06:02,530 ‫nächste Middleware im Stack gut aufgerufen 104 00:06:02,530 --> 00:06:05,620 ‫hat, dann bedeutet das, dass ein angemeldeter Benutzer vorhanden ist. 105 00:06:05,620 --> 00:06:09,510 ‫Aus diesem Grund setzen wir diesen Benutzer in Reaktion . locals, und so haben wir 106 00:06:09,510 --> 00:06:12,190 ‫dann Zugriff auf diesen Benutzer in 107 00:06:12,190 --> 00:06:13,573 ‫unseren Mops-Vorlagen. 108 00:06:15,090 --> 00:06:19,230 ‫Zum Beispiel direkt hier in der Kopfzeile, 109 00:06:19,230 --> 00:06:22,493 ‫wo sich die Benutzernavigation befindet. 110 00:06:23,810 --> 00:06:25,990 ‫Lassen Sie uns das also 111 00:06:25,990 --> 00:06:29,380 ‫gleich hier verwenden, aber vorher brauchen wir natürlich auch die 112 00:06:29,380 --> 00:06:31,733 ‫neue Middleware, die wir gerade erstellt haben. 113 00:06:32,950 --> 00:06:35,563 ‫Lassen Sie uns also hierher kommen, um die Route 114 00:06:37,320 --> 00:06:39,210 ‫anzuzeigen, und wie ich eingangs 115 00:06:39,210 --> 00:06:41,240 ‫sagte, möchten wir, dass diese Middleware auf 116 00:06:41,240 --> 00:06:43,710 ‫jede einzelne Route angewendet wird, die wir hier haben. 117 00:06:43,710 --> 00:06:45,840 ‫Wir machen das also ein 118 00:06:45,840 --> 00:06:48,210 ‫bisschen wie zuvor mit der Protect-Middleware. 119 00:06:48,210 --> 00:06:51,330 ‫Also im Grunde hier vor allen anderen Routen. 120 00:06:51,330 --> 00:06:54,020 ‫Und so wird es dann für jede 121 00:06:54,020 --> 00:06:56,403 ‫eingehende Anfrage in den Middleware-Stack gestellt. 122 00:06:57,820 --> 00:07:02,820 ‫Also Router. verwenden, authController. isLoggedIn. 123 00:07:07,250 --> 00:07:10,140 ‫Und entfernen wir diesen Schutz auch 124 00:07:10,140 --> 00:07:12,180 ‫von der Tour-Detailseite, 125 00:07:12,180 --> 00:07:14,803 ‫denn das macht eigentlich keinen Sinn. 126 00:07:15,690 --> 00:07:18,433 ‫Jetzt sind wir also tatsächlich bereit, dies zu verwenden. 127 00:07:19,290 --> 00:07:23,103 ‫Kommen wir also zu unserem Header und verwenden eine Bedingung. 128 00:07:24,420 --> 00:07:25,500 ‫Denken Sie 129 00:07:25,500 --> 00:07:29,260 ‫daran, wie ich bereits sagte, dass die Bedingungen in Pug nicht 130 00:07:29,260 --> 00:07:32,570 ‫sehr mächtig sind und wir so oft Java Script verwenden. 131 00:07:32,570 --> 00:07:34,340 ‫Aber für das, was wir jetzt 132 00:07:34,340 --> 00:07:36,270 ‫machen wollen, sind sie eigentlich gut genug. 133 00:07:36,270 --> 00:07:40,793 ‫Alles, was wir jetzt tun möchten, ist zu sagen, ob Benutzer. 134 00:07:42,020 --> 00:07:46,980 ‫Und dafür funktionieren sie gut für sehr einfache Dinge, einfach um zu 135 00:07:46,980 --> 00:07:50,063 ‫testen, ob eine Variable existiert oder nicht. 136 00:07:52,273 --> 00:07:56,380 ‫Wenn es also einen Benutzer gibt, möchten wir das anzeigen, was wir 137 00:07:56,380 --> 00:07:59,853 ‫hier haben, also lasst uns das tatsächlich dort platzieren. 138 00:08:00,940 --> 00:08:02,433 ‫Also kopiere ich 139 00:08:05,000 --> 00:08:06,410 ‫es hierher, 140 00:08:09,150 --> 00:08:13,560 ‫kommentiere diesen Code und dann hier, sagen wir anders. 141 00:08:13,560 --> 00:08:17,670 ‫Genau wie bei Java Script können wir also sagen, ob, sonst. 142 00:08:17,670 --> 00:08:20,300 ‫Dann möchte ich hier eigentlich meine 143 00:08:20,300 --> 00:08:22,580 ‫Buchungen nicht, sondern ausloggen. 144 00:08:22,580 --> 00:08:24,173 ‫Ich bin mir nicht sicher, warum das da ist. 145 00:08:25,490 --> 00:08:29,000 ‫Es ist also abmelden, und es hat auch eine spezielle Klasse, 146 00:08:29,980 --> 00:08:33,313 ‫die ich erstellt habe, damit es in CSS besonders aussieht. 147 00:08:34,180 --> 00:08:39,180 ‫Also nav, el, und dann mit dem Modifikator abmelden und 148 00:08:40,860 --> 00:08:44,713 ‫auch dieses href-Attribut von dort entfernen. 149 00:08:47,270 --> 00:08:49,743 ‫Dann wollen wir hier den Namen 150 00:08:53,010 --> 00:08:57,040 ‫des Benutzers, also Benutzer. Namen, und eigentlich wollen wir nur den Vornamen. 151 00:08:57,040 --> 00:08:59,990 ‫Wenn ich zum Beispiel einen Account 152 00:08:59,990 --> 00:09:04,650 ‫namens Jonas Schmedtmann erstellt habe, so möchte ich hier 153 00:09:04,650 --> 00:09:07,293 ‫nur den Jonas-Teil anzeigen. 154 00:09:08,530 --> 00:09:11,810 ‫Teilen wir also den Namen mit Leerzeichen auf und 155 00:09:11,810 --> 00:09:14,030 ‫zeigen dann nur das erste Element 156 00:09:14,030 --> 00:09:15,623 ‫des resultierenden Arrays an. 157 00:09:18,330 --> 00:09:21,280 ‫Denken Sie daran, dass wir hier einfach Java Script verwenden können. 158 00:09:22,610 --> 00:09:26,513 ‫Teilen Sie es durch ein Leerzeichen und dann nur das erste Element. 159 00:09:28,330 --> 00:09:31,593 ‫Dann wollen wir hier natürlich auch das 160 00:09:33,430 --> 00:09:37,300 ‫Bild, also das Bild /Benutzer, denk dran, glaube ich 161 00:09:37,300 --> 00:09:38,313 ‫zumindest. 162 00:09:41,930 --> 00:09:43,377 ‫Also, hier gehen wir, Benutzer. 163 00:09:46,660 --> 00:09:49,683 ‫Und was auch immer aus unserer Datenbank kommt. 164 00:09:53,220 --> 00:09:56,747 ‫Also Benutzer. Foto, und dann 165 00:09:56,747 --> 00:10:00,880 ‫können wir ihm auch einen schönen Alternativtext geben, der 166 00:10:00,880 --> 00:10:03,737 ‫für die Zugänglichkeit sehr wichtig ist. 167 00:10:03,737 --> 00:10:05,723 ‫Lass es uns gleich hier machen. 168 00:10:12,070 --> 00:10:14,040 ‫Also, lass uns das 169 00:10:14,040 --> 00:10:18,113 ‫jetzt testen, denn ich bin wirklich sehr gespannt, ob das funktioniert. 170 00:10:19,780 --> 00:10:22,180 ‫Lassen Sie mich also wie zuvor fortfahren 171 00:10:22,180 --> 00:10:24,393 ‫und das Cookie hier tatsächlich löschen. 172 00:10:25,610 --> 00:10:28,900 ‫Ich bin mir nicht sicher, was dieser lokale Speicher jetzt hier macht. 173 00:10:28,900 --> 00:10:33,163 ‫Lassen Sie uns auch das entfernen und dieses Cookie ebenfalls. 174 00:10:35,030 --> 00:10:38,460 ‫Gehen wir also zurück, um uns hier anzumelden, und 175 00:10:38,460 --> 00:10:40,903 ‫jetzt muss ich dies erneut eingeben. io-Test, eins, zwei, drei, vier. 176 00:10:44,217 --> 00:10:48,260 ‫Lass es uns einfach hierher kopieren, einloggen und 177 00:10:48,260 --> 00:10:50,940 ‫tatsächlich sind wir erfolgreich eingeloggt. 178 00:10:50,940 --> 00:10:55,420 ‫Also, wir bekommen jetzt unseren Keks, los geht's. 179 00:10:55,420 --> 00:10:59,040 ‫Aber natürlich wurde unser User-Foto und Name hier oben 180 00:10:59,040 --> 00:11:01,820 ‫nicht sofort angezeigt, und das liegt natürlich 181 00:11:01,820 --> 00:11:04,470 ‫daran, dass dies nur nach einem 182 00:11:04,470 --> 00:11:06,210 ‫Reload passieren kann, 183 00:11:06,210 --> 00:11:08,450 ‫weil es ausdrücklich ist, wer diese 184 00:11:08,450 --> 00:11:11,470 ‫Seiten rendert, also muss irgendwie ein Reload erfolgen. 185 00:11:11,470 --> 00:11:13,443 ‫Lassen Sie uns das in einer Sekunde tatsächlich 186 00:11:15,120 --> 00:11:17,460 ‫implementieren, aber jetzt sehen wir, ob wir jetzt tatsächlich eingeloggt sind. 187 00:11:17,460 --> 00:11:22,160 ‫Gehen wir also zu allen Touren hier, und jetzt 188 00:11:22,160 --> 00:11:25,400 ‫bekommen wir diesen Fehler hier. 189 00:11:25,400 --> 00:11:28,180 ‫Versuchen Sie, hier neu zu laden. 190 00:11:28,180 --> 00:11:29,373 ‫Nun, sagt, es kann es auf dem Server nicht finden. 191 00:11:30,490 --> 00:11:33,630 ‫Was passiert, wenn wir hier neu laden? 192 00:11:33,630 --> 00:11:35,633 ‫Nun, dieser funktioniert, und Sie 193 00:11:37,400 --> 00:11:39,936 ‫sehen, dass unser Benutzermenü bereits hier ist. 194 00:11:39,936 --> 00:11:42,910 ‫So bekommen wir unseren Logout-Button 195 00:11:42,910 --> 00:11:46,220 ‫und das Bild und natürlich meinen Namen. 196 00:11:46,220 --> 00:11:48,490 ‫Groß. 197 00:11:48,490 --> 00:11:49,870 ‫Versuchen wir nun, uns 198 00:11:49,870 --> 00:11:51,890 ‫grundsätzlich abzumelden, indem wir dieses Cookie löschen. 199 00:11:51,890 --> 00:11:53,670 ‫Und im nächsten Video 200 00:11:53,670 --> 00:11:55,900 ‫werden wir genau diese Funktionalität tatsächlich implementieren. 201 00:11:55,900 --> 00:11:57,433 ‫Und wenn wir jetzt neu laden, dann ist es wieder da, großartig! 202 00:11:59,530 --> 00:12:03,160 ‫Die Middleware-Funktion, die wir gerade erstellt haben, 203 00:12:03,160 --> 00:12:05,840 ‫macht also tatsächlich ihre Arbeit. 204 00:12:05,840 --> 00:12:07,663 ‫Melden wir uns hier 205 00:12:08,500 --> 00:12:12,440 ‫einfach als jemand anderes an, also sagen wir Laura, in Ordnung. 206 00:12:12,440 --> 00:12:15,713 ‫Also Laura, und dann mit dem gleichen 207 00:12:17,870 --> 00:12:20,930 ‫Passwort eins zwei drei vier testen, 208 00:12:20,930 --> 00:12:25,190 ‫einloggen, es ist ok, neu laden, und los gehts. 209 00:12:25,190 --> 00:12:29,690 ‫Also das funktioniert einfach super. 210 00:12:29,690 --> 00:12:31,680 ‫Ich mache mir nur Sorgen über diesen 211 00:12:31,680 --> 00:12:33,900 ‫Fehler, und bevor wir etwas anderes tun, müssen 212 00:12:33,900 --> 00:12:35,580 ‫wir diesen Fehler tatsächlich beheben. 213 00:12:35,580 --> 00:12:37,890 ‫Und da dieser Fehler erst auftrat, 214 00:12:37,890 --> 00:12:40,000 ‫als wir mit der 215 00:12:40,000 --> 00:12:43,060 ‫Verwendung dieser neuen Middleware begannen, lassen Sie uns einfach 216 00:12:43,060 --> 00:12:45,520 ‫überprüfen, ob es damit zu tun hat. 217 00:12:45,520 --> 00:12:47,020 ‫Wenn wir diese Middleware 218 00:12:48,110 --> 00:12:50,530 ‫entfernen, sehen wir, ob sie wieder funktioniert. 219 00:12:50,530 --> 00:12:52,853 ‫Und ja, das tut es jetzt. 220 00:12:54,860 --> 00:12:56,570 ‫Also das ist in der Tat etwas seltsam. 221 00:12:56,570 --> 00:12:58,253 ‫Sehen wir uns an, 222 00:12:59,218 --> 00:13:02,790 ‫ob wir in dieser Middleware-Funktion einen Fehler finden können. 223 00:13:02,790 --> 00:13:05,023 ‫Was ich hier sofort sehe, 224 00:13:09,560 --> 00:13:13,890 ‫ist, dass wir bei jedem nächsten Anruf immer wiederkommen, aber 225 00:13:13,890 --> 00:13:15,760 ‫hier beim nächsten nicht. 226 00:13:15,760 --> 00:13:18,360 ‫Das heißt, wenn wir diesen 227 00:13:18,360 --> 00:13:22,540 ‫Block hier eingeben, wird zwar die nächste Middleware 228 00:13:22,540 --> 00:13:24,490 ‫aufgerufen, danach aber 229 00:13:24,490 --> 00:13:27,060 ‫wieder die nächste Middleware. 230 00:13:27,060 --> 00:13:28,633 ‫Also müssen wir wahrscheinlich auch dieses hier zurückgeben. 231 00:13:30,630 --> 00:13:34,823 ‫Aber das stellen wir sicher, dass next immer nur einmal aufgerufen wird. 232 00:13:36,040 --> 00:13:40,223 ‫Also lass es uns versuchen, setze das hier wieder 233 00:13:41,670 --> 00:13:45,430 ‫ein, speichere es, scrolle tatsächlich hier nach unten. 234 00:13:45,430 --> 00:13:48,713 ‫Ja, das funktioniert jetzt. 235 00:13:53,460 --> 00:13:54,510 ‫Wir bekommen 236 00:13:55,840 --> 00:13:59,490 ‫also unseren eingeloggten Benutzer jetzt auch hier, und wenn wir 237 00:13:59,490 --> 00:14:03,610 ‫also das Cookie löschen, im Grunde den Benutzer abmelden, jetzt neu laden, 238 00:14:03,610 --> 00:14:05,330 ‫dann sind wir wieder normal. 239 00:14:05,330 --> 00:14:09,283 ‫Als nächstes wollten wir hier Abhilfe schaffen, um hier tatsächlich eine 240 00:14:12,366 --> 00:14:14,430 ‫Benachrichtigung zu erhalten und die 241 00:14:14,430 --> 00:14:16,930 ‫Seite nach einiger Zeit neu zu laden. 242 00:14:16,930 --> 00:14:20,133 ‫Eigentlich nicht wirklich neu laden, sondern zurück auf 243 00:14:21,620 --> 00:14:23,400 ‫die Homepage schicken. 244 00:14:23,400 --> 00:14:26,343 ‫Im Moment ist dies also weg, und wie ich 245 00:14:28,570 --> 00:14:30,410 ‫bereits sagte, sehen wir dieses 246 00:14:30,410 --> 00:14:33,330 ‫Benutzermenü immer nur, wenn wir die Seite neu laden. 247 00:14:33,330 --> 00:14:36,230 ‫Das machen wir jetzt automatisch 248 00:14:36,230 --> 00:14:38,800 ‫in unserem Java-Script-Code hier. 249 00:14:38,800 --> 00:14:40,293 ‫Lassen Sie uns diese Daten hier zunächst loswerden. 250 00:14:41,882 --> 00:14:45,280 ‫Es ist nie eine gute Idee, sensible Daten in der Konsole 251 00:14:46,350 --> 00:14:48,340 ‫zu protokollieren, und jetzt machen wir das, 252 00:14:48,340 --> 00:14:50,140 ‫was ich gerade gesagt habe. 253 00:14:50,140 --> 00:14:53,403 ‫Hier stellen wir also eine Anfrage, und ich 254 00:14:54,250 --> 00:14:58,220 ‫zeige Ihnen natürlich auch, wie wir Daten direkt aus einem 255 00:14:58,220 --> 00:15:01,220 ‫htl-Formular in unsere Note-Anwendung senden können. 256 00:15:01,220 --> 00:15:04,503 ‫Es gibt zwei Möglichkeiten. 257 00:15:06,430 --> 00:15:07,410 ‫Eine Möglichkeit besteht darin, Daten 258 00:15:07,410 --> 00:15:09,260 ‫über eine http-Anfrage zu senden, wie wir es hier getan haben. 259 00:15:09,260 --> 00:15:11,750 ‫Und eine andere ist, einfach direkt ein HTML-Formular zu verwenden. 260 00:15:11,750 --> 00:15:15,940 ‫Und damit auch dieser sehr wichtig ist, und etwas später 261 00:15:15,940 --> 00:15:17,960 ‫in diesem Abschnitt werde 262 00:15:17,960 --> 00:15:21,130 ‫ich Ihnen auch zeigen, wie man das macht. 263 00:15:21,130 --> 00:15:23,090 ‫Wie auch immer, lassen Sie uns jetzt diese Warnung anzeigen und die Seite neu laden. 264 00:15:23,090 --> 00:15:27,200 ‫Tun wir das nur, wenn wir wirklich sicher 265 00:15:27,200 --> 00:15:30,320 ‫sind, dass unser API-Aufruf erfolgreich war. 266 00:15:30,320 --> 00:15:32,870 ‫Sagen wir Antwort. Daten, und damit sind Daten eigentlich 267 00:15:32,870 --> 00:15:36,290 ‫die Daten, die 268 00:15:36,290 --> 00:15:38,600 ‫wir als Antwort unseres Tages gesendet 269 00:15:38,600 --> 00:15:41,220 ‫haben, und von dort können wir . Status, und prüfen Sie, ob es 270 00:15:41,220 --> 00:15:44,693 ‫gleich erfolgreich ist. 271 00:15:44,693 --> 00:15:47,483 ‫Denken Sie also daran, dass wir den Status 272 00:15:50,439 --> 00:15:53,920 ‫immer auf Erfolg gesetzt haben und jetzt können wir diesen tatsächlich 273 00:15:53,920 --> 00:15:55,900 ‫verwenden, um diese Überprüfung durchzuführen. 274 00:15:55,900 --> 00:15:58,093 ‫Lassen Sie uns also eine einfache Java-Script-Warnung verwenden, 275 00:15:59,038 --> 00:16:02,147 ‫eine Warnung wie diese und sagen Sie, dass Sie erfolgreich eingeloggt sind. 276 00:16:02,147 --> 00:16:07,147 ‫Lassen Sie uns das loswerden, und laden wir 277 00:16:14,120 --> 00:16:17,950 ‫dann nach eineinhalb Sekunden die Titelseite. 278 00:16:17,950 --> 00:16:21,330 ‫Also im Grunde die Homepage. 279 00:16:21,330 --> 00:16:22,730 ‫Also Fenster. setTimeout, dann hier 280 00:16:23,640 --> 00:16:28,640 ‫die Callback-Funktion, und um eine weitere Seite 281 00:16:31,100 --> 00:16:33,400 ‫zu laden, sagen wir location . zuweisen, und dann gehen wir einfach 282 00:16:33,400 --> 00:16:36,633 ‫so auf die Startseite. 283 00:16:37,700 --> 00:16:41,563 ‫Und wir wollen es nach 1500 Millisekunden 284 00:16:43,690 --> 00:16:47,120 ‫machen, also nach eineinhalb Sekunden. 285 00:16:47,120 --> 00:16:49,023 ‫Sollten wir dann 286 00:16:49,990 --> 00:16:52,780 ‫keinen Erfolg haben, möchten wir 287 00:16:52,780 --> 00:16:55,950 ‫dies eigentlich nicht protokollieren, sondern stattdessen benachrichtigen. 288 00:16:55,950 --> 00:16:57,553 ‫Also wachsam, und wieder 289 00:16:59,600 --> 00:17:02,350 ‫sind diese Daten hier eigentlich unsere Datenantwort. 290 00:17:02,350 --> 00:17:04,533 ‫Von hier aus lesen wir also die Message-Eigenschaft. 291 00:17:05,793 --> 00:17:08,403 ‫Das sollte den Job machen, lass uns hier neu laden. 292 00:17:14,680 --> 00:17:17,313 ‫Okay, das ist nicht die richtige Person. 293 00:17:19,930 --> 00:17:21,853 ‫Also stattdessen admin bei natours. io, teste eins 294 00:17:22,830 --> 00:17:27,413 ‫zwei drei vier fünf, um 295 00:17:29,230 --> 00:17:31,770 ‫den Fehler zuerst zu sehen. 296 00:17:31,770 --> 00:17:34,270 ‫Und Sie sehen, 297 00:17:34,270 --> 00:17:37,490 ‫falsche E-Mail-Adresse oder falsches Passwort, 298 00:17:37,490 --> 00:17:40,783 ‫und das liegt natürlich daran, dass 299 00:17:41,960 --> 00:17:44,750 ‫unser Passwort falsch war. 300 00:17:44,750 --> 00:17:46,630 ‫Mal sehen, was passiert. 301 00:17:46,630 --> 00:17:48,710 ‫Und es wird nicht automatisch neu 302 00:17:48,710 --> 00:17:51,310 ‫geladen, denn bevor das passieren kann, müssen 303 00:17:51,310 --> 00:17:52,970 ‫wir dieses Fenster schließen. 304 00:17:52,970 --> 00:17:54,700 ‫Sobald wir es schließen, sollte es sofort neu geladen werden. 305 00:17:54,700 --> 00:17:57,963 ‫Und so geht's. 306 00:18:00,690 --> 00:18:01,973 ‫Wir sind jetzt auf der 307 00:18:02,950 --> 00:18:05,810 ‫Startseite und wieder mit unserem korrekten Benutzermenü, das hier gerendert ist, perfekt. 308 00:18:05,810 --> 00:18:10,213 ‫Damit ist auch dieser Teil abgeschlossen, und jetzt möchte ich 309 00:18:11,990 --> 00:18:14,530 ‫als letzten Schritt diese Benachrichtigungen verbessern, 310 00:18:14,530 --> 00:18:17,020 ‫die der Benutzer erhält. 311 00:18:17,020 --> 00:18:19,060 ‫Anstatt diese integrierten Java-Script-Warnungen anzuzeigen. 312 00:18:19,060 --> 00:18:22,333 ‫Außerdem werden wir die Java-Script-Bündelung durchführen, die ich bereits ein 313 00:18:23,230 --> 00:18:26,050 ‫paar Mal erwähnt habe, aber das alles werden 314 00:18:26,050 --> 00:18:28,490 ‫wir für das nächste Video belassen, 315 00:18:28,490 --> 00:18:31,320 ‫weil ich nicht jedes davon allzu sehr überladen möchte.