1 00:00:00,000 --> 00:00:08,095 Nachdem wir die Aktualisierung der serverseitigen Seite abgeschlossen haben, 2 00:00:08,095 --> 00:00:10,770 ist es an der Zeit, zum Angular Client zu wechseln. 3 00:00:10,770 --> 00:00:13,830 Zu Ihrer Bequemlichkeit habe ich Ihnen 4 00:00:13,830 --> 00:00:17,700 das GitHub-Repository zur Verfügung gestellt, das die endgültige Version 5 00:00:17,700 --> 00:00:20,840 des Angular Clients enthält, der mit 6 00:00:20,840 --> 00:00:26,805 unserem REST API Server kommunizieren und dann die verschiedenen Ansichten für unseren Client rendern kann. 7 00:00:26,805 --> 00:00:29,690 Also habe ich die Angular-Anwendung genommen, die wir 8 00:00:29,690 --> 00:00:32,895 im zweiten Kurs dieser Spezialisierung entwickelt haben, 9 00:00:32,895 --> 00:00:34,380 und sie dann modifiziert. 10 00:00:34,380 --> 00:00:39,680 Wir werden eine kurze Tour durch den Code in ein wenig später machen. 11 00:00:39,680 --> 00:00:44,005 Jetzt klonen Sie das 12 00:00:44,005 --> 00:00:47,525 Git-Repository auf Ihren Computer und starten dann Ihren Angular Client 13 00:00:47,525 --> 00:00:50,820 und sehen dann, wie er mit unserer serverseitigen Seite kommuniziert. 14 00:00:50,820 --> 00:00:54,555 Sehen wir uns die Details als nächstes an. 15 00:00:54,555 --> 00:01:01,345 Um mit dieser Übung zu beginnen, 16 00:01:01,345 --> 00:01:04,070 gehen Sie in Ihrem Terminal oder Befehlsfenster zu Ihrem günstigen Standort und geben Sie dann an 17 00:01:04,070 --> 00:01:06,685 der Eingabeaufforderung git clone 18 00:01:06,685 --> 00:01:21,615 https://github.com/jmuppala/conFusion-Angular6.git ein. 19 00:01:21,615 --> 00:01:28,705 Lassen Sie dann die Angular-Anwendung auf Ihren Computer geklont werden. 20 00:01:28,705 --> 00:01:30,495 Sobald das Klonen abgeschlossen ist, 21 00:01:30,495 --> 00:01:39,340 wechseln Sie in den Ordner „Confusion-Angular6“ 22 00:01:39,340 --> 00:01:43,620 , der gerade erstellt wurde, wenn Sie dieses Git-Repository klonen. 23 00:01:43,620 --> 00:01:48,845 Dann werden Sie sofort bemerken, dass es bereits eine Reihe von Dateien gibt. Geben Sie 24 00:01:48,845 --> 00:01:56,700 nun an der Eingabeaufforderung npm install ein, 25 00:01:56,700 --> 00:02:00,500 um alle Knotenmodule zu installieren, von 26 00:02:00,500 --> 00:02:04,460 denen diese Angular-Anwendung abhängig ist. 27 00:02:04,460 --> 00:02:09,415 Also, sobald die Knotenmodule oder alle installiert sind, 28 00:02:09,415 --> 00:02:18,095 dann können wir unsere NG starten dienen zu kompilieren und servieren unsere Angular-Anwendung. 29 00:02:18,095 --> 00:02:21,765 Sobald alles von npm install installiert ist, 30 00:02:21,765 --> 00:02:27,080 stellen Sie sicher, dass Ihr MongoDB Server 31 00:02:27,080 --> 00:02:32,365 einsatzbereit ist und auch Ihr REST API Server läuft. 32 00:02:32,365 --> 00:02:35,165 Andernfalls funktioniert Ihr Angular Client nicht. 33 00:02:35,165 --> 00:02:39,720 Also, jetzt, da Sie Ihren Angular Client auf Ihrem Computer installiert haben, 34 00:02:39,720 --> 00:02:43,815 geben Sie an der Eingabeaufforderung ng serve ein und 35 00:02:43,815 --> 00:02:50,755 Ihre Angular-Anwendung wird kompiliert und von ng serve in kurzer Zeit serviert. 36 00:02:50,755 --> 00:02:54,725 Sobald Ihre Angular-Anwendung erfolgreich kompiliert wurde, 37 00:02:54,725 --> 00:02:59,345 gehen Sie zu einem Browser und öffnen Sie Ihre Angular-Anwendung im Browser. 38 00:02:59,345 --> 00:03:06,665 Gehen Sie zum Browser, 39 00:03:06,665 --> 00:03:12,050 in der Adressleiste, lassen Sie mich localhost eingeben: 4200 und 40 00:03:12,050 --> 00:03:14,345 Sie werden sehen, dass Ihre Angular-Anwendung 41 00:03:14,345 --> 00:03:17,930 gestartet wird und auf dem Bildschirm hier sichtbar ist. 42 00:03:17,930 --> 00:03:21,170 Sie werden sofort feststellen, dass Ihre Angular-Anwendung in der 43 00:03:21,170 --> 00:03:24,500 Lage ist, die Daten vom Server zu holen und dann 44 00:03:24,500 --> 00:03:28,115 die verschiedenen Teile Ihrer Angular-Anwendung genau wie 45 00:03:28,115 --> 00:03:33,040 das, was Sie am Ende Ihres Angular-Kurses getan haben. 46 00:03:33,080 --> 00:03:35,605 Wenn Sie über Ordner sprechen, 47 00:03:35,605 --> 00:03:42,730 werden Sie auch sehen, dass die Seite Info auch die Informationen als solche darstellt. 48 00:03:42,730 --> 00:03:45,970 Im Menü sehen Sie, wie die Elemente im Menü 49 00:03:45,970 --> 00:03:49,475 angezeigt werden, wie wir es mit der Angular-Anwendung gesehen haben. 50 00:03:49,475 --> 00:03:51,595 Darüber hinaus habe ich 51 00:03:51,595 --> 00:03:56,320 eine weitere Seite zu der einseitigen Anwendung namens Meine Favoriten hinzugefügt, 52 00:03:56,320 --> 00:04:02,590 zu der Sie nicht navigieren können, da kein Benutzer im System angemeldet ist. 53 00:04:02,590 --> 00:04:05,960 Sie sehen also, dass ich keinen Benutzer im System angemeldet habe. 54 00:04:05,960 --> 00:04:09,120 Deshalb hat es keinen Sinn, meine Favoriten anzugeben, 55 00:04:09,120 --> 00:04:10,845 weil Sie nicht wissen, welcher Benutzer 56 00:04:10,845 --> 00:04:12,990 als Favoriten hier angezeigt werden soll. 57 00:04:12,990 --> 00:04:15,580 Die Kontaktseite wie gewohnt. 58 00:04:15,580 --> 00:04:17,345 Jetzt loggen wir uns ein. 59 00:04:17,345 --> 00:04:19,235 Um sich bei unserer Anwendung anzumelden, 60 00:04:19,235 --> 00:04:25,665 klicken wir auf die Schaltfläche Login und dann würden Sie sehen, dass der Login-Dialog erscheint. 61 00:04:25,665 --> 00:04:32,620 Dann lassen Sie mich als einer der registrierten Benutzer einloggen, 62 00:04:32,620 --> 00:04:37,295 die wir zuvor im Rahmen dieses Kurses registriert haben. 63 00:04:37,295 --> 00:04:39,100 Sobald Sie sich einloggen, 64 00:04:39,100 --> 00:04:41,840 werden Sie sofort bemerken, dass in 65 00:04:41,840 --> 00:04:44,150 der rechten Ecke 66 00:04:44,150 --> 00:04:47,410 der Login-Button jetzt in 67 00:04:47,410 --> 00:04:51,730 Abmelden umgewandelt wurde und der Name des Benutzers hier angezeigt wird. 68 00:04:51,730 --> 00:04:54,500 Also, wer auch immer eingeloggt ist, wird hier angezeigt. 69 00:04:54,500 --> 00:04:56,110 Sie könnten 70 00:04:56,110 --> 00:05:00,925 dies im Prinzip auch durch das Bild des Benutzers ersetzen. 71 00:05:00,925 --> 00:05:03,715 Dafür müssen Sie mehr Änderungen 72 00:05:03,715 --> 00:05:07,790 sowohl am Client als auch am Server vornehmen, um die Bildanzeige hier zu unterstützen. 73 00:05:07,790 --> 00:05:10,570 Aber im Moment zeige ich Ihnen nur, wie wir 74 00:05:10,570 --> 00:05:14,260 die Benutzerinformationen hier leicht anzeigen können. 75 00:05:14,260 --> 00:05:17,200 Dies erfordert also eine geringfügige Änderung am Kopf der 76 00:05:17,200 --> 00:05:20,335 Komponente, wo ich 77 00:05:20,335 --> 00:05:23,410 den Benutzernamen von einem Dienst abrufen kann, 78 00:05:23,410 --> 00:05:27,060 der als OAuth-Dienst bezeichnet wird, über den wir in kurzer Zeit sprechen werden. 79 00:05:27,060 --> 00:05:29,420 Sobald sich der Benutzer anmeldet, 80 00:05:29,420 --> 00:05:31,955 dann, wenn Sie jetzt auf Meine Favoriten klicken, 81 00:05:31,955 --> 00:05:35,360 würden Sie feststellen, dass es nichts in meinen Favoriten für den Benutzer gibt. 82 00:05:35,360 --> 00:05:40,815 Offensichtlich, weil der Benutzer noch keine Favoriten ausgewählt hat. 83 00:05:40,815 --> 00:05:44,675 Also, lassen Sie uns jetzt zum Menü gehen und dann im Menü, 84 00:05:44,675 --> 00:05:52,980 lassen Sie mich einen Artikel auswählen und dann werden sie dieses Gericht zu unseren Favoriten hinzufügen. 85 00:05:52,980 --> 00:05:55,230 Wenn Sie hier unten unten gehen, 86 00:05:55,230 --> 00:05:58,415 sehen Sie das Herzsymbol dort, 87 00:05:58,415 --> 00:06:02,655 klicken Sie darauf und Sie werden sehen, dass dies in Die Favoriten hinzugefügt werden würde. 88 00:06:02,655 --> 00:06:06,620 Die Tatsache, dass dies in Die Favoriten hinzugefügt wurde, wird durch 89 00:06:06,620 --> 00:06:12,790 die Änderung des Symbols hier von einem ungefüllten Herzen zu einem gefüllten Herzen angezeigt. 90 00:06:12,790 --> 00:06:15,790 Nun, wenn Sie zu einem anderen Gericht gehen, 91 00:06:15,790 --> 00:06:19,080 würden Sie bemerken, dass dies ein ungefülltes Herz hat, 92 00:06:19,080 --> 00:06:22,795 was bedeutet, dass dies noch nicht zu unseren Favoriten gehört. 93 00:06:22,795 --> 00:06:25,070 Also, lassen Sie mich einen weiteren Artikel zu 94 00:06:25,070 --> 00:06:29,990 meinen Favoriten hinzufügen und dann lassen Sie uns auch einen dritten Artikel zu meinen Favoriten hinzufügen. 95 00:06:29,990 --> 00:06:37,455 Also, jetzt werden Sie sehen, dass, wenn ich jetzt zu Meine Favoriten gehe, 96 00:06:37,455 --> 00:06:42,560 hier eine Reihe von Meine Favoriten angezeigt wird. 97 00:06:42,560 --> 00:06:46,610 Also, Sie haben gesehen, dass ich diese drei Gerichte gerade zu Meine Favoriten hinzugefügt habe. 98 00:06:46,610 --> 00:06:48,820 Also, diese werden hier angezeigt. 99 00:06:48,820 --> 00:06:57,100 Dies wird also verfolgt, indem der Favoriten-Endpunkt auf der Serverseite verwendet wird 100 00:06:57,100 --> 00:06:59,870 , den ich als Teil Ihrer letzten Zuweisung implementiert habe. 101 00:06:59,870 --> 00:07:05,554 Also, wenn Sie diese Zuweisung richtig gemacht haben, sollte dieses Teil wie erwartet funktionieren. 102 00:07:05,554 --> 00:07:09,310 Jetzt können wir auch „Mein Favorit“ ändern. 103 00:07:09,310 --> 00:07:11,320 So, zum Beispiel, in der rechten Ecke hier, 104 00:07:11,320 --> 00:07:14,165 sehen Sie diesen Schalter Löschen hier. 105 00:07:14,165 --> 00:07:16,320 Also, lassen Sie mich das einschalten. 106 00:07:16,320 --> 00:07:17,730 Wenn Sie es also aktivieren, 107 00:07:17,730 --> 00:07:22,025 sehen Sie sofort die drei roten Kreuze 108 00:07:22,025 --> 00:07:27,630 am unteren Rand dieser drei Elemente in „Meine Favoriten“. 109 00:07:27,630 --> 00:07:29,905 Wenn ich es ausklicke, verschwinden sie. 110 00:07:29,905 --> 00:07:36,750 Dies ist eine Möglichkeit, die Löschschaltflächen in Ihren Favoriten und dann zu aktivieren. 111 00:07:36,750 --> 00:07:40,965 Lassen Sie mich also fortfahren und löschen Sie eines der Elemente aus Meine Favoriten. 112 00:07:40,965 --> 00:07:42,515 Also, wenn ich auf diese Schaltfläche klicke, 113 00:07:42,515 --> 00:07:47,540 werden Sie sofort feststellen, dass das Element aus Meine Favoriten gelöscht wird 114 00:07:47,540 --> 00:07:50,405 und sofort verschwindet und Meine Favoriten 115 00:07:50,405 --> 00:07:54,780 aktualisiert wird und Sie sehen, dass der resultierende Wert hier angezeigt wird. 116 00:07:54,780 --> 00:07:56,115 Gleichzeitig 117 00:07:56,115 --> 00:07:58,530 ist dieser Schalter „Löschen“ deaktiviert, 118 00:07:58,530 --> 00:08:01,250 sodass die Löschschaltflächen nicht mehr sichtbar sind. 119 00:08:01,250 --> 00:08:07,610 Ich kann die Lösch-Buttons immer wieder einschalten, indem ich hier auf das Ein- und Ausschalten klicke. 120 00:08:07,610 --> 00:08:11,210 Beachten Sie also, dass die Meine Favoriten nur 121 00:08:11,210 --> 00:08:15,790 für Benutzer angezeigt werden, die am System angemeldet sind. 122 00:08:15,790 --> 00:08:21,260 So bemerken Sie sofort eine Reihe von Änderungen, die am 123 00:08:21,260 --> 00:08:23,540 Angular Client vorgenommen wurden, um 124 00:08:23,540 --> 00:08:26,930 einige dieser zusätzlichen Funktionen zu unterstützen, die Sie hier sehen. 125 00:08:26,930 --> 00:08:31,190 Sie haben auch gesehen, dass die Anmelde- und Abmeldefunktion hier unterstützt wurde. 126 00:08:31,190 --> 00:08:33,000 Wenn ich also auf die Schaltfläche Abmelden klicke, 127 00:08:33,000 --> 00:08:35,930 bemerken Sie sofort, dass der Benutzer abgemeldet wird 128 00:08:35,930 --> 00:08:39,800 und der Benutzername von dort verschwindet, 129 00:08:39,800 --> 00:08:44,250 und so wird die Schaltfläche auch in die Login-Taste umgewandelt. 130 00:08:44,560 --> 00:08:49,760 Damit bemerken Sie, wie mein Angular-Client 131 00:08:49,760 --> 00:08:54,880 aktualisiert wurde, um den neuen REST-API-Server zu verwenden, 132 00:08:54,880 --> 00:08:59,100 um die Favoriten zu unterstützen, die gespeichert werden und auf der Serverseite und 133 00:08:59,100 --> 00:09:04,930 dann automatisch in meine Client-Anwendung reflektiert werden, wie hier gezeigt. 134 00:09:04,930 --> 00:09:08,305 Lassen Sie uns einen kurzen Rundgang durch 135 00:09:08,305 --> 00:09:14,160 den Angular-Code machen, den ich für Sie im GitHub-Repository bereitgestellt habe, 136 00:09:14,160 --> 00:09:17,710 und sehen Sie auch, wie wir Teile des Codes geändert haben, 137 00:09:17,710 --> 00:09:21,655 um die aktualisierte Angular-Anwendung zu implementieren. 138 00:09:21,655 --> 00:09:24,310 Sie werden feststellen, dass es einen neuen Dienst gibt 139 00:09:24,310 --> 00:09:27,130 , den ich hier eingeführt habe, namens Auth Service. 140 00:09:27,130 --> 00:09:29,295 Der Authentifizierungsdienst kümmert sich um 141 00:09:29,295 --> 00:09:35,985 alle authentifizierungsbezogenen Aktionen für die Angular-Anwendung. 142 00:09:35,985 --> 00:09:37,715 Im Authentifizierungsdienst 143 00:09:37,715 --> 00:09:40,760 würden Sie sofort bemerken, dass ich 144 00:09:40,760 --> 00:09:45,545 eine Reihe von Informationen habe, die ich hier konfiguriert habe. 145 00:09:45,545 --> 00:09:47,985 Da Sie Angular bereits kennen, 146 00:09:47,985 --> 00:09:52,535 sollten Sie in der Lage sein, alles, was hier geschrieben wird, einfach zu verarbeiten. 147 00:09:52,535 --> 00:09:57,355 Beachten Sie insbesondere, dass 148 00:09:57,355 --> 00:09:59,240 ich innerhalb des Authentifizierungsdienstes selbst Informationen wie 149 00:09:59,240 --> 00:10:00,815 zum Beispiel den TokenKey speichere, der 150 00:10:00,815 --> 00:10:06,985 der Schlüssel für den lokalen Speicher ist, in dem ich das JSON Web Token speichere, 151 00:10:06,985 --> 00:10:11,500 und auch einige zusätzliche Variablen 152 00:10:11,500 --> 00:10:16,310 hier, wo ich den Benutzernamen verfolge und wo ich bin authentifiziert, 153 00:10:16,310 --> 00:10:21,955 und verfolgen Sie auch das JSON Web Token hier. 154 00:10:21,955 --> 00:10:28,540 Lassen Sie uns nun beginnen, indem wir uns ansehen, wann sich der Benutzer anmeldet. 155 00:10:28,540 --> 00:10:30,290 Wenn sich der Benutzer anmeldet, 156 00:10:30,290 --> 00:10:37,135 wird diese Funktion namens Login in unserem Authentifizierungsdienst hier aufgerufen, 157 00:10:37,135 --> 00:10:40,350 und wenn der Login im Authentifizierungsdienst aufgerufen wird, 158 00:10:40,350 --> 00:10:44,730 wird dies in einem Parameter namens user übergeben, 159 00:10:44,730 --> 00:10:49,665 der den Benutzernamen und das Passwort als Teil des JavaScript-Objekts des Benutzers enthält. 160 00:10:49,665 --> 00:10:57,890 Also, an dieser Stelle mache ich einen HTTP-Beitrag zur BaseURL plus Benutzer/Login. 161 00:10:57,890 --> 00:11:00,320 Beachten Sie auch, dass 162 00:11:00,320 --> 00:11:06,030 ich hier den AuthResponse als Qualifier hier bereitstelle. 163 00:11:06,030 --> 00:11:09,945 Der AuthResponse ist nichts anderes als eine Schnittstelle, die ich hier implementiert habe, 164 00:11:09,945 --> 00:11:11,350 ganz oben hier. 165 00:11:11,350 --> 00:11:14,295 Diese Schnittstelle gibt also im Wesentlichen 166 00:11:14,295 --> 00:11:16,860 die Informationen an, die als 167 00:11:16,860 --> 00:11:19,670 meine Authentifizierungsantwort von der Serverseite zurückkommen werden, 168 00:11:19,670 --> 00:11:22,690 die Struktur der JSON-Daten, die 169 00:11:22,690 --> 00:11:25,690 von der Serverseite zurückkommen, und die entsprechenden JavaScript-Objekte. 170 00:11:25,690 --> 00:11:28,865 Sie bemerken also, dass wir beim Aktualisieren des Servers 171 00:11:28,865 --> 00:11:32,370 sicherstellen, dass der Server den Status, den 172 00:11:32,370 --> 00:11:37,035 Erfolg, das Flag und das Token im String-Index zurücksendet. 173 00:11:37,035 --> 00:11:42,000 Also, diese Informationen werden hier erhalten. 174 00:11:42,000 --> 00:11:44,240 Nun, wenn ich einen Beitrag dazu mache, 175 00:11:44,240 --> 00:11:52,975 übergebe ich den Benutzernamen und das Passwort an den Beitrag auf diesem /users/login Endpunkt. 176 00:11:52,975 --> 00:11:58,375 Wenn die Antwort von der Antwort zurückkommt, 177 00:11:58,375 --> 00:12:03,490 enthält die Antwortnachricht selbst, wie wir gesehen haben, 178 00:12:03,490 --> 00:12:06,525 den Erfolg, das Token-Feld 179 00:12:06,525 --> 00:12:09,885 und auch die Statusmeldung hier. 180 00:12:09,885 --> 00:12:11,950 Aus der Antwortnachricht 181 00:12:11,950 --> 00:12:16,960 extrahiere ich das Token und übergebe es dann an diese Funktion, die ich hier implementiere, 182 00:12:16,960 --> 00:12:20,415 lokale Funktion hier, genannt storeUserCredentials. 183 00:12:20,415 --> 00:12:30,295 Das wird also an meine Anwendung zurückgegeben und auf meiner Clientseite 184 00:12:30,295 --> 00:12:32,220 im lokalen Speicher gespeichert. 185 00:12:32,220 --> 00:12:34,545 Dann, von dieser Funktion, 186 00:12:34,545 --> 00:12:37,870 gebe ich diese Informationen zurück an 187 00:12:37,870 --> 00:12:43,160 die aufrufende Funktion, von der ich den Anmeldeprozess initiiert habe. 188 00:12:43,160 --> 00:12:51,610 Auf diese Weise werde ich meiner Login-Komponente anzeigen, dass die Anmeldung erfolgreich war, 189 00:12:51,610 --> 00:12:56,345 und dann werde ich auch den Benutzernamen an meine Login-Komponente übergeben, 190 00:12:56,345 --> 00:12:59,680 die dann diese Informationen an die Header-Komponente weitergibt, 191 00:12:59,680 --> 00:13:03,860 und die Header-Komponente verwendet dies, um den Benutzernamen auf 192 00:13:03,860 --> 00:13:08,830 die Symbolleiste oben dort, 193 00:13:08,830 --> 00:13:11,145 und auch wir fangen den Fehler hier. 194 00:13:11,145 --> 00:13:16,390 Dies ist also eine sehr einfache Implementierung, wie wir den Login durchgeführt haben. 195 00:13:16,390 --> 00:13:17,840 Wenn Sie sich abmelden, 196 00:13:17,840 --> 00:13:20,735 beachten Sie, was ich tue, wenn der Benutzer eine Abmeldung anruft. 197 00:13:20,735 --> 00:13:22,070 Wenn der Benutzer eine Abmeldung aufruft, 198 00:13:22,070 --> 00:13:24,560 zerstöre ich einfach 199 00:13:24,560 --> 00:13:26,845 die Anmeldeinformationen des Benutzers, einschließlich des Wegwerfens 200 00:13:26,845 --> 00:13:33,085 des JSON-Web-Token, das ich erhalten habe, als ich mich bei meiner Anwendung angemeldet habe. 201 00:13:33,085 --> 00:13:37,010 Dann sind einige zusätzliche Hilfsfunktionen, die ich hier mit dem Namen 202 00:13:37,010 --> 00:13:40,920 GetUserName implementiert habe, angemeldet und getToken, 203 00:13:40,920 --> 00:13:45,370 was von meinen anderen Anwendungen, 204 00:13:45,370 --> 00:13:50,140 anderen Komponenten und Diensten nützlich sein wird. 205 00:13:50,140 --> 00:13:57,375 Sehen wir uns nun einige der Hilfsfunktionen an, die wir hier implementiert haben. 206 00:13:57,375 --> 00:14:04,685 Daher werden die LoadUserCredentials die Anmeldeinformationen aus dem lokalen Speicher abrufen. 207 00:14:04,685 --> 00:14:10,800 Sie bemerken also, dass ich hier localStorage aufrufe und dann getItem sage. 208 00:14:10,800 --> 00:14:12,750 So verwendet der LocalStorage hier 209 00:14:12,750 --> 00:14:17,305 den lokalen Speicher des Webbrowsers, der von Standard-Webbrowsern unterstützt wird, 210 00:14:17,305 --> 00:14:19,140 und speichert die Informationen dort, 211 00:14:19,140 --> 00:14:21,620 und dann ruft er diese Informationen dort ab. 212 00:14:21,620 --> 00:14:23,830 Dann, von dort, die Anmeldeinformationen, 213 00:14:23,830 --> 00:14:25,745 wenn sie gültig sind, 214 00:14:25,745 --> 00:14:27,950 dann werden diese Anmeldeinformationen hier eingerichtet. 215 00:14:27,950 --> 00:14:32,735 Also, alle diese Variablen, die ich hier definiert habe, werden mit 216 00:14:32,735 --> 00:14:38,965 den entsprechenden Informationen initialisiert, nachdem sie aus dem LocalStorage abgerufen wurden. 217 00:14:38,965 --> 00:14:42,560 Nun wird die StoreUserCredentials Funktion 218 00:14:42,560 --> 00:14:46,285 , die ich hier implementiert habe, von der Anmeldemethode aufgerufen. 219 00:14:46,285 --> 00:14:50,165 Wenn diese Informationen übergeben werden, werden 220 00:14:50,165 --> 00:14:52,290 die Anmeldeinformationen übergeben. Diese 221 00:14:52,290 --> 00:14:57,665 Informationen werden zu diesem Zeitpunkt mit diesem Schlüssel im LocalStorage gespeichert. 222 00:14:57,665 --> 00:15:00,825 Dann 223 00:15:00,825 --> 00:15:05,510 richten die UseCredentials grundsätzlich alle Variablen ein, die ich im Authentifizierungsdienst habe. 224 00:15:05,510 --> 00:15:07,285 Es richtet also das Token ein, 225 00:15:07,285 --> 00:15:09,225 es richtet den Benutzernamen ein 226 00:15:09,225 --> 00:15:14,270 und richtet dann die IsAuthenticated Funktion hier ein. 227 00:15:14,270 --> 00:15:17,590 Beachten Sie also, dass der Benutzername selbst hier, 228 00:15:17,590 --> 00:15:20,865 ich habe es als ein Thema deklariert, 229 00:15:20,865 --> 00:15:23,595 das hier nichts anderes als ein beobachtbares ist. 230 00:15:23,595 --> 00:15:27,410 Also, deshalb, wenn ich sage, 231 00:15:27,410 --> 00:15:30,705 SendUserName hier, sage ich Anmeldeinformationen Benutzername. 232 00:15:30,705 --> 00:15:34,780 Also, dieser SendUserName wurde hier oben implementiert, 233 00:15:34,780 --> 00:15:40,080 beachten Sie, dass hier der beobachtbare Wert zurückgesendet wird. 234 00:15:40,080 --> 00:15:43,305 Also, deshalb sage ich diesen Benutzernamen als nächstes. 235 00:15:43,305 --> 00:15:45,370 Also, das Beobachtbare. 236 00:15:45,370 --> 00:15:49,630 Wird den Namen zurücksenden, der 237 00:15:49,630 --> 00:15:55,130 als Parameter an diejenigen, die sich registriert haben, um dies beobachtbar zu beobachten. 238 00:15:55,130 --> 00:15:59,070 Also dies beobachtbar, ich werde dies von 239 00:15:59,070 --> 00:16:03,980 meiner Header-Komponente beobachten und so, wenn sich der Benutzername ändert, 240 00:16:03,980 --> 00:16:09,870 entweder von undefiniert zu einem bestimmten Benutzernamen oder umgekehrt, 241 00:16:09,870 --> 00:16:13,040 dann kann ich meine Symbolleiste in 242 00:16:13,040 --> 00:16:17,670 der Header-Komponente aktualisieren, um zu reflektieren, ob der Benutzer eingeloggt oder abgemeldet ist. 243 00:16:17,670 --> 00:16:21,770 Also, das wird mit diesem UseCredentials eingerichtet. 244 00:16:21,770 --> 00:16:29,010 Jetzt setzt die DestroyUserCredentials das Authentifizierungstoken grundsätzlich auf undefined. 245 00:16:29,010 --> 00:16:34,320 Es löscht den Benutzernamen und setzt dann die IsAuthenticated auf false und 246 00:16:34,320 --> 00:16:37,560 entfernt diese Informationen dann aus meinem lokalen Speicher, so dass 247 00:16:37,560 --> 00:16:40,930 es im Grunde das jsonwebtoken an diesem Teil wegwirft. 248 00:16:40,930 --> 00:16:43,330 So lieben Sie einen Benutzer. 249 00:16:43,330 --> 00:16:47,150 Sobald das jsonwebtoken verloren ist, kann der Benutzer 250 00:16:47,150 --> 00:16:49,850 sich nicht mehr auf 251 00:16:49,850 --> 00:16:53,305 der Serverseite authentifizieren, da das Token nicht mehr für uns verfügbar ist. 252 00:16:53,305 --> 00:16:58,340 So implementieren wir also die Abmeldefunktion innerhalb unserer Anwendung. 253 00:16:58,340 --> 00:17:01,030 Nehmen Sie sich also etwas Zeit, um den 254 00:17:01,030 --> 00:17:05,350 auth.service hier zu durchlaufen, um zu sehen, wie ich die verschiedenen Funktionen implementiert habe. 255 00:17:05,350 --> 00:17:06,865 Nun, zu diesem Zeitpunkt, 256 00:17:06,865 --> 00:17:13,190 bin ich sicher, dass Sie sehr vertraut sind mit der Implementierung von Angular-Anwendungen, 257 00:17:13,190 --> 00:17:17,960 also sollte es nicht so schwierig für Sie sein zu verstehen, wie dieser Code implementiert wird. 258 00:17:17,960 --> 00:17:24,575 Jetzt eine weitere Funktion, auf die ich Ihre Aufmerksamkeit lenken würde, ist das Check JWT-Token, hier. 259 00:17:24,575 --> 00:17:29,040 Diese Funktion kann jederzeit aufgerufen werden, um zu überprüfen und 260 00:17:29,040 --> 00:17:33,360 sicherzustellen, dass unser JSON-Web-Token weiterhin gültig ist. 261 00:17:33,360 --> 00:17:40,500 Also hier schicke ich die Get-Anfrage an Benutzer Schrägschrägscheck JWT-Token. 262 00:17:40,500 --> 00:17:49,450 Daran erinnern, dass wir diese Route auf der Serverseite in der Benutzer.js und. 263 00:17:49,450 --> 00:17:55,385 Von dort aus können wir überprüfen, ob das jsonwebtoken noch gültig ist oder nicht. 264 00:17:55,385 --> 00:17:57,855 Wenn das jsonwebtoken ungültig ist, 265 00:17:57,855 --> 00:17:59,170 werden wir die 266 00:17:59,170 --> 00:18:03,045 Anmeldeinformationen des Benutzers zerstören und dann erwarten, dass der Benutzer sich erneut anmeldet. 267 00:18:03,045 --> 00:18:06,550 Wenn das jsonwebtoken gültig ist, ist es in Ordnung und 268 00:18:06,550 --> 00:18:10,375 wir können fortfahren, damit der Benutzer 269 00:18:10,375 --> 00:18:14,540 erkennen kann, dass wir angemeldet sind.Also, selbst wenn Sie 270 00:18:14,540 --> 00:18:18,665 Ihren Browser schließen und dann den Browser erneut geöffnet und dann Ihre Angular-Anwendung wieder geöffnet haben, 271 00:18:18,665 --> 00:18:26,625 wenn Sie sich früher angemeldet hatten und die jsonwebtoken wurde im lokalen Speicher gespeichert, 272 00:18:26,625 --> 00:18:28,930 es kann von dort abgerufen werden und dann 273 00:18:28,930 --> 00:18:33,740 wird Ihr Anmeldestatus innerhalb Ihrer Angular-Anwendung wiederhergestellt. 274 00:18:33,740 --> 00:18:36,420 Wenn das json-Web-Token abgelaufen 275 00:18:36,420 --> 00:18:38,635 ist, dürfen wir uns nicht anmelden. 276 00:18:38,635 --> 00:18:44,280 Jedes Mal, wenn Sie Ihre Angular-Anwendung in Ihrem Browser aktualisieren oder 277 00:18:44,280 --> 00:18:47,290 Ihre Angular-Anwendung in Ihrem Browser neu laden, 278 00:18:47,290 --> 00:18:50,550 überprüfen Sie das jsonwebtoken, um sicherzustellen, dass es immer noch gültig ist. 279 00:18:50,550 --> 00:18:53,095 Wenn es nicht gültig ist, wird der Benutzer 280 00:18:53,095 --> 00:18:56,200 gelöscht und so müssen Sie sich erneut anmelden. 281 00:18:56,200 --> 00:19:00,370 Wenn nicht, werden die Informationen des angemeldeten Benutzers 282 00:19:00,370 --> 00:19:05,020 aus dem LocalStorage abgerufen und dann innerhalb meiner Angular-Anwendung initialisiert. 283 00:19:05,020 --> 00:19:09,765 Wenn Ihr Server zu irgendeinem Zeitpunkt 284 00:19:09,765 --> 00:19:16,880 mit einer 401 Nicht autorisierten Nachricht antwortet, 285 00:19:16,880 --> 00:19:22,045 werden wir auch zu diesem Zeitpunkt erneut kreuzen, um zu sehen, dass das jsonwebtoken gültig ist und das dann zulassen. 286 00:19:22,045 --> 00:19:26,960 Wir werden das mit etwas tun, das die Http-Abfangjäger genannt wird. 287 00:19:26,960 --> 00:19:30,630 Lassen Sie mich eine Tour zu diesem Teil des Codes machen 288 00:19:30,630 --> 00:19:35,180 und Ihnen dann erklären, wie die Abfangjäger in kurzer Zeit funktionieren. 289 00:19:35,180 --> 00:19:38,635 Also jetzt zusätzlich zu AuthService, 290 00:19:38,635 --> 00:19:45,545 im Dienstordner selbst sehen Sie diese Datei namens AuthInterceptors.ts Datei. 291 00:19:45,545 --> 00:19:51,285 Also öffne das und du wirst sehen, dass ich hier Http Interceptors implementiert habe. 292 00:19:51,285 --> 00:19:54,435 Nun, was diese Http Interceptoren tun, 293 00:19:54,435 --> 00:20:00,780 wird dies mit dem Http Client unterstützt, der als Teil von Angular 4.4 kommt. 294 00:20:00,780 --> 00:20:04,080 Was die HTTP-Abfangjäger tun, ist, dass sie 295 00:20:04,080 --> 00:20:06,180 ausgehende Anfragen abfangen können, die 296 00:20:06,180 --> 00:20:09,695 Änderungen an der Anforderungsnachricht vornehmen, bevor sie gesendet wird. 297 00:20:09,695 --> 00:20:13,530 Ebenso können sie eingehende Antwortnachrichten abfangen und dann 298 00:20:13,530 --> 00:20:15,660 die eingehende Antwortnachricht ändern, bevor 299 00:20:15,660 --> 00:20:18,970 die Antwort an die Angular-Anwendung übergeben wird. 300 00:20:18,970 --> 00:20:22,920 Also durch Abfangen, wie funktioniert dieser Abfangjäger? 301 00:20:22,920 --> 00:20:25,625 Damit dieser Interceptor funktioniert, 302 00:20:25,625 --> 00:20:28,620 implementieren wir, wie Sie sehen, 303 00:20:28,620 --> 00:20:37,285 eine Klasse, die als HttpInterceptor aufgerufen wird, indem wir den HttpInterceptor erweitern. 304 00:20:37,285 --> 00:20:39,805 Also hier habe ich den AuthInterceptor implementiert. 305 00:20:39,805 --> 00:20:42,175 Was macht dieser AuthInterceptor? 306 00:20:42,175 --> 00:20:47,660 Dieser AuthInterceptor erfasst im Grunde ausgehende Anforderungen. 307 00:20:47,660 --> 00:20:51,785 Um eine ausgehende Anfrage zu erfassen, rufen Sie diese Funktion namens intercept auf 308 00:20:51,785 --> 00:20:56,700 und geben Sie dann Zugriff auf die Anfrage und die nächste. 309 00:20:56,700 --> 00:21:00,550 Sie könnten also 310 00:21:00,550 --> 00:21:05,080 eine Reihe von Abfangjäger hintereinander verketten, wenn Sie sich dafür entscheiden, 311 00:21:05,080 --> 00:21:11,050 so dass sie die ausgehenden Anfragen nacheinander bearbeiten können, wenn Sie dies wünschen. 312 00:21:11,050 --> 00:21:20,260 Was dieser Abfang tut, ist, dass er Ihnen Zugriff auf die HTTP-Anforderungsnachricht gibt. 313 00:21:20,260 --> 00:21:23,300 Wenn ich also Zugriff auf die HTTP-Anforderungsnachricht bekomme, 314 00:21:23,300 --> 00:21:27,810 würden Sie feststellen, dass ich hier den Authentifizierungsdienst injiziere. 315 00:21:27,810 --> 00:21:33,870 Im Gegensatz zu der Art, wie wir Dienste in Komponenten injizieren, 316 00:21:33,870 --> 00:21:37,295 zeige ich hier die Verwendung eines Injektors. 317 00:21:37,295 --> 00:21:39,995 Ein Injektor ist Teil des Angular-Codes. 318 00:21:39,995 --> 00:21:44,080 Mit einem Injektor können Sie also Dienste oder 319 00:21:44,080 --> 00:21:50,020 andere Komponenten in andere Dienste oder Komponenten injizieren. 320 00:21:50,020 --> 00:21:57,495 Hier sehen Sie, dass ich hier den Authentifizierungsdienst injiziere, indem ich dies verwende. 321 00:21:57,495 --> 00:22:04,690 Jetzt ist ein weiterer Grund, dass, wenn ich den Dienst direkt in meinen Konstruktor injiziere, 322 00:22:04,690 --> 00:22:11,545 es eine zirkuläre Abhängigkeit zwischen dem Interceptor und dem AuthService entwickelt, 323 00:22:11,545 --> 00:22:15,200 und das führt dazu, dass Ihr Code nicht funktioniert. 324 00:22:15,200 --> 00:22:18,190 Das ist also eine Arbeit um die Probleme. 325 00:22:18,190 --> 00:22:21,430 So dass Ihr Abfang- weil ich den 326 00:22:21,430 --> 00:22:25,810 AuthService brauche, um das Token vom 327 00:22:25,810 --> 00:22:31,680 AuthService und AuthService zu erhalten, wiederum von diesem Interceptor abhängt. 328 00:22:31,680 --> 00:22:38,760 Deshalb injiziere ich in diesem Fall explizit den AuthService, um die Schleife zu brechen. 329 00:22:38,760 --> 00:22:42,630 Nun, das ist etwas, das ich durch Versuch 330 00:22:42,630 --> 00:22:47,080 und Irrtum herausgefunden habe, ging ich zunächst voran und injizierte einfach 331 00:22:47,080 --> 00:22:49,600 die ungeraden Dienste an den Konstruktor und fand dann heraus, dass 332 00:22:49,600 --> 00:22:54,270 Angular den Code nicht kompilierte, dann fand ich heraus, dass 333 00:22:54,270 --> 00:23:01,510 es einen Fehler gab und dann nach einer Google-Suche dann 334 00:23:01,510 --> 00:23:05,330 herausgefunden, dass dies eine alternative Möglichkeit ist, 335 00:23:05,330 --> 00:23:09,620 dasselbe zu handhaben, und das funktioniert viel besser für unsere Anwendung. 336 00:23:09,620 --> 00:23:13,560 Sobald ich also den AuthService vom Dienst injiziere, bekomme ich 337 00:23:13,560 --> 00:23:17,555 das Token und merke dann, was ich hier mache. 338 00:23:17,555 --> 00:23:23,200 Hier sage ich clone const auth req req clone. 339 00:23:23,200 --> 00:23:29,380 Also werden wir die Anfrage klonen und dann werden wir in den Headern einrichten. 340 00:23:29,380 --> 00:23:32,110 Also werden wir sagen, req Header setzen 341 00:23:32,110 --> 00:23:35,240 Autorisierung und dann bemerken, was ich 342 00:23:35,240 --> 00:23:38,005 den Autorisierungs-Header einrichte, Bearer. 343 00:23:38,005 --> 00:23:42,100 Plus AuthToken. 344 00:23:42,100 --> 00:23:47,360 Also richte ich im Autorisierungs-Header den Bearer und AuthToken hier ein. 345 00:23:47,360 --> 00:23:49,550 So richte ich 346 00:23:49,550 --> 00:23:53,080 den Autorisierungsheader in der 347 00:23:53,080 --> 00:23:57,465 ausgehenden Anforderungsnachricht in meiner Angular-Anwendung ein. Also genau da. 348 00:23:57,465 --> 00:24:01,660 Und so habe ich sichergestellt, dass alle ausgehenden Anfragen 349 00:24:01,660 --> 00:24:06,645 den Autorisierungs-Header eingerichtet haben, bevor sie an die Serverseite übergeben werden. 350 00:24:06,645 --> 00:24:12,775 Und danach werden wir es einfach an den nächsten Interceptor weiterleiten, falls es existiert, 351 00:24:12,775 --> 00:24:15,140 oder an die ausgehende Warteschlange, 352 00:24:15,140 --> 00:24:19,935 so dass die Anforderungsnachricht an die Serverseite gesendet wird. 353 00:24:19,935 --> 00:24:24,830 In ähnlicher Weise habe ich einen anderen Interceptor, den ich hier implementiert habe. 354 00:24:24,830 --> 00:24:30,260 Dieser Interceptor fängt alle nicht autorisierten Antwortnachrichten ab 355 00:24:30,260 --> 00:24:31,800 , die von der Serverseite zurückkommen. 356 00:24:31,800 --> 00:24:37,150 Also, wenn der Server mit einer 401 Nicht autorisierten Antwortnachricht antwortet. 357 00:24:37,150 --> 00:24:39,550 Also an diesem Punkt wieder, das gleiche, 358 00:24:39,550 --> 00:24:42,760 ich habe den AuthService hier eingerichtet, 359 00:24:42,760 --> 00:24:46,410 und dann, im Inneren, dann werde ich sagen, 360 00:24:46,410 --> 00:24:49,060 behandeln, wenn Fehler. 361 00:24:49,060 --> 00:24:54,800 Also hier bekomme ich das HttpEvent hier. 362 00:24:54,800 --> 00:25:04,580 Das HttpEvent ist ein Objekt auf niedrigerer Ebene als eine Anfrage, 363 00:25:04,580 --> 00:25:08,630 aber das ermöglicht es uns, Zugriff auf die eingehende Antwortnachricht 364 00:25:08,630 --> 00:25:12,530 zu erhalten, und dann werden wir überprüfen, ob es einen Fehler gibt, 365 00:25:12,530 --> 00:25:17,235 und dann, ob Fehler eine Instanz der HTTP-Fehlerantwort ist, 366 00:25:17,235 --> 00:25:20,770 und wenn der Fehlerstatus 401 ist. 367 00:25:20,770 --> 00:25:28,220 Was bedeutet, dass ich gerade festgestellt habe, dass der Server eine 401-Fehlermeldung zurückgeschickt hat. 368 00:25:28,220 --> 00:25:32,305 Was bedeutet, dass es auf der Serverseite ein Autorisierungsproblem gab. 369 00:25:32,305 --> 00:25:33,790 Dann werde ich an diesem Punkt 370 00:25:33,790 --> 00:25:37,620 das json-Web-Token überprüfen, um sicherzustellen, dass das json-Web-Token immer noch gültig ist. 371 00:25:37,620 --> 00:25:39,030 Wenn es nicht gültig ist, 372 00:25:39,030 --> 00:25:44,910 verwerfe ich meine Anmeldeinformationen und erwarte, dass sich der Benutzer erneut anmeldet. 373 00:25:44,910 --> 00:25:48,880 Auf diese Weise werde ich sicherstellen, dass, wenn mein json-Web-Token 374 00:25:48,880 --> 00:25:53,480 beim Versuch abläuft, Daten zu holen, 375 00:25:53,480 --> 00:25:58,045 das immer noch von hier abgefangen wird, denn wenn der Server mit einem 401 antwortet, 376 00:25:58,045 --> 00:26:00,280 werde ich das abfangen und dann 377 00:26:00,280 --> 00:26:03,830 mein json-Web-Token löschen und ich erwarte, dass sich der Benutzer erneut anmeldet. 378 00:26:03,830 --> 00:26:08,750 Wir können den Benutzer auch auf die Anmeldeseite umleiten, wenn Sie möchten, 379 00:26:08,750 --> 00:26:12,330 aber mit der Angular-Anwendung ist es etwas komplizierter 380 00:26:12,330 --> 00:26:16,275 , dies zu tun und ich wollte Sie nicht verwirren, indem Sie all das tun. 381 00:26:16,275 --> 00:26:19,385 Stattdessen melde ich mich einfach 382 00:26:19,385 --> 00:26:22,500 an diesem Punkt aus und zerstöre dann die Benutzeranmeldeinformationen, 383 00:26:22,500 --> 00:26:25,855 so dass der Benutzer sich an diesem Punkt anmeldet. 384 00:26:25,855 --> 00:26:33,880 Also, einfache Handhabung, wie wir den Autorisierungs-Header in die ausgehende Anfrage injizieren 385 00:26:33,880 --> 00:26:38,850 und auch alle 401 nicht autorisierten Nachrichten abfangen 386 00:26:38,850 --> 00:26:40,820 , die von der Serverseite zurückkommen. 387 00:26:40,820 --> 00:26:45,860 Sie sehen also, wie diese zusätzlichen Änderungen 388 00:26:45,860 --> 00:26:55,125 an Ihrer Angular-Anwendung vorgenommen werden müssen, damit sie mit Ihrer Serverseite funktioniert. 389 00:26:55,125 --> 00:26:58,200 Wenn Sie mit dem Authentifizierungsteil keine Authentifizierung hatten und wenn Sie nur 390 00:26:58,200 --> 00:27:02,485 auf die restlichen API-Endpunkte zugreifen und Operationen abrufen 391 00:27:02,485 --> 00:27:05,240 möchten, müssen Sie sich nicht einmal um diese Dinge kümmern. Es 392 00:27:05,240 --> 00:27:06,790 ist keine Authentifizierung erforderlich. 393 00:27:06,790 --> 00:27:09,140 Daten können sehr einfach abgerufen werden. 394 00:27:09,140 --> 00:27:10,590 Aber für jeden Post-, 395 00:27:10,590 --> 00:27:12,395 Put- und Löschvorgang 396 00:27:12,395 --> 00:27:15,630 müssen wir alle diese Funktionen unterstützen. 397 00:27:15,630 --> 00:27:21,375 Das ist der Grund, warum ich den Authentifizierungsteil in meine Anwendung implementiert habe. 398 00:27:21,375 --> 00:27:23,995 Auch wie ich bereits gezeigt habe, 399 00:27:23,995 --> 00:27:26,985 wenn kein Benutzer angemeldet ist, 400 00:27:26,985 --> 00:27:32,570 dann werden wir nicht in der Lage sein, zum Endpunkt meiner Favoriten zu navigieren, 401 00:27:32,570 --> 00:27:35,035 aber wenn ein Benutzer angemeldet ist, 402 00:27:35,035 --> 00:27:40,420 dann werden wir in der Lage sein, die meine Favoriten für den spezifischen Benutzer zu sehen. 403 00:27:40,420 --> 00:27:45,095 Dies wird durch die Verwendung von Routenwächtern in Angular implementiert. 404 00:27:45,095 --> 00:27:47,995 Nun, um diese Routenwächter zu implementieren, 405 00:27:47,995 --> 00:27:52,080 habe ich hier einen anderen Dienst namens AuthGuardService implementiert. 406 00:27:52,080 --> 00:27:54,170 Also in diesem AuthGuardService 407 00:27:54,170 --> 00:27:57,970 haben wir diese Methode namens CanActivate-Methode implementiert, die 408 00:27:57,970 --> 00:28:02,225 wir unterklasse werden, um dies zu implementieren. 409 00:28:02,225 --> 00:28:05,705 Und in der CanActivate-Methode 410 00:28:05,705 --> 00:28:08,550 wird die Implementierung einen booleschen Wert zurückgeben, 411 00:28:08,550 --> 00:28:10,090 und in diesem Fall 412 00:28:10,090 --> 00:28:15,630 prüfen wir, ob dieser Benutzer angemeldet ist, 413 00:28:15,630 --> 00:28:18,605 dann werden wir dem Benutzer erlauben zu navigieren. 414 00:28:18,605 --> 00:28:25,480 Andernfalls navigieren Sie den Benutzer zum Endpunkt des Endpunkts. 415 00:28:25,480 --> 00:28:31,175 So wird in diesem Fall der Routenwächter implementiert. 416 00:28:31,175 --> 00:28:33,955 Nun, um diese Route Wache zu nutzen, 417 00:28:33,955 --> 00:28:41,780 werden wir gehen, um zu sehen, wie die Routen aktualisiert werden, um die Routenwächter zu nutzen. 418 00:28:41,780 --> 00:28:44,520 Also in der Datei routes.ts 419 00:28:44,520 --> 00:28:50,435 können Sie sehen, dass für die Favoriten-Komponente, 420 00:28:50,435 --> 00:28:54,510 wir sehen, dass wir den Pfad als Favoriten und die Komponente als 421 00:28:54,510 --> 00:28:58,620 FavoritesComponent angeben und dann spezifizieren wir dieses andere Feld 422 00:28:58,620 --> 00:29:07,785 namens CanActivate, für das wir AuthGuard als Parameter hier angegeben, 423 00:29:07,785 --> 00:29:12,445 und diese AuthGuard ist nichts anderes als der AuthGuard-Dienst, den wir implementiert haben, 424 00:29:12,445 --> 00:29:14,825 der hier importiert wird. 425 00:29:14,825 --> 00:29:20,405 Auf diese Weise, wenn der AuthGuard auf false ausgewertet 426 00:29:20,405 --> 00:29:24,755 wird, werden Sie nicht zur Favoritenkomponente navigieren dürfen 427 00:29:24,755 --> 00:29:28,105 , stattdessen werden Sie zu Hause umgeleitet, 428 00:29:28,105 --> 00:29:36,245 aber wenn der Benutzer angemeldet ist, dann wird der AuthGuard offensichtlich auf true auswerten, 429 00:29:36,245 --> 00:29:37,390 und in diesem Fall 430 00:29:37,390 --> 00:29:41,665 werden Sie in der Lage sein, , um zur Route der Favoriten zu navigieren. 431 00:29:41,665 --> 00:29:49,700 Nun gibt es auch in ähnlicher Weise kleinere Änderungen an den verbleibenden Komponenten, 432 00:29:49,700 --> 00:29:52,200 die es Ihnen ermöglichen, mit 433 00:29:52,200 --> 00:29:57,365 den Feinheiten umzugehen, wie Ihr Client und Server miteinander sprechen. 434 00:29:57,365 --> 00:30:02,555 Beachten Sie insbesondere, wie die Header-Komponente aktualisiert wurde, um 435 00:30:02,555 --> 00:30:08,195 den Status des angemeldeten Benutzers in der Symbolleiste oben anzuzeigen. 436 00:30:08,195 --> 00:30:11,500 Das ist wieder eine weitere interessante Änderung, die ich 437 00:30:11,500 --> 00:30:15,710 an der Header-Komponente in unserer Anwendung vorgenommen habe. 438 00:30:15,710 --> 00:30:20,220 Ich werde das also als Übung für Sie überlassen, um herauszufinden, wie das umgesetzt wurde. 439 00:30:20,220 --> 00:30:22,160 Sehr einfacher Code dort. 440 00:30:22,160 --> 00:30:24,660 Sollte es Ihnen leicht sein, das herauszufinden. 441 00:30:24,660 --> 00:30:28,020 Mit all diesen Änderungen 442 00:30:28,020 --> 00:30:32,095 ist mein Winkelclient nun in der Lage, mit meinem Server zu interagieren. 443 00:30:32,095 --> 00:30:36,540 Lassen Sie mich Ihnen noch einmal zeigen, wie wir einige Kommentare auf dem Server posten können, 444 00:30:36,540 --> 00:30:41,995 und dann sehen Sie den Kommentar sofort in das Gericht reflektiert. 445 00:30:41,995 --> 00:30:45,325 Also, wieder auf unsere Anwendung zurückgehen, 446 00:30:45,325 --> 00:30:50,050 können wir jetzt auf das Menü gehen und dann jedes Gericht hier hochziehen, 447 00:30:50,050 --> 00:30:52,740 und ich kann hier Kommentare zum Gericht posten, 448 00:30:52,740 --> 00:30:59,600 also würde ich sofort die Bewertung hier einrichten, 449 00:30:59,600 --> 00:31:02,540 und meinen Kommentarwert hier. 450 00:31:03,540 --> 00:31:06,700 Beachten Sie, dass ich 451 00:31:06,700 --> 00:31:15,735 meinen Benutzernamen oder den Namen meines Autors hier nicht in das Formular eingebe. 452 00:31:15,735 --> 00:31:18,470 Jetzt 453 00:31:18,470 --> 00:31:19,590 müssen Sie natürlich eingeloggt sein, um einen Kommentar abzugeben. 454 00:31:19,590 --> 00:31:24,520 Wenn Sie also nicht angemeldet sind, wird dieser Kommentar von meinem Server nicht akzeptiert. 455 00:31:24,520 --> 00:31:26,935 Also lassen Sie mich zuerst einloggen. 456 00:31:26,935 --> 00:31:32,890 So kann ich mich hier einloggen. 457 00:31:32,890 --> 00:31:34,220 Und sobald ich mich anmelde, 458 00:31:34,220 --> 00:31:39,255 bemerken Sie sofort, dass die Header-Symbolleiste aktualisiert wird, um meinen Status anzuzeigen. 459 00:31:39,255 --> 00:31:41,375 Jetzt kann ich diesen Kommentar posten. 460 00:31:41,375 --> 00:31:43,990 Und Sie würden bemerken, dass, wenn ich den Kommentar poste, 461 00:31:43,990 --> 00:31:46,440 der Kommentar in die Liste der Kommentare hinzugefügt wird, 462 00:31:46,440 --> 00:31:50,575 und auch bemerken, dass das Autorenfeld hier automatisch ausgefüllt wird. 463 00:31:50,575 --> 00:31:54,040 Denn so richten wir unsere Serverseite ein. 464 00:31:54,040 --> 00:31:55,570 Im Kommentarfeld 465 00:31:55,570 --> 00:31:58,880 haben wir unseren Benutzer als 466 00:31:58,880 --> 00:32:05,890 Verweis auf die Benutzerinformationen eingerichtet, 467 00:32:05,890 --> 00:32:09,755 die wir auf unserer Serverseite speichern, und da wir das Populate, 468 00:32:09,755 --> 00:32:11,585 Mongoose Populate auf der Serverseite verwenden, werden 469 00:32:11,585 --> 00:32:14,080 die Benutzerinformationen automatisch 470 00:32:14,080 --> 00:32:16,715 in die eingehenden Kommentare des Servers aufgefüllt Seite. 471 00:32:16,715 --> 00:32:21,130 So stellen Sie fest, wie ich das nutze, was 472 00:32:21,130 --> 00:32:25,615 der Server bereits für mich bereitstellt, um automatisch die Details auszufüllen. 473 00:32:25,615 --> 00:32:31,180 So, kleinere Änderungen wieder sogar in 474 00:32:31,180 --> 00:32:38,880 die Schüssel Detailseite, um die Verwendung der Kommentare Unterstützung auf der Serverseite widerzuspiegeln. 475 00:32:38,880 --> 00:32:43,769 Damit vervollständige ich die schnelle Darstellung 476 00:32:43,769 --> 00:32:49,575 des Angular Clients, die wir im Rahmen dieser Übung implementiert haben. 477 00:32:49,575 --> 00:32:55,990 Und ich hoffe, dass Sie auch die Details des Codes im Angular-Client durchlaufen 478 00:32:55,990 --> 00:32:59,410 und dann über das, was Sie im Angular-Kurs gelernt haben, nachdenken und sehen, 479 00:32:59,410 --> 00:33:03,105 wie die Modifikationen es uns ermöglichen, 480 00:33:03,105 --> 00:33:06,350 in einem modifizierten Winkelclient 481 00:33:06,350 --> 00:33:09,705 zu implementieren, der jetzt mit dem Server kommunizieren kann und unterstützen dann alle Funktionen 482 00:33:09,705 --> 00:33:17,310 , die wir ursprünglich als Teil sowohl der Client- als auch der Serverseite implementieren wollten.