Maintenant que nous avons terminé la mise à jour du côté serveur,
il est temps de passer au client angulaire.
Pour votre commodité, je vous ai fourni
le référentiel GitHub qui contient la version finale
du client angulaire capable de communiquer avec
notre serveur API REST, puis de rendre les différentes vues pour notre client.
Donc, j'ai pris l'application Angular que nous avons
développée dans le deuxième cours de cette spécialisation,
puis l'ai modifiée.
Nous ferons un bref tour à travers le code dans un peu plus tard.
Maintenant, vous allez cloner le dépôt Git sur votre ordinateur,
puis démarrer votre client angulaire,
puis le voir communiquer avec notre côté serveur.
Voyons les détails ensuite.
Pour commencer cet exercice,
dans votre terminal ou fenêtre de commande,
accédez à votre emplacement pratique, puis à
l'invite, tapez git clone
https://github.com/jmuppala/conFusion-Angular6.git.
Ensuite, laissez l'application Angular être clonée sur votre ordinateur.
Une fois le clonage terminé,
déplacez vers le dossier Confusion-Angular6
qui vient d'être créé lorsque vous clonez ce dépôt git.
Ensuite, vous remarquerez immédiatement qu'il y a déjà un tas de fichiers.
Maintenant, à l'invite, tapez npm install,
afin d'installer tous les modules de nœuds
dont dépend cette application angulaire.
Donc, une fois que les modules de noeud ou tous installés,
alors nous pouvons démarrer notre NG servir pour compiler et servir notre application Angular.
Une fois que tout est installé par l'installation de npm,
assurez-vous que votre serveur MongoDB est
opérationnel et que votre serveur API REST est également opérationnel.
Sinon, votre client angulaire ne fonctionnera pas.
Donc, maintenant que vous avez installé votre client Angular sur votre ordinateur,
à l'invite de type ng servir et
votre application Angular sera compilée et servie par ng servir dans un court laps de temps.
Une fois votre application Angular compilée avec succès,
allez dans un navigateur et ouvrez votre application Angular dans le navigateur.
Aller au navigateur,
à la barre d'adresse,
laissez-moi taper localhost:4200 et
vous verrez que votre application Angular
démarre et est visible sur l'écran ici.
Vous remarquerez immédiatement que votre application Angular
est capable de récupérer les données du serveur, puis de rendre
les différentes parties de votre application Angular comme ce que vous avez
fait à la fin de votre cours Angular.
Lorsque vous allez à parler de dossier,
vous verrez également que la page À propos de rend également les informations en tant que telles.
Dans le menu, vous voyez les éléments du menu s'
afficher comme nous l'avons vu avec l'application Angular.
Maintenant, en outre, j'ai ajouté
une page de plus à l'application de page unique intitulée Mes favoris,
que vous ne pouvez pas accéder car aucun utilisateur n'est connecté au système.
Donc, vous voyez que je n'ai aucun utilisateur connecté au système.
Donc, c'est pourquoi il ne sert à rien d'indiquer mes favoris,
parce que vous ne savez pas quel utilisateur,
en tant que favoris, devrait être affiché ici.
La page de contact comme d'habitude.
Maintenant, connectons-nous.
Pour vous connecter à notre application,
nous allons cliquer sur le bouton Connexion et vous verrez alors que la boîte de dialogue Connexion apparaît.
Ensuite, permettez-moi de me connecter en tant que l'un des utilisateurs enregistrés,
que nous avons enregistrés dans le cadre de ce cours plus tôt.
Donc, une fois que vous
vous connectez, vous remarquerez immédiatement que, dans
le coin droit,
vous voyez que le bouton Connexion est maintenant devenu
Déconnexion et que le nom de l'utilisateur est indiqué ici.
Donc, quiconque est connecté est indiqué ici.
Vous pouvez également, en principe,
remplacer cela par l'image de l'utilisateur.
Maintenant, pour cela, vous devez faire plus de modifications au
client et au serveur afin de prendre en charge l'affichage de l'image ici.
Mais, pour le moment, je vous montre simplement comment nous
pouvons facilement afficher les informations de l'utilisateur ici.
Donc, cela nécessite une modification mineure à la tête du
composant où je serai en mesure de récupérer
le nom d'utilisateur d'un service
appelé comme le service OAuth dont nous parlerons dans un court laps de temps.
Donc, une fois que l'utilisateur se connecte,
alors si vous cliquez maintenant sur Mes favoris,
vous remarquerez qu'il n'y a rien dans mes favoris pour l'utilisateur.
Évidemment, parce que l'utilisateur n'a pas encore choisi de favoris.
Alors, allons maintenant au Menu, puis dans le Menu,
laissez-moi sélectionner un élément et puis ils ajouteront ce plat à nos favoris.
Donc, en descendant ci-dessous,
vous voyez le symbole du cœur là-bas,
cliquez dessus et vous verrez que cela serait ajouté dans Les Favoris.
Le fait que cela ait été ajouté dans Les Favoris est indiqué par
le changement dans l'icône ici d'un cœur non rempli à un cœur rempli.
Maintenant, si vous allez à un autre plat,
vous remarqueriez que cela a un cœur vide, ce
qui signifie que ce n'est pas encore parmi nos favoris.
Donc, laissez-moi ajouter un élément de plus à
mes favoris, puis ajoutons un troisième élément à mes favoris aussi.
Donc, maintenant, vous verrez que si je vais maintenant à Mes Favoris,
vous verrez un ensemble de Mes Favoris s'afficher ici.
Donc, vous avez vu que je viens d'ajouter ces trois plats à Mes favoris.
Donc, ceux-ci sont affichés ici.
Donc, cela est suivi en utilisant le point de fin favoris sur le côté serveur,
que j'ai implémenté dans le cadre de votre dernière affectation.
Donc, si vous avez fait cette affectation correctement, cette partie devrait fonctionner comme prévu.
Maintenant, nous pouvons également modifier Mon favori.
Ainsi, par exemple, dans le coin droit ici,
vous voyez cette option Supprimer ici.
Alors, laissez-moi allumer ça.
Ainsi, lorsque vous l'activez,
vous voyez immédiatement les trois croix rouges
apparaissent en bas de ces trois éléments dans Mes favoris.
Quand je clique dessus, ils disparaissent.
Donc, c'est une façon d'activer les boutons de suppression de vos favoris, puis.
Donc, laissez-moi aller de l'avant et supprimer l'un des éléments de Mes Favoris.
Donc, lorsque je clique sur ce bouton,
vous remarquerez immédiatement que cet élément est supprimé de Mes Favoris,
et disparaît immédiatement et Mes Favoris sont
mis à jour et vous verrez la valeur résultante affichée ici.
En même temps,
cette bascule Supprimer est désactivée, de
sorte que les boutons de suppression ne sont plus visibles.
Je peux toujours activer à nouveau les boutons de suppression en cliquant sur le activé et désactivé ici.
Par conséquent, notez que les Mes favoris seront affichés uniquement
pour les utilisateurs qui sont connectés au système.
Ainsi, vous remarquez immédiatement un ensemble de modifications qui ont été
apportées au client angulaire afin de prendre en
charge certaines de ces fonctionnalités supplémentaires que vous voyez ici.
Vous avez également vu la fonctionnalité Connexion et déconnexion être prise en charge ici.
Donc, quand je clique sur le bouton Déconnexion,
vous remarquez immédiatement que l'utilisateur est déconnecté
et le nom d'utilisateur disparaît de là,
et donc le bouton est également transformé en bouton Connexion.
Donc, avec cela, vous remarquez comment mon client Angular a été
mis à jour pour utiliser le nouveau serveur API REST
afin de prendre en charge les favoris enregistrés et du côté serveur
, puis automatiquement reflétés dans mon application cliente comme indiqué ici.
Voyons brièvement
le code angulaire que j'ai fourni pour vous dans le dépôt GitHub,
et voyons aussi comment nous avons modifié des parties du code
afin d'implémenter l'application Angular mise à jour.
Vous remarquerez qu'il existe un nouveau service
que j'ai introduit ici appelé service d'authentification.
Le service d'authentification prend en charge
toutes les actions liées à l'authentification pour l'application Angular.
Donc, dans le service d'authentification,
vous remarquerez immédiatement que j'ai
un ensemble d'informations que j'ai configuré ici.
Puisque vous connaissez déjà Angular,
vous devriez être capable de traiter facilement tout ce qui est écrit ici.
Notez en particulier que dans le service d'authentification lui-même,
je stocke des informations comme,
par exemple, le TokenKey,
qui est la clé pour le stockage local où je stocke le jeton Web JSON,
et aussi quelques variables supplémentaires
ici où je suis en train de suivre le nom d'utilisateur et où je suis authentifié,
et gardez également une trace du jeton Web JSON ici.
Maintenant, commençons par regarder quand l'utilisateur se connecte.
Ainsi, lorsque l'utilisateur se connecte,
alors cette fonction appelée login sera appelée dans notre service d'authentification ici,
et lorsque la connexion est appelée dans le service d'authentification,
cela sera transmis dans un paramètre appelé utilisateur qui contient
le nom d'utilisateur et le mot de passe dans le cadre de l'objet JavaScript utilisateur.
Donc, à ce stade, je fais un post HTTP sur le BaseURL plus utilisateurs/login.
Notez également qu'ici,
je fournit l'AuthResponse comme qualificateur ici.
L' AuthResponse n'est rien d'autre qu'une interface que j'ai
implémentée ici, en haut ici.
Donc, cette interface spécifie essentiellement
les informations qui vont revenir comme
ma réponse d'authentification du côté serveur,
la structure des données JSON qui
revient du côté serveur et les objets JavaScript correspondants.
Donc, vous remarquez que lorsque nous avons mis à jour le serveur,
nous nous sommes assurés que le serveur renvoie l'état,
le succès, l'indicateur et le jeton dans l'index de chaîne.
Donc, cette information est obtenue ici.
Maintenant, quand je fais un post à ce sujet,
je transmets le nom d'utilisateur et le mot de passe à la publication sur ce point de terminaison /users/login.
Lorsque la réponse revient de la réponse,
le message de réponse lui-même contiendra, comme nous l'avons vu,
le succès, le champ de jeton,
ainsi que le message d'état ici.
Donc, à partir du message de réponse,
j'extrait le jeton et puis le passe à cette fonction que j'implémente ici,
fonction locale ici, appelée StoreUserCredentials.
Donc, cela sera retourné à mon application et sera stocké dans mon client,
dans le stockage local.
Ensuite, à partir de cette fonction,
je retourne cette information à
la fonction appelant à partir de laquelle j'ai initié le processus de connexion.
Donc, de cette façon, j'indiquerai à mon composant de connexion que la connexion a été réussie,
puis je passerai également le nom d'utilisateur à mon composant de connexion,
qui passera ensuite cette information sur le composant d'en-tête,
et le composant d'en-tête l'utilise pour refléter le nom d'utilisateur sur
le en haut là,
et aussi nous attrapons l'erreur ici.
Donc, c'est une implémentation très simple de la façon dont nous avons effectué la connexion.
Lorsque vous effectuez la déconnexion,
remarquez ce que je fais lorsque l'utilisateur appelle une déconnexion.
Lorsque l'utilisateur appelle une déconnexion,
je détruis simplement les informations d'identification de l'utilisateur,
ce qui inclut
le jeton Web JSON que j'ai obtenu lorsque je me suis connecté à mon application.
Ensuite, certaines fonctions d'assistance supplémentaires que j'ai implémentées ici appelées
getUserName sont connectées et getToken,
ce qui sera utile à partir de mes autres applications,
d'autres composants et services.
Donc, maintenant regardons quelques-unes des fonctions d'aide que nous avons implémentées ici.
Ainsi, LoadUserCredentials récupère les informations d'identification du stockage local.
Donc, vous remarquez qu'ici j'appelle LocalStorage et puis je dis GetItem.
Donc, le LocalStorage ici utilise
le stockage local du navigateur Web qui est pris en charge par les navigateurs Web standard,
et stocke les informations là,
puis il récupère ces informations là.
Ensuite, à partir de là, les informations d'identification,
si elles sont valides,
alors ces informations d'identification seront configurées ici.
Donc, toutes ces variables que j'ai définies ici seront initialisées avec
les informations appropriées après avoir été récupérées à partir du LocalStorage.
Maintenant, de même, la fonction StoreUserCredentials
que j'ai implémentée ici est appelée à partir de la méthode de connexion.
Lorsque ces informations sont transmises,
les informations d'identification sont transmises,
ces informations sont stockées dans le LocalStorage à ce stade avec cette clé.
Ensuite, UseCredentials
configure fondamentalement toutes les variables que j'ai dans le service d'authentification.
Donc, il configure le jeton,
il configure le nom d'utilisateur,
puis il configure la fonction isAuthenticated ici.
Donc, notez que le nom d'utilisateur lui-même ici,
je l'ai déclaré comme un sujet,
ce qui n'est rien d'autre qu'un observable ici.
Donc, c'est pourquoi chaque fois que je dis,
SendUserName ici, je dis informations d'identification nom d'utilisateur.
Donc, ce SendUserName implémenté en haut ici,
notez que c'est là que la valeur observable est renvoyée.
Donc, c'est pourquoi je dis ce nom d'utilisateur suivant.
Donc, l'observable.
Renvoie le nom qui est fourni en
tant que paramètre à quiconque s'est enregistré pour observer cet observable.
Donc, cela observable, je vais observer cela à partir de
mon composant d'en-tête et de cette façon chaque fois que le nom d'utilisateur change,
soit de undefined à un nom d'utilisateur donné ou vice versa,
alors je peux mettre à jour ma barre d'outils dans
le composant d'en-tête pour refléter si l'utilisateur est connecté ou déconnecté.
Donc, qui est configuré en utilisant cette UseCredentials.
Maintenant, DestroyUserCredentials définit fondamentalement le jeton d'authentification sur undefined.
Il efface le nom d'utilisateur, puis définit le IsAuthenticated à false, puis
supprime cette information de mon magasin local, donc
il jette fondamentalement le jsonwebtoken à cette partie.
Donc, c'est comme ça que vous aimez un utilisateur.
Donc, une fois que le jsonwebtoken est perdu, l'utilisateur ne peut plus
s'authentifier lui-même
côté serveur car le jeton n'est plus disponible pour nous.
C' est ainsi que nous implémentons la fonction de déconnexion dans notre application.
Prenez donc le temps de passer par le
auth.service ici pour voir comment j'ai implémenté les différentes fonctionnalités.
Maintenant, à ce moment,
je suis sûr que vous êtes très familier avec la façon dont les applications Angular sont implémentées,
il ne devrait donc pas être si difficile pour vous de comprendre comment ce code est implémenté.
Maintenant, une autre fonction sur laquelle j'attirerais votre attention est le jeton de vérification JWT, ici.
Cette fonction peut être appelée à tout moment pour vérifier et
vous assurer que notre jeton web JSON est toujours valide.
Donc, c'est là que j'envoie la requête get aux utilisateurs slash check JWT jeton.
Rappelons que nous avons implémenté cette route côté serveur dans les fichiers .js et.
Donc, à partir de là, nous serons en mesure de vérifier si le jsonwebtoken est toujours valide ou non.
Si le jsonwebtoken n'est pas valide,
nous allons détruire les informations d'
identification de l'utilisateur, puis nous attendons à ce que l'utilisateur se connecte à nouveau.
Si le jsonwebtoken est valide, alors c'est correct et
nous pouvons continuer à permettre
à l'utilisateur de reconnaître que nous sommes connectés. Donc, même si vous fermez
votre navigateur, puis rouvrez le navigateur, puis rouvrez votre application Angular,
si vous vous êtes connecté plus tôt et que le jsonwebtoken a été enregistré dans le stockage local,
il peut être récupéré à partir de là et
votre statut de connexion sera restauré dans votre application Angular.
Si le jeton web json a expiré,
nous ne serons pas autorisés à nous connecter.
Donc, chaque fois que vous actualisez votre application Angular dans
votre navigateur ou rechargez votre application Angular dans votre navigateur, vous allez
vérifier le jsonwebtoken pour vous assurer qu'il est toujours valide.
Si ce n'est pas valide, l'utilisateur sera
effacé et vous devrez donc vous connecter à nouveau.
Si ce n'est pas le cas, les informations de l'utilisateur connecté sont récupérées
à partir du LocalStorage, puis initialisées dans mon application Angular.
Périodiquement, si à un moment donné votre serveur
répond avec un message 401 Non autorisé,
même à ce moment,
nous allons à nouveau vérifier que le jsonwebtoken est valide, puis autoriser cela.
Nous allons le faire en utilisant quelque chose appelé les intercepteurs Http.
Laissez-moi faire un tour à cette partie du code,
puis vous expliquer comment les intercepteurs fonctionnent en peu de temps.
Donc maintenant, en plus de AuthService,
dans le dossier des services lui-même, vous verrez ce fichier appelé fichier AuthInterceptors.ts.
Alors ouvrez ceci et vous verrez qu'ici j'ai implémenté des intercepteurs Http.
Maintenant, ce que font ces intercepteurs Http,
ceci est pris en charge avec le client Http qui vient dans le cadre d'Angular 4.4.
Ce que font les intercepteurs http, c'est qu'ils peuvent intercepter
les requêtes sortantes messages apportent
des modifications au message de requête avant qu'il ne soit envoyé.
De même, ils peuvent intercepter les messages de réponse entrants, puis modifier
le message de réponse entrant avant que
la réponse ne soit remise à l'application Angular.
Alors, par interception, comment fonctionne cet intercepteur ?
Donc, pour faire fonctionner cet intercepteur,
nous implémentons, comme vous le voyez,
une classe appelée en tant que HttpInterceptor en étendant le HttpInterceptor.
Donc ici, j'ai implémenté l'AuthInterceptor.
Alors, que fait cet AuthInterceptor ?
Cet AuthInterceptor capture essentiellement les requêtes sortantes.
Donc, pour capturer une requête sortante, vous appelez cette fonction appelée interception
et cela vous donnera accès à la requête et à la suivante.
Ainsi, vous pourriez enchaîner
un tas d'intercepteurs l'un derrière l'autre si vous le souhaitez, afin
qu'ils puissent traiter les demandes sortantes l'une après l'autre si vous le souhaitez.
Ce que cette interception fait, c'est qu'elle vous donne accès au message de requête Http.
Donc, quand j'ai accès au message de requête Http,
vous remarquerez qu'ici j'injecte le service d'authentification.
Maintenant, contrairement à la façon dont nous injections des services dans des composants,
ici je montre l'utilisation d'un injecteur.
Un injecteur fait partie du code angulaire.
Ainsi, à l'aide d'un injecteur, vous pouvez injecter des services ou
d'autres composants dans d'autres services ou composants.
Donc, ici, vous voyez que j'injecte le service d'authentification ici en utilisant ceci.
Maintenant, une autre raison est que si j'injecte directement le service dans mon constructeur,
il développera une dépendance circulaire entre l'intercepteur et l'AuthService,
et cela fera que votre code ne fonctionnera pas.
C' est donc un travail autour des problèmes.
Alors que votre intercepteur- parce que j'ai besoin du
AuthService, afin de mettre la main sur le jeton de
l'AuthService et AuthService dépend à son tour de cet intercepteur, c'est
pourquoi, afin de briser la boucle, j'injecte explicitement l'AuthService dans ce cas.
Maintenant, c'est quelque chose que j'ai compris par essai
et erreur, j'ai d'abord commencé et j'ai simplement injecté
les services impairs au constructeur, puis j'ai trouvé qu'
Angular ne compilait pas le code, puis j'ai compris qu'
il y avait une erreur là, puis après avoir fait une recherche Google ensuite
découvert que c'est une autre façon de gérer
la même chose et cela fonctionne beaucoup mieux pour notre application.
Donc, une fois que j'injecte le AuthService à partir
du service, je reçois le jeton et puis remarque ce que je fais ici.
Ici, je dis clone const auth req req clone.
Donc, nous allons cloner la demande et ensuite nous allons mettre en place dans les en-têtes.
Donc, nous allons dire que les en-têtes req définissent
l'autorisation et ensuite remarquer ce que je mets
en place l'en-tête d'autorisation pour être, porteur.
Plus AuthToken.
Donc, dans l'en-tête d'autorisation, je suis en train de configurer le porteur et AuthToken ici. C'
est donc ainsi que je configure
l'en-tête d'autorisation dans
le message de demande sortant dans mon application Angular. Donc, juste là.
Et c'est ainsi que j'ai veillé à ce que toutes les demandes sortantes
aient l'en-tête d'autorisation configuré avant qu'elles ne soient passées au côté serveur.
Et puis après cela, nous allons simplement le transmettre à l'intercepteur suivant, s'il existe,
ou à la file d'attente sortante, de
sorte que le message de requête sera envoyé vers le serveur.
De même, j'ai un autre intercepteur que j'ai implémenté ici.
Cet intercepteur intercepte tout message de réponse non autorisé
qui revient du côté serveur.
Donc, si le serveur répond avec un message de réponse 401 non autorisé.
Donc, à ce stade encore, même chose,
j'ai mis en place le AuthService ici,
et puis, à l'intérieur ici, je vais dire,
gérer si erreur.
Donc, c'est là que je vais mettre la main sur HttpEvent ici.
Le HttpEvent est un objet de niveau inférieur
à une requête, mais cela nous permet d'accéder au message de réponse entrant,
et alors nous allons vérifier s'il y a une erreur,
puis si l'erreur est une instance de réponse d'erreur HTTP,
et si l'état d'erreur est 401.
Donc, ce qui signifie que je viens de détecter que le serveur a renvoyé un message d'erreur 401.
Donc, ce qui signifie qu'il y avait un problème d'autorisation côté serveur.
Ensuite, à ce stade, je vais vérifier
le jeton web json pour m'assurer que le jeton web json est toujours valide.
Si ce n'est pas valide,
je rejetterai mes informations d'identification et je m'attends à ce que l'utilisateur se connecte à nouveau.
Donc, de cette façon, je m'assurerai que si mon jeton web json
expire dans le processus d'essayer de récupérer des données,
cela sera toujours intercepté ici parce que si le serveur répond avec un 401,
je l'intercepterai puis effacerai
mon jeton web json et je m'attends à ce que l'utilisateur se connecte à nouveau.
Nous pouvons également rediriger l'utilisateur vers la page de connexion si vous le souhaitez,
mais avec l'application Angular, c'est un peu plus compliqué de le
faire et je ne voulais pas vous confondre en faisant tout cela.
Au lieu de cela, je suis simplement en train de déconnecter
l'utilisateur à ce stade, puis de détruire les informations d'identification de
l'utilisateur, de sorte que l'utilisateur sera censé se connecter à ce stade.
Ainsi, une gestion simple de la façon dont nous injectons l'en-tête d'autorisation dans la demande sortante,
et interceptons également les 401 messages non autorisés
qui sont de retour du côté serveur.
Donc, vous voyez comment ces modifications supplémentaires doivent être
apportées à votre application Angular afin de le faire fonctionner avec votre serveur.
Avec la partie d'authentification définie dans,
si vous n'aviez pas d'authentification et si vous alliez simplement
accéder aux points de terminaison de l'API restants et obtenir des opérations,
vous n'avez même pas besoin de vous soucier de ces choses.
Aucune authentification n'est requise.
Les données peuvent être récupérées très facilement.
Mais pour toutes les
opérations de publication, de mise et de suppression,
nous devons prendre en charge toutes ces fonctionnalités.
C' est donc la raison pour laquelle j'ai implémenté la partie d'authentification dans mon application.
Comme je l'ai déjà illustré,
quand aucun utilisateur n'est connecté,
alors nous ne serons pas en mesure de naviguer vers le point de terminaison de mes favoris
, mais quand un utilisateur est connecté,
alors nous pourrons voir mes favoris pour l'utilisateur spécifique.
Ceci est implémenté en utilisant des gardes de route dans Angular.
Maintenant, pour implémenter ces gardes d'itinéraire,
j'ai implémenté un autre service ici appelé AuthGuardService.
Donc, dans ce AuthGuardService,
nous avons implémenté cette méthode appelée méthode canActivate que
nous allons sous-classer afin d'implémenter cela.
Et dans la méthode canActivate,
l'implémentation retournera un booléen,
et dans ce cas,
ce que nous vérifions est si cet utilisateur est connecté,
alors nous allons permettre à l'utilisateur de naviguer.
Sinon, vous naviguerez l'utilisateur jusqu'au point de terminaison d'accueil.
C' est ainsi que le garde de route est mis en œuvre dans ce cas.
Maintenant, pour utiliser ce garde-route,
nous allons voir comment les itinéraires sont mis à jour pour utiliser les gardes de route.
Donc, dans le fichier routes.ts,
vous pouvez voir que pour le composant favoris,
nous voyons que nous spécifions le chemin comme favoris et le composant comme
FavoritesComponent, puis nous spécifions cet autre champ
appelé canActivate pour lequel nous avons spécifié AuthGuard comme paramètre ici,
et ce AuthGuard n'est rien d'autre que le service AuthGuard que nous avons implémenté,
qui est importé ici.
Ainsi, lorsque AuthGuard est évalué à false,
alors vous ne serez pas autorisé à naviguer vers le composant favoris, à la
place, vous serez redirigé vers la maison,
mais lorsque l'utilisateur est connecté alors évidemment l'AuthGuard évaluera à true,
et dans ce cas,
vous serez en mesure pour naviguer jusqu'à l'itinéraire favori.
De même, il y a également des modifications mineures aux composants restants,
qui vous permettent de faire face aux
subtilités de la façon dont votre client et votre serveur se parleront les uns avec les autres.
En particulier, notez comment le composant d'en-tête a été mis à jour pour
refléter l'état de connexion de l'utilisateur dans la barre d'outils située en haut.
C' est encore une fois un autre changement intéressant que j'ai
apporté au composant d'en-tête dans notre application.
Je vais donc laisser cela pour vous permettre de comprendre comment cela a été mis en œuvre.
Code très simple là. Ça
devrait être facile pour toi de comprendre ça.
Donc, avec tous ces changements, maintenant,
mon client angulaire est capable d'interagir avec mon serveur.
Permettez-moi de vous montrer à nouveau comment nous pouvons poster quelques commentaires sur le serveur,
puis voir le commentaire immédiatement reflété dans le plat.
Donc, encore une fois pour revenir à notre application,
nous pouvons maintenant aller au menu et ensuite tirer n'importe quel plat ici,
et je peux poster des commentaires sur le plat ici,
donc je mettrais immédiatement en place la note ici,
et ma valeur de commentaire ici.
Notez que je ne saisis pas
mon nom d'utilisateur ou le nom de mon auteur ici dans le formulaire ici.
Bien sûr, pour soumettre un commentaire,
vous devez être connecté.
Donc, si vous n'êtes pas connecté, ce commentaire ne sera pas accepté par mon serveur.
Laisse-moi d'abord me connecter.
Donc, je peux me connecter ici.
Et au moment où je me
connecte, vous remarquez immédiatement que la barre d'outils d'en-tête est mise à jour pour indiquer mon statut.
Maintenant, je peux poster ce commentaire.
Et vous remarquerez que lorsque je poste le commentaire,
le commentaire est ajouté dans la liste des commentaires,
et aussi remarquer que le champ auteur est automatiquement rempli ici.
Parce que c'est ainsi que nous configurons notre côté serveur.
Dans le champ commentaires,
nous avons configuré notre utilisateur comme
référence aux informations utilisateur
que nous stockons sur notre serveur, et comme nous utilisons le peuplate,
Mongoose Populate côté serveur,
les informations utilisateur sont automatiquement renseignées
dans les commentaires entrants du serveur côté.
Donc, c'est ainsi que vous remarquez comment je tire parti de ce que
le serveur me fournit déjà pour remplir automatiquement les détails.
Ainsi, des modifications mineures à nouveau même dans
la page de détail du plat pour refléter l'utilisation de la prise en charge des commentaires côté serveur.
Avec cela, je complète l'illustration rapide
du client Angular que nous avons implémenté dans le cadre de cet exercice.
Et j'espère que vous parcourez également les détails du code dans le client Angular,
puis réfléchissez à ce que vous avez appris dans le cours Angular et voyez
comment les modifications nous permettent d'implémenter
dans un client angulaire modifié qui est maintenant
capable de communiquer avec le serveur et puis prennent en charge toutes les fonctionnalités
que nous avions l'intention d'implémenter à la fois sur le client et sur le serveur.