Nachdem wir die Aktualisierung der serverseitigen Seite abgeschlossen haben,
ist es an der Zeit, zum Angular Client zu wechseln.
Zu Ihrer Bequemlichkeit habe ich Ihnen
das GitHub-Repository zur Verfügung gestellt, das die endgültige Version
des Angular Clients enthält, der mit
unserem REST API Server kommunizieren und dann die verschiedenen Ansichten für unseren Client rendern kann.
Also habe ich die Angular-Anwendung genommen, die wir
im zweiten Kurs dieser Spezialisierung entwickelt haben,
und sie dann modifiziert.
Wir werden eine kurze Tour durch den Code in ein wenig später machen.
Jetzt klonen Sie das
Git-Repository auf Ihren Computer und starten dann Ihren Angular Client
und sehen dann, wie er mit unserer serverseitigen Seite kommuniziert.
Sehen wir uns die Details als nächstes an.
Um mit dieser Übung zu beginnen,
gehen Sie in Ihrem Terminal oder Befehlsfenster zu Ihrem günstigen Standort und geben Sie dann an
der Eingabeaufforderung git clone
https://github.com/jmuppala/conFusion-Angular6.git ein.
Lassen Sie dann die Angular-Anwendung auf Ihren Computer geklont werden.
Sobald das Klonen abgeschlossen ist,
wechseln Sie in den Ordner „Confusion-Angular6“
, der gerade erstellt wurde, wenn Sie dieses Git-Repository klonen.
Dann werden Sie sofort bemerken, dass es bereits eine Reihe von Dateien gibt. Geben Sie
nun an der Eingabeaufforderung npm install ein,
um alle Knotenmodule zu installieren, von
denen diese Angular-Anwendung abhängig ist.
Also, sobald die Knotenmodule oder alle installiert sind,
dann können wir unsere NG starten dienen zu kompilieren und servieren unsere Angular-Anwendung.
Sobald alles von npm install installiert ist,
stellen Sie sicher, dass Ihr MongoDB Server
einsatzbereit ist und auch Ihr REST API Server läuft.
Andernfalls funktioniert Ihr Angular Client nicht.
Also, jetzt, da Sie Ihren Angular Client auf Ihrem Computer installiert haben,
geben Sie an der Eingabeaufforderung ng serve ein und
Ihre Angular-Anwendung wird kompiliert und von ng serve in kurzer Zeit serviert.
Sobald Ihre Angular-Anwendung erfolgreich kompiliert wurde,
gehen Sie zu einem Browser und öffnen Sie Ihre Angular-Anwendung im Browser.
Gehen Sie zum Browser,
in der Adressleiste, lassen Sie mich localhost eingeben: 4200 und
Sie werden sehen, dass Ihre Angular-Anwendung
gestartet wird und auf dem Bildschirm hier sichtbar ist.
Sie werden sofort feststellen, dass Ihre Angular-Anwendung in der
Lage ist, die Daten vom Server zu holen und dann
die verschiedenen Teile Ihrer Angular-Anwendung genau wie
das, was Sie am Ende Ihres Angular-Kurses getan haben.
Wenn Sie über Ordner sprechen,
werden Sie auch sehen, dass die Seite Info auch die Informationen als solche darstellt.
Im Menü sehen Sie, wie die Elemente im Menü
angezeigt werden, wie wir es mit der Angular-Anwendung gesehen haben.
Darüber hinaus habe ich
eine weitere Seite zu der einseitigen Anwendung namens Meine Favoriten hinzugefügt,
zu der Sie nicht navigieren können, da kein Benutzer im System angemeldet ist.
Sie sehen also, dass ich keinen Benutzer im System angemeldet habe.
Deshalb hat es keinen Sinn, meine Favoriten anzugeben,
weil Sie nicht wissen, welcher Benutzer
als Favoriten hier angezeigt werden soll.
Die Kontaktseite wie gewohnt.
Jetzt loggen wir uns ein.
Um sich bei unserer Anwendung anzumelden,
klicken wir auf die Schaltfläche Login und dann würden Sie sehen, dass der Login-Dialog erscheint.
Dann lassen Sie mich als einer der registrierten Benutzer einloggen,
die wir zuvor im Rahmen dieses Kurses registriert haben.
Sobald Sie sich einloggen,
werden Sie sofort bemerken, dass in
der rechten Ecke
der Login-Button jetzt in
Abmelden umgewandelt wurde und der Name des Benutzers hier angezeigt wird.
Also, wer auch immer eingeloggt ist, wird hier angezeigt.
Sie könnten
dies im Prinzip auch durch das Bild des Benutzers ersetzen.
Dafür müssen Sie mehr Änderungen
sowohl am Client als auch am Server vornehmen, um die Bildanzeige hier zu unterstützen.
Aber im Moment zeige ich Ihnen nur, wie wir
die Benutzerinformationen hier leicht anzeigen können.
Dies erfordert also eine geringfügige Änderung am Kopf der
Komponente, wo ich
den Benutzernamen von einem Dienst abrufen kann,
der als OAuth-Dienst bezeichnet wird, über den wir in kurzer Zeit sprechen werden.
Sobald sich der Benutzer anmeldet,
dann, wenn Sie jetzt auf Meine Favoriten klicken,
würden Sie feststellen, dass es nichts in meinen Favoriten für den Benutzer gibt.
Offensichtlich, weil der Benutzer noch keine Favoriten ausgewählt hat.
Also, lassen Sie uns jetzt zum Menü gehen und dann im Menü,
lassen Sie mich einen Artikel auswählen und dann werden sie dieses Gericht zu unseren Favoriten hinzufügen.
Wenn Sie hier unten unten gehen,
sehen Sie das Herzsymbol dort,
klicken Sie darauf und Sie werden sehen, dass dies in Die Favoriten hinzugefügt werden würde.
Die Tatsache, dass dies in Die Favoriten hinzugefügt wurde, wird durch
die Änderung des Symbols hier von einem ungefüllten Herzen zu einem gefüllten Herzen angezeigt.
Nun, wenn Sie zu einem anderen Gericht gehen,
würden Sie bemerken, dass dies ein ungefülltes Herz hat,
was bedeutet, dass dies noch nicht zu unseren Favoriten gehört.
Also, lassen Sie mich einen weiteren Artikel zu
meinen Favoriten hinzufügen und dann lassen Sie uns auch einen dritten Artikel zu meinen Favoriten hinzufügen.
Also, jetzt werden Sie sehen, dass, wenn ich jetzt zu Meine Favoriten gehe,
hier eine Reihe von Meine Favoriten angezeigt wird.
Also, Sie haben gesehen, dass ich diese drei Gerichte gerade zu Meine Favoriten hinzugefügt habe.
Also, diese werden hier angezeigt.
Dies wird also verfolgt, indem der Favoriten-Endpunkt auf der Serverseite verwendet wird
, den ich als Teil Ihrer letzten Zuweisung implementiert habe.
Also, wenn Sie diese Zuweisung richtig gemacht haben, sollte dieses Teil wie erwartet funktionieren.
Jetzt können wir auch „Mein Favorit“ ändern.
So, zum Beispiel, in der rechten Ecke hier,
sehen Sie diesen Schalter Löschen hier.
Also, lassen Sie mich das einschalten.
Wenn Sie es also aktivieren,
sehen Sie sofort die drei roten Kreuze
am unteren Rand dieser drei Elemente in „Meine Favoriten“.
Wenn ich es ausklicke, verschwinden sie.
Dies ist eine Möglichkeit, die Löschschaltflächen in Ihren Favoriten und dann zu aktivieren.
Lassen Sie mich also fortfahren und löschen Sie eines der Elemente aus Meine Favoriten.
Also, wenn ich auf diese Schaltfläche klicke,
werden Sie sofort feststellen, dass das Element aus Meine Favoriten gelöscht wird
und sofort verschwindet und Meine Favoriten
aktualisiert wird und Sie sehen, dass der resultierende Wert hier angezeigt wird.
Gleichzeitig
ist dieser Schalter „Löschen“ deaktiviert,
sodass die Löschschaltflächen nicht mehr sichtbar sind.
Ich kann die Lösch-Buttons immer wieder einschalten, indem ich hier auf das Ein- und Ausschalten klicke.
Beachten Sie also, dass die Meine Favoriten nur
für Benutzer angezeigt werden, die am System angemeldet sind.
So bemerken Sie sofort eine Reihe von Änderungen, die am
Angular Client vorgenommen wurden, um
einige dieser zusätzlichen Funktionen zu unterstützen, die Sie hier sehen.
Sie haben auch gesehen, dass die Anmelde- und Abmeldefunktion hier unterstützt wurde.
Wenn ich also auf die Schaltfläche Abmelden klicke,
bemerken Sie sofort, dass der Benutzer abgemeldet wird
und der Benutzername von dort verschwindet,
und so wird die Schaltfläche auch in die Login-Taste umgewandelt.
Damit bemerken Sie, wie mein Angular-Client
aktualisiert wurde, um den neuen REST-API-Server zu verwenden,
um die Favoriten zu unterstützen, die gespeichert werden und auf der Serverseite und
dann automatisch in meine Client-Anwendung reflektiert werden, wie hier gezeigt.
Lassen Sie uns einen kurzen Rundgang durch
den Angular-Code machen, den ich für Sie im GitHub-Repository bereitgestellt habe,
und sehen Sie auch, wie wir Teile des Codes geändert haben,
um die aktualisierte Angular-Anwendung zu implementieren.
Sie werden feststellen, dass es einen neuen Dienst gibt
, den ich hier eingeführt habe, namens Auth Service.
Der Authentifizierungsdienst kümmert sich um
alle authentifizierungsbezogenen Aktionen für die Angular-Anwendung.
Im Authentifizierungsdienst
würden Sie sofort bemerken, dass ich
eine Reihe von Informationen habe, die ich hier konfiguriert habe.
Da Sie Angular bereits kennen,
sollten Sie in der Lage sein, alles, was hier geschrieben wird, einfach zu verarbeiten.
Beachten Sie insbesondere, dass
ich innerhalb des Authentifizierungsdienstes selbst Informationen wie
zum Beispiel den TokenKey speichere, der
der Schlüssel für den lokalen Speicher ist, in dem ich das JSON Web Token speichere,
und auch einige zusätzliche Variablen
hier, wo ich den Benutzernamen verfolge und wo ich bin authentifiziert,
und verfolgen Sie auch das JSON Web Token hier.
Lassen Sie uns nun beginnen, indem wir uns ansehen, wann sich der Benutzer anmeldet.
Wenn sich der Benutzer anmeldet,
wird diese Funktion namens Login in unserem Authentifizierungsdienst hier aufgerufen,
und wenn der Login im Authentifizierungsdienst aufgerufen wird,
wird dies in einem Parameter namens user übergeben,
der den Benutzernamen und das Passwort als Teil des JavaScript-Objekts des Benutzers enthält.
Also, an dieser Stelle mache ich einen HTTP-Beitrag zur BaseURL plus Benutzer/Login.
Beachten Sie auch, dass
ich hier den AuthResponse als Qualifier hier bereitstelle.
Der AuthResponse ist nichts anderes als eine Schnittstelle, die ich hier implementiert habe,
ganz oben hier.
Diese Schnittstelle gibt also im Wesentlichen
die Informationen an, die als
meine Authentifizierungsantwort von der Serverseite zurückkommen werden,
die Struktur der JSON-Daten, die
von der Serverseite zurückkommen, und die entsprechenden JavaScript-Objekte.
Sie bemerken also, dass wir beim Aktualisieren des Servers
sicherstellen, dass der Server den Status, den
Erfolg, das Flag und das Token im String-Index zurücksendet.
Also, diese Informationen werden hier erhalten.
Nun, wenn ich einen Beitrag dazu mache,
übergebe ich den Benutzernamen und das Passwort an den Beitrag auf diesem /users/login Endpunkt.
Wenn die Antwort von der Antwort zurückkommt,
enthält die Antwortnachricht selbst, wie wir gesehen haben,
den Erfolg, das Token-Feld
und auch die Statusmeldung hier.
Aus der Antwortnachricht
extrahiere ich das Token und übergebe es dann an diese Funktion, die ich hier implementiere,
lokale Funktion hier, genannt storeUserCredentials.
Das wird also an meine Anwendung zurückgegeben und auf meiner Clientseite
im lokalen Speicher gespeichert.
Dann, von dieser Funktion,
gebe ich diese Informationen zurück an
die aufrufende Funktion, von der ich den Anmeldeprozess initiiert habe.
Auf diese Weise werde ich meiner Login-Komponente anzeigen, dass die Anmeldung erfolgreich war,
und dann werde ich auch den Benutzernamen an meine Login-Komponente übergeben,
die dann diese Informationen an die Header-Komponente weitergibt,
und die Header-Komponente verwendet dies, um den Benutzernamen auf
die Symbolleiste oben dort,
und auch wir fangen den Fehler hier.
Dies ist also eine sehr einfache Implementierung, wie wir den Login durchgeführt haben.
Wenn Sie sich abmelden,
beachten Sie, was ich tue, wenn der Benutzer eine Abmeldung anruft.
Wenn der Benutzer eine Abmeldung aufruft,
zerstöre ich einfach
die Anmeldeinformationen des Benutzers, einschließlich des Wegwerfens
des JSON-Web-Token, das ich erhalten habe, als ich mich bei meiner Anwendung angemeldet habe.
Dann sind einige zusätzliche Hilfsfunktionen, die ich hier mit dem Namen
GetUserName implementiert habe, angemeldet und getToken,
was von meinen anderen Anwendungen,
anderen Komponenten und Diensten nützlich sein wird.
Sehen wir uns nun einige der Hilfsfunktionen an, die wir hier implementiert haben.
Daher werden die LoadUserCredentials die Anmeldeinformationen aus dem lokalen Speicher abrufen.
Sie bemerken also, dass ich hier localStorage aufrufe und dann getItem sage.
So verwendet der LocalStorage hier
den lokalen Speicher des Webbrowsers, der von Standard-Webbrowsern unterstützt wird,
und speichert die Informationen dort,
und dann ruft er diese Informationen dort ab.
Dann, von dort, die Anmeldeinformationen,
wenn sie gültig sind,
dann werden diese Anmeldeinformationen hier eingerichtet.
Also, alle diese Variablen, die ich hier definiert habe, werden mit
den entsprechenden Informationen initialisiert, nachdem sie aus dem LocalStorage abgerufen wurden.
Nun wird die StoreUserCredentials Funktion
, die ich hier implementiert habe, von der Anmeldemethode aufgerufen.
Wenn diese Informationen übergeben werden, werden
die Anmeldeinformationen übergeben. Diese
Informationen werden zu diesem Zeitpunkt mit diesem Schlüssel im LocalStorage gespeichert.
Dann
richten die UseCredentials grundsätzlich alle Variablen ein, die ich im Authentifizierungsdienst habe.
Es richtet also das Token ein,
es richtet den Benutzernamen ein
und richtet dann die IsAuthenticated Funktion hier ein.
Beachten Sie also, dass der Benutzername selbst hier,
ich habe es als ein Thema deklariert,
das hier nichts anderes als ein beobachtbares ist.
Also, deshalb, wenn ich sage,
SendUserName hier, sage ich Anmeldeinformationen Benutzername.
Also, dieser SendUserName wurde hier oben implementiert,
beachten Sie, dass hier der beobachtbare Wert zurückgesendet wird.
Also, deshalb sage ich diesen Benutzernamen als nächstes.
Also, das Beobachtbare.
Wird den Namen zurücksenden, der
als Parameter an diejenigen, die sich registriert haben, um dies beobachtbar zu beobachten.
Also dies beobachtbar, ich werde dies von
meiner Header-Komponente beobachten und so, wenn sich der Benutzername ändert,
entweder von undefiniert zu einem bestimmten Benutzernamen oder umgekehrt,
dann kann ich meine Symbolleiste in
der Header-Komponente aktualisieren, um zu reflektieren, ob der Benutzer eingeloggt oder abgemeldet ist.
Also, das wird mit diesem UseCredentials eingerichtet.
Jetzt setzt die DestroyUserCredentials das Authentifizierungstoken grundsätzlich auf undefined.
Es löscht den Benutzernamen und setzt dann die IsAuthenticated auf false und
entfernt diese Informationen dann aus meinem lokalen Speicher, so dass
es im Grunde das jsonwebtoken an diesem Teil wegwirft.
So lieben Sie einen Benutzer.
Sobald das jsonwebtoken verloren ist, kann der Benutzer
sich nicht mehr auf
der Serverseite authentifizieren, da das Token nicht mehr für uns verfügbar ist.
So implementieren wir also die Abmeldefunktion innerhalb unserer Anwendung.
Nehmen Sie sich also etwas Zeit, um den
auth.service hier zu durchlaufen, um zu sehen, wie ich die verschiedenen Funktionen implementiert habe.
Nun, zu diesem Zeitpunkt,
bin ich sicher, dass Sie sehr vertraut sind mit der Implementierung von Angular-Anwendungen,
also sollte es nicht so schwierig für Sie sein zu verstehen, wie dieser Code implementiert wird.
Jetzt eine weitere Funktion, auf die ich Ihre Aufmerksamkeit lenken würde, ist das Check JWT-Token, hier.
Diese Funktion kann jederzeit aufgerufen werden, um zu überprüfen und
sicherzustellen, dass unser JSON-Web-Token weiterhin gültig ist.
Also hier schicke ich die Get-Anfrage an Benutzer Schrägschrägscheck JWT-Token.
Daran erinnern, dass wir diese Route auf der Serverseite in der Benutzer.js und.
Von dort aus können wir überprüfen, ob das jsonwebtoken noch gültig ist oder nicht.
Wenn das jsonwebtoken ungültig ist,
werden wir die
Anmeldeinformationen des Benutzers zerstören und dann erwarten, dass der Benutzer sich erneut anmeldet.
Wenn das jsonwebtoken gültig ist, ist es in Ordnung und
wir können fortfahren, damit der Benutzer
erkennen kann, dass wir angemeldet sind.Also, selbst wenn Sie
Ihren Browser schließen und dann den Browser erneut geöffnet und dann Ihre Angular-Anwendung wieder geöffnet haben,
wenn Sie sich früher angemeldet hatten und die jsonwebtoken wurde im lokalen Speicher gespeichert,
es kann von dort abgerufen werden und dann
wird Ihr Anmeldestatus innerhalb Ihrer Angular-Anwendung wiederhergestellt.
Wenn das json-Web-Token abgelaufen
ist, dürfen wir uns nicht anmelden.
Jedes Mal, wenn Sie Ihre Angular-Anwendung in Ihrem Browser aktualisieren oder
Ihre Angular-Anwendung in Ihrem Browser neu laden,
überprüfen Sie das jsonwebtoken, um sicherzustellen, dass es immer noch gültig ist.
Wenn es nicht gültig ist, wird der Benutzer
gelöscht und so müssen Sie sich erneut anmelden.
Wenn nicht, werden die Informationen des angemeldeten Benutzers
aus dem LocalStorage abgerufen und dann innerhalb meiner Angular-Anwendung initialisiert.
Wenn Ihr Server zu irgendeinem Zeitpunkt
mit einer 401 Nicht autorisierten Nachricht antwortet,
werden wir auch zu diesem Zeitpunkt erneut kreuzen, um zu sehen, dass das jsonwebtoken gültig ist und das dann zulassen.
Wir werden das mit etwas tun, das die Http-Abfangjäger genannt wird.
Lassen Sie mich eine Tour zu diesem Teil des Codes machen
und Ihnen dann erklären, wie die Abfangjäger in kurzer Zeit funktionieren.
Also jetzt zusätzlich zu AuthService,
im Dienstordner selbst sehen Sie diese Datei namens AuthInterceptors.ts Datei.
Also öffne das und du wirst sehen, dass ich hier Http Interceptors implementiert habe.
Nun, was diese Http Interceptoren tun,
wird dies mit dem Http Client unterstützt, der als Teil von Angular 4.4 kommt.
Was die HTTP-Abfangjäger tun, ist, dass sie
ausgehende Anfragen abfangen können, die
Änderungen an der Anforderungsnachricht vornehmen, bevor sie gesendet wird.
Ebenso können sie eingehende Antwortnachrichten abfangen und dann
die eingehende Antwortnachricht ändern, bevor
die Antwort an die Angular-Anwendung übergeben wird.
Also durch Abfangen, wie funktioniert dieser Abfangjäger?
Damit dieser Interceptor funktioniert,
implementieren wir, wie Sie sehen,
eine Klasse, die als HttpInterceptor aufgerufen wird, indem wir den HttpInterceptor erweitern.
Also hier habe ich den AuthInterceptor implementiert.
Was macht dieser AuthInterceptor?
Dieser AuthInterceptor erfasst im Grunde ausgehende Anforderungen.
Um eine ausgehende Anfrage zu erfassen, rufen Sie diese Funktion namens intercept auf
und geben Sie dann Zugriff auf die Anfrage und die nächste.
Sie könnten also
eine Reihe von Abfangjäger hintereinander verketten, wenn Sie sich dafür entscheiden,
so dass sie die ausgehenden Anfragen nacheinander bearbeiten können, wenn Sie dies wünschen.
Was dieser Abfang tut, ist, dass er Ihnen Zugriff auf die HTTP-Anforderungsnachricht gibt.
Wenn ich also Zugriff auf die HTTP-Anforderungsnachricht bekomme,
würden Sie feststellen, dass ich hier den Authentifizierungsdienst injiziere.
Im Gegensatz zu der Art, wie wir Dienste in Komponenten injizieren,
zeige ich hier die Verwendung eines Injektors.
Ein Injektor ist Teil des Angular-Codes.
Mit einem Injektor können Sie also Dienste oder
andere Komponenten in andere Dienste oder Komponenten injizieren.
Hier sehen Sie, dass ich hier den Authentifizierungsdienst injiziere, indem ich dies verwende.
Jetzt ist ein weiterer Grund, dass, wenn ich den Dienst direkt in meinen Konstruktor injiziere,
es eine zirkuläre Abhängigkeit zwischen dem Interceptor und dem AuthService entwickelt,
und das führt dazu, dass Ihr Code nicht funktioniert.
Das ist also eine Arbeit um die Probleme.
So dass Ihr Abfang- weil ich den
AuthService brauche, um das Token vom
AuthService und AuthService zu erhalten, wiederum von diesem Interceptor abhängt.
Deshalb injiziere ich in diesem Fall explizit den AuthService, um die Schleife zu brechen.
Nun, das ist etwas, das ich durch Versuch
und Irrtum herausgefunden habe, ging ich zunächst voran und injizierte einfach
die ungeraden Dienste an den Konstruktor und fand dann heraus, dass
Angular den Code nicht kompilierte, dann fand ich heraus, dass
es einen Fehler gab und dann nach einer Google-Suche dann
herausgefunden, dass dies eine alternative Möglichkeit ist,
dasselbe zu handhaben, und das funktioniert viel besser für unsere Anwendung.
Sobald ich also den AuthService vom Dienst injiziere, bekomme ich
das Token und merke dann, was ich hier mache.
Hier sage ich clone const auth req req clone.
Also werden wir die Anfrage klonen und dann werden wir in den Headern einrichten.
Also werden wir sagen, req Header setzen
Autorisierung und dann bemerken, was ich
den Autorisierungs-Header einrichte, Bearer.
Plus AuthToken.
Also richte ich im Autorisierungs-Header den Bearer und AuthToken hier ein.
So richte ich
den Autorisierungsheader in der
ausgehenden Anforderungsnachricht in meiner Angular-Anwendung ein. Also genau da.
Und so habe ich sichergestellt, dass alle ausgehenden Anfragen
den Autorisierungs-Header eingerichtet haben, bevor sie an die Serverseite übergeben werden.
Und danach werden wir es einfach an den nächsten Interceptor weiterleiten, falls es existiert,
oder an die ausgehende Warteschlange,
so dass die Anforderungsnachricht an die Serverseite gesendet wird.
In ähnlicher Weise habe ich einen anderen Interceptor, den ich hier implementiert habe.
Dieser Interceptor fängt alle nicht autorisierten Antwortnachrichten ab
, die von der Serverseite zurückkommen.
Also, wenn der Server mit einer 401 Nicht autorisierten Antwortnachricht antwortet.
Also an diesem Punkt wieder, das gleiche,
ich habe den AuthService hier eingerichtet,
und dann, im Inneren, dann werde ich sagen,
behandeln, wenn Fehler.
Also hier bekomme ich das HttpEvent hier.
Das HttpEvent ist ein Objekt auf niedrigerer Ebene als eine Anfrage,
aber das ermöglicht es uns, Zugriff auf die eingehende Antwortnachricht
zu erhalten, und dann werden wir überprüfen, ob es einen Fehler gibt,
und dann, ob Fehler eine Instanz der HTTP-Fehlerantwort ist,
und wenn der Fehlerstatus 401 ist.
Was bedeutet, dass ich gerade festgestellt habe, dass der Server eine 401-Fehlermeldung zurückgeschickt hat.
Was bedeutet, dass es auf der Serverseite ein Autorisierungsproblem gab.
Dann werde ich an diesem Punkt
das json-Web-Token überprüfen, um sicherzustellen, dass das json-Web-Token immer noch gültig ist.
Wenn es nicht gültig ist,
verwerfe ich meine Anmeldeinformationen und erwarte, dass sich der Benutzer erneut anmeldet.
Auf diese Weise werde ich sicherstellen, dass, wenn mein json-Web-Token
beim Versuch abläuft, Daten zu holen,
das immer noch von hier abgefangen wird, denn wenn der Server mit einem 401 antwortet,
werde ich das abfangen und dann
mein json-Web-Token löschen und ich erwarte, dass sich der Benutzer erneut anmeldet.
Wir können den Benutzer auch auf die Anmeldeseite umleiten, wenn Sie möchten,
aber mit der Angular-Anwendung ist es etwas komplizierter
, dies zu tun und ich wollte Sie nicht verwirren, indem Sie all das tun.
Stattdessen melde ich mich einfach
an diesem Punkt aus und zerstöre dann die Benutzeranmeldeinformationen,
so dass der Benutzer sich an diesem Punkt anmeldet.
Also, einfache Handhabung, wie wir den Autorisierungs-Header in die ausgehende Anfrage injizieren
und auch alle 401 nicht autorisierten Nachrichten abfangen
, die von der Serverseite zurückkommen.
Sie sehen also, wie diese zusätzlichen Änderungen
an Ihrer Angular-Anwendung vorgenommen werden müssen, damit sie mit Ihrer Serverseite funktioniert.
Wenn Sie mit dem Authentifizierungsteil keine Authentifizierung hatten und wenn Sie nur
auf die restlichen API-Endpunkte zugreifen und Operationen abrufen
möchten, müssen Sie sich nicht einmal um diese Dinge kümmern. Es
ist keine Authentifizierung erforderlich.
Daten können sehr einfach abgerufen werden.
Aber für jeden Post-,
Put- und Löschvorgang
müssen wir alle diese Funktionen unterstützen.
Das ist der Grund, warum ich den Authentifizierungsteil in meine Anwendung implementiert habe.
Auch wie ich bereits gezeigt habe,
wenn kein Benutzer angemeldet ist,
dann werden wir nicht in der Lage sein, zum Endpunkt meiner Favoriten zu navigieren,
aber wenn ein Benutzer angemeldet ist,
dann werden wir in der Lage sein, die meine Favoriten für den spezifischen Benutzer zu sehen.
Dies wird durch die Verwendung von Routenwächtern in Angular implementiert.
Nun, um diese Routenwächter zu implementieren,
habe ich hier einen anderen Dienst namens AuthGuardService implementiert.
Also in diesem AuthGuardService
haben wir diese Methode namens CanActivate-Methode implementiert, die
wir unterklasse werden, um dies zu implementieren.
Und in der CanActivate-Methode
wird die Implementierung einen booleschen Wert zurückgeben,
und in diesem Fall
prüfen wir, ob dieser Benutzer angemeldet ist,
dann werden wir dem Benutzer erlauben zu navigieren.
Andernfalls navigieren Sie den Benutzer zum Endpunkt des Endpunkts.
So wird in diesem Fall der Routenwächter implementiert.
Nun, um diese Route Wache zu nutzen,
werden wir gehen, um zu sehen, wie die Routen aktualisiert werden, um die Routenwächter zu nutzen.
Also in der Datei routes.ts
können Sie sehen, dass für die Favoriten-Komponente,
wir sehen, dass wir den Pfad als Favoriten und die Komponente als
FavoritesComponent angeben und dann spezifizieren wir dieses andere Feld
namens CanActivate, für das wir AuthGuard als Parameter hier angegeben,
und diese AuthGuard ist nichts anderes als der AuthGuard-Dienst, den wir implementiert haben,
der hier importiert wird.
Auf diese Weise, wenn der AuthGuard auf false ausgewertet
wird, werden Sie nicht zur Favoritenkomponente navigieren dürfen
, stattdessen werden Sie zu Hause umgeleitet,
aber wenn der Benutzer angemeldet ist, dann wird der AuthGuard offensichtlich auf true auswerten,
und in diesem Fall
werden Sie in der Lage sein, , um zur Route der Favoriten zu navigieren.
Nun gibt es auch in ähnlicher Weise kleinere Änderungen an den verbleibenden Komponenten,
die es Ihnen ermöglichen, mit
den Feinheiten umzugehen, wie Ihr Client und Server miteinander sprechen.
Beachten Sie insbesondere, wie die Header-Komponente aktualisiert wurde, um
den Status des angemeldeten Benutzers in der Symbolleiste oben anzuzeigen.
Das ist wieder eine weitere interessante Änderung, die ich
an der Header-Komponente in unserer Anwendung vorgenommen habe.
Ich werde das also als Übung für Sie überlassen, um herauszufinden, wie das umgesetzt wurde.
Sehr einfacher Code dort.
Sollte es Ihnen leicht sein, das herauszufinden.
Mit all diesen Änderungen
ist mein Winkelclient nun in der Lage, mit meinem Server zu interagieren.
Lassen Sie mich Ihnen noch einmal zeigen, wie wir einige Kommentare auf dem Server posten können,
und dann sehen Sie den Kommentar sofort in das Gericht reflektiert.
Also, wieder auf unsere Anwendung zurückgehen,
können wir jetzt auf das Menü gehen und dann jedes Gericht hier hochziehen,
und ich kann hier Kommentare zum Gericht posten,
also würde ich sofort die Bewertung hier einrichten,
und meinen Kommentarwert hier.
Beachten Sie, dass ich
meinen Benutzernamen oder den Namen meines Autors hier nicht in das Formular eingebe.
Jetzt
müssen Sie natürlich eingeloggt sein, um einen Kommentar abzugeben.
Wenn Sie also nicht angemeldet sind, wird dieser Kommentar von meinem Server nicht akzeptiert.
Also lassen Sie mich zuerst einloggen.
So kann ich mich hier einloggen.
Und sobald ich mich anmelde,
bemerken Sie sofort, dass die Header-Symbolleiste aktualisiert wird, um meinen Status anzuzeigen.
Jetzt kann ich diesen Kommentar posten.
Und Sie würden bemerken, dass, wenn ich den Kommentar poste,
der Kommentar in die Liste der Kommentare hinzugefügt wird,
und auch bemerken, dass das Autorenfeld hier automatisch ausgefüllt wird.
Denn so richten wir unsere Serverseite ein.
Im Kommentarfeld
haben wir unseren Benutzer als
Verweis auf die Benutzerinformationen eingerichtet,
die wir auf unserer Serverseite speichern, und da wir das Populate,
Mongoose Populate auf der Serverseite verwenden, werden
die Benutzerinformationen automatisch
in die eingehenden Kommentare des Servers aufgefüllt Seite.
So stellen Sie fest, wie ich das nutze, was
der Server bereits für mich bereitstellt, um automatisch die Details auszufüllen.
So, kleinere Änderungen wieder sogar in
die Schüssel Detailseite, um die Verwendung der Kommentare Unterstützung auf der Serverseite widerzuspiegeln.
Damit vervollständige ich die schnelle Darstellung
des Angular Clients, die wir im Rahmen dieser Übung implementiert haben.
Und ich hoffe, dass Sie auch die Details des Codes im Angular-Client durchlaufen
und dann über das, was Sie im Angular-Kurs gelernt haben, nachdenken und sehen,
wie die Modifikationen es uns ermöglichen,
in einem modifizierten Winkelclient
zu implementieren, der jetzt mit dem Server kommunizieren kann und unterstützen dann alle Funktionen
, die wir ursprünglich als Teil sowohl der Client- als auch der Serverseite implementieren wollten.