1
00:00:00,000 --> 00:00:08,095
Maintenant que nous avons terminé la mise à jour du côté serveur,

2
00:00:08,095 --> 00:00:10,770
il est temps de passer au client angulaire.

3
00:00:10,770 --> 00:00:13,830
Pour votre commodité, je vous ai fourni

4
00:00:13,830 --> 00:00:17,700
le référentiel GitHub qui contient la version finale

5
00:00:17,700 --> 00:00:20,840
du client angulaire capable de communiquer avec

6
00:00:20,840 --> 00:00:26,805
notre serveur API REST, puis de rendre les différentes vues pour notre client.

7
00:00:26,805 --> 00:00:29,690
Donc, j'ai pris l'application Angular que nous avons

8
00:00:29,690 --> 00:00:32,895
développée dans le deuxième cours de cette spécialisation,

9
00:00:32,895 --> 00:00:34,380
puis l'ai modifiée.

10
00:00:34,380 --> 00:00:39,680
Nous ferons un bref tour à travers le code dans un peu plus tard.

11
00:00:39,680 --> 00:00:44,005
Maintenant, vous allez cloner le dépôt Git sur votre ordinateur,

12
00:00:44,005 --> 00:00:47,525
puis démarrer votre client angulaire,

13
00:00:47,525 --> 00:00:50,820
puis le voir communiquer avec notre côté serveur.

14
00:00:50,820 --> 00:00:54,555
Voyons les détails ensuite.

15
00:00:54,555 --> 00:00:57,885
Pour commencer cet exercice,

16
00:00:57,885 --> 00:01:01,345
dans votre terminal ou fenêtre de commande,

17
00:01:01,345 --> 00:01:04,070
accédez à votre emplacement pratique, puis à

18
00:01:04,070 --> 00:01:06,685
l'invite, tapez git clone

19
00:01:06,685 --> 00:01:21,615
https://github.com/jmuppala/conFusion-Angular6.git.

20
00:01:21,615 --> 00:01:28,705
Ensuite, laissez l'application Angular être clonée sur votre ordinateur.

21
00:01:28,705 --> 00:01:30,495
Une fois le clonage terminé,

22
00:01:30,495 --> 00:01:39,340
déplacez vers le dossier Confusion-Angular6

23
00:01:39,340 --> 00:01:43,620
qui vient d'être créé lorsque vous clonez ce dépôt git.

24
00:01:43,620 --> 00:01:48,845
Ensuite, vous remarquerez immédiatement qu'il y a déjà un tas de fichiers.

25
00:01:48,845 --> 00:01:56,700
Maintenant, à l'invite, tapez npm install,

26
00:01:56,700 --> 00:02:00,500
afin d'installer tous les modules de nœuds

27
00:02:00,500 --> 00:02:04,460
dont dépend cette application angulaire.

28
00:02:04,460 --> 00:02:09,415
Donc, une fois que les modules de noeud ou tous installés,

29
00:02:09,415 --> 00:02:18,095
alors nous pouvons démarrer notre NG servir pour compiler et servir notre application Angular.

30
00:02:18,095 --> 00:02:21,765
Une fois que tout est installé par l'installation de npm,

31
00:02:21,765 --> 00:02:27,080
assurez-vous que votre serveur MongoDB est

32
00:02:27,080 --> 00:02:32,365
opérationnel et que votre serveur API REST est également opérationnel.

33
00:02:32,365 --> 00:02:35,165
Sinon, votre client angulaire ne fonctionnera pas.

34
00:02:35,165 --> 00:02:39,720
Donc, maintenant que vous avez installé votre client Angular sur votre ordinateur,

35
00:02:39,720 --> 00:02:43,815
à l'invite de type ng servir et

36
00:02:43,815 --> 00:02:50,755
votre application Angular sera compilée et servie par ng servir dans un court laps de temps.

37
00:02:50,755 --> 00:02:54,725
Une fois votre application Angular compilée avec succès,

38
00:02:54,725 --> 00:02:59,345
allez dans un navigateur et ouvrez votre application Angular dans le navigateur.

39
00:02:59,345 --> 00:03:01,025
Aller au navigateur,

40
00:03:01,025 --> 00:03:06,665
à la barre d'adresse,

41
00:03:06,665 --> 00:03:12,050
laissez-moi taper localhost:4200 et

42
00:03:12,050 --> 00:03:14,345
vous verrez que votre application Angular

43
00:03:14,345 --> 00:03:17,930
démarre et est visible sur l'écran ici.

44
00:03:17,930 --> 00:03:21,170
Vous remarquerez immédiatement que votre application Angular

45
00:03:21,170 --> 00:03:24,500
est capable de récupérer les données du serveur, puis de rendre

46
00:03:24,500 --> 00:03:28,115
les différentes parties de votre application Angular comme ce que vous avez

47
00:03:28,115 --> 00:03:33,040
fait à la fin de votre cours Angular.

48
00:03:33,080 --> 00:03:35,605
Lorsque vous allez à parler de dossier,

49
00:03:35,605 --> 00:03:42,730
vous verrez également que la page À propos de rend également les informations en tant que telles.

50
00:03:42,730 --> 00:03:45,970
Dans le menu, vous voyez les éléments du menu s'

51
00:03:45,970 --> 00:03:49,475
afficher comme nous l'avons vu avec l'application Angular.

52
00:03:49,475 --> 00:03:51,595
Maintenant, en outre, j'ai ajouté

53
00:03:51,595 --> 00:03:56,320
une page de plus à l'application de page unique intitulée Mes favoris,

54
00:03:56,320 --> 00:04:02,590
que vous ne pouvez pas accéder car aucun utilisateur n'est connecté au système.

55
00:04:02,590 --> 00:04:05,960
Donc, vous voyez que je n'ai aucun utilisateur connecté au système.

56
00:04:05,960 --> 00:04:09,120
Donc, c'est pourquoi il ne sert à rien d'indiquer mes favoris,

57
00:04:09,120 --> 00:04:10,845
parce que vous ne savez pas quel utilisateur,

58
00:04:10,845 --> 00:04:12,990
en tant que favoris, devrait être affiché ici.

59
00:04:12,990 --> 00:04:15,580
La page de contact comme d'habitude.

60
00:04:15,580 --> 00:04:17,345
Maintenant, connectons-nous.

61
00:04:17,345 --> 00:04:19,235
Pour vous connecter à notre application,

62
00:04:19,235 --> 00:04:25,665
nous allons cliquer sur le bouton Connexion et vous verrez alors que la boîte de dialogue Connexion apparaît.

63
00:04:25,665 --> 00:04:32,620
Ensuite, permettez-moi de me connecter en tant que l'un des utilisateurs enregistrés,

64
00:04:32,620 --> 00:04:37,295
que nous avons enregistrés dans le cadre de ce cours plus tôt.

65
00:04:37,295 --> 00:04:39,100
Donc, une fois que vous

66
00:04:39,100 --> 00:04:41,840
vous connectez, vous remarquerez immédiatement que, dans

67
00:04:41,840 --> 00:04:44,150
le coin droit,

68
00:04:44,150 --> 00:04:47,410
vous voyez que le bouton Connexion est maintenant devenu

69
00:04:47,410 --> 00:04:51,730
Déconnexion et que le nom de l'utilisateur est indiqué ici.

70
00:04:51,730 --> 00:04:54,500
Donc, quiconque est connecté est indiqué ici.

71
00:04:54,500 --> 00:04:56,110
Vous pouvez également, en principe,

72
00:04:56,110 --> 00:05:00,925
remplacer cela par l'image de l'utilisateur.

73
00:05:00,925 --> 00:05:03,715
Maintenant, pour cela, vous devez faire plus de modifications au

74
00:05:03,715 --> 00:05:07,790
client et au serveur afin de prendre en charge l'affichage de l'image ici.

75
00:05:07,790 --> 00:05:10,570
Mais, pour le moment, je vous montre simplement comment nous

76
00:05:10,570 --> 00:05:14,260
pouvons facilement afficher les informations de l'utilisateur ici.

77
00:05:14,260 --> 00:05:17,200
Donc, cela nécessite une modification mineure à la tête du

78
00:05:17,200 --> 00:05:20,335
composant où je serai en mesure de récupérer

79
00:05:20,335 --> 00:05:23,410
le nom d'utilisateur d'un service

80
00:05:23,410 --> 00:05:27,060
appelé comme le service OAuth dont nous parlerons dans un court laps de temps.

81
00:05:27,060 --> 00:05:29,420
Donc, une fois que l'utilisateur se connecte,

82
00:05:29,420 --> 00:05:31,955
alors si vous cliquez maintenant sur Mes favoris,

83
00:05:31,955 --> 00:05:35,360
vous remarquerez qu'il n'y a rien dans mes favoris pour l'utilisateur.

84
00:05:35,360 --> 00:05:40,815
Évidemment, parce que l'utilisateur n'a pas encore choisi de favoris.

85
00:05:40,815 --> 00:05:44,675
Alors, allons maintenant au Menu, puis dans le Menu,

86
00:05:44,675 --> 00:05:52,980
laissez-moi sélectionner un élément et puis ils ajouteront ce plat à nos favoris.

87
00:05:52,980 --> 00:05:55,230
Donc, en descendant ci-dessous,

88
00:05:55,230 --> 00:05:58,415
vous voyez le symbole du cœur là-bas,

89
00:05:58,415 --> 00:06:02,655
cliquez dessus et vous verrez que cela serait ajouté dans Les Favoris.

90
00:06:02,655 --> 00:06:06,620
Le fait que cela ait été ajouté dans Les Favoris est indiqué par

91
00:06:06,620 --> 00:06:12,790
le changement dans l'icône ici d'un cœur non rempli à un cœur rempli.

92
00:06:12,790 --> 00:06:15,790
Maintenant, si vous allez à un autre plat,

93
00:06:15,790 --> 00:06:19,080
vous remarqueriez que cela a un cœur vide, ce

94
00:06:19,080 --> 00:06:22,795
qui signifie que ce n'est pas encore parmi nos favoris.

95
00:06:22,795 --> 00:06:25,070
Donc, laissez-moi ajouter un élément de plus à

96
00:06:25,070 --> 00:06:29,990
mes favoris, puis ajoutons un troisième élément à mes favoris aussi.

97
00:06:29,990 --> 00:06:37,455
Donc, maintenant, vous verrez que si je vais maintenant à Mes Favoris,

98
00:06:37,455 --> 00:06:42,560
vous verrez un ensemble de Mes Favoris s'afficher ici.

99
00:06:42,560 --> 00:06:46,610
Donc, vous avez vu que je viens d'ajouter ces trois plats à Mes favoris.

100
00:06:46,610 --> 00:06:48,820
Donc, ceux-ci sont affichés ici.

101
00:06:48,820 --> 00:06:57,100
Donc, cela est suivi en utilisant le point de fin favoris sur le côté serveur,

102
00:06:57,100 --> 00:06:59,870
que j'ai implémenté dans le cadre de votre dernière affectation.

103
00:06:59,870 --> 00:07:05,554
Donc, si vous avez fait cette affectation correctement, cette partie devrait fonctionner comme prévu.

104
00:07:05,554 --> 00:07:09,310
Maintenant, nous pouvons également modifier Mon favori.

105
00:07:09,310 --> 00:07:11,320
Ainsi, par exemple, dans le coin droit ici,

106
00:07:11,320 --> 00:07:14,165
vous voyez cette option Supprimer ici.

107
00:07:14,165 --> 00:07:16,320
Alors, laissez-moi allumer ça.

108
00:07:16,320 --> 00:07:17,730
Ainsi, lorsque vous l'activez,

109
00:07:17,730 --> 00:07:22,025
vous voyez immédiatement les trois croix rouges

110
00:07:22,025 --> 00:07:27,630
apparaissent en bas de ces trois éléments dans Mes favoris.

111
00:07:27,630 --> 00:07:29,905
Quand je clique dessus, ils disparaissent.

112
00:07:29,905 --> 00:07:36,750
Donc, c'est une façon d'activer les boutons de suppression de vos favoris, puis.

113
00:07:36,750 --> 00:07:40,965
Donc, laissez-moi aller de l'avant et supprimer l'un des éléments de Mes Favoris.

114
00:07:40,965 --> 00:07:42,515
Donc, lorsque je clique sur ce bouton,

115
00:07:42,515 --> 00:07:47,540
vous remarquerez immédiatement que cet élément est supprimé de Mes Favoris,

116
00:07:47,540 --> 00:07:50,405
et disparaît immédiatement et Mes Favoris sont

117
00:07:50,405 --> 00:07:54,780
mis à jour et vous verrez la valeur résultante affichée ici.

118
00:07:54,780 --> 00:07:56,115
En même temps,

119
00:07:56,115 --> 00:07:58,530
cette bascule Supprimer est désactivée, de

120
00:07:58,530 --> 00:08:01,250
sorte que les boutons de suppression ne sont plus visibles.

121
00:08:01,250 --> 00:08:07,610
Je peux toujours activer à nouveau les boutons de suppression en cliquant sur le activé et désactivé ici.

122
00:08:07,610 --> 00:08:11,210
Par conséquent, notez que les Mes favoris seront affichés uniquement

123
00:08:11,210 --> 00:08:15,790
pour les utilisateurs qui sont connectés au système.

124
00:08:15,790 --> 00:08:21,260
Ainsi, vous remarquez immédiatement un ensemble de modifications qui ont été

125
00:08:21,260 --> 00:08:23,540
apportées au client angulaire afin de prendre en

126
00:08:23,540 --> 00:08:26,930
charge certaines de ces fonctionnalités supplémentaires que vous voyez ici.

127
00:08:26,930 --> 00:08:31,190
Vous avez également vu la fonctionnalité Connexion et déconnexion être prise en charge ici.

128
00:08:31,190 --> 00:08:33,000
Donc, quand je clique sur le bouton Déconnexion,

129
00:08:33,000 --> 00:08:35,930
vous remarquez immédiatement que l'utilisateur est déconnecté

130
00:08:35,930 --> 00:08:39,800
et le nom d'utilisateur disparaît de là,

131
00:08:39,800 --> 00:08:44,250
et donc le bouton est également transformé en bouton Connexion.

132
00:08:44,560 --> 00:08:49,760
Donc, avec cela, vous remarquez comment mon client Angular a été

133
00:08:49,760 --> 00:08:54,880
mis à jour pour utiliser le nouveau serveur API REST

134
00:08:54,880 --> 00:08:59,100
afin de prendre en charge les favoris enregistrés et du côté serveur

135
00:08:59,100 --> 00:09:04,930
, puis automatiquement reflétés dans mon application cliente comme indiqué ici.

136
00:09:04,930 --> 00:09:08,305
Voyons brièvement

137
00:09:08,305 --> 00:09:14,160
le code angulaire que j'ai fourni pour vous dans le dépôt GitHub,

138
00:09:14,160 --> 00:09:17,710
et voyons aussi comment nous avons modifié des parties du code

139
00:09:17,710 --> 00:09:21,655
afin d'implémenter l'application Angular mise à jour.

140
00:09:21,655 --> 00:09:24,310
Vous remarquerez qu'il existe un nouveau service

141
00:09:24,310 --> 00:09:27,130
que j'ai introduit ici appelé service d'authentification.

142
00:09:27,130 --> 00:09:29,295
Le service d'authentification prend en charge

143
00:09:29,295 --> 00:09:35,985
toutes les actions liées à l'authentification pour l'application Angular.

144
00:09:35,985 --> 00:09:37,715
Donc, dans le service d'authentification,

145
00:09:37,715 --> 00:09:40,760
vous remarquerez immédiatement que j'ai

146
00:09:40,760 --> 00:09:45,545
un ensemble d'informations que j'ai configuré ici.

147
00:09:45,545 --> 00:09:47,985
Puisque vous connaissez déjà Angular,

148
00:09:47,985 --> 00:09:52,535
vous devriez être capable de traiter facilement tout ce qui est écrit ici.

149
00:09:52,535 --> 00:09:57,355
Notez en particulier que dans le service d'authentification lui-même,

150
00:09:57,355 --> 00:09:59,240
je stocke des informations comme,

151
00:09:59,240 --> 00:10:00,815
par exemple, le TokenKey,

152
00:10:00,815 --> 00:10:06,985
qui est la clé pour le stockage local où je stocke le jeton Web JSON,

153
00:10:06,985 --> 00:10:11,500
et aussi quelques variables supplémentaires

154
00:10:11,500 --> 00:10:16,310
ici où je suis en train de suivre le nom d'utilisateur et où je suis authentifié,

155
00:10:16,310 --> 00:10:21,955
et gardez également une trace du jeton Web JSON ici.

156
00:10:21,955 --> 00:10:28,540
Maintenant, commençons par regarder quand l'utilisateur se connecte.

157
00:10:28,540 --> 00:10:30,290
Ainsi, lorsque l'utilisateur se connecte,

158
00:10:30,290 --> 00:10:37,135
alors cette fonction appelée login sera appelée dans notre service d'authentification ici,

159
00:10:37,135 --> 00:10:40,350
et lorsque la connexion est appelée dans le service d'authentification,

160
00:10:40,350 --> 00:10:44,730
cela sera transmis dans un paramètre appelé utilisateur qui contient

161
00:10:44,730 --> 00:10:49,665
le nom d'utilisateur et le mot de passe dans le cadre de l'objet JavaScript utilisateur.

162
00:10:49,665 --> 00:10:57,890
Donc, à ce stade, je fais un post HTTP sur le BaseURL plus utilisateurs/login.

163
00:10:57,890 --> 00:11:00,320
Notez également qu'ici,

164
00:11:00,320 --> 00:11:06,030
je fournit l'AuthResponse comme qualificateur ici.

165
00:11:06,030 --> 00:11:09,945
L' AuthResponse n'est rien d'autre qu'une interface que j'ai

166
00:11:09,945 --> 00:11:11,350
implémentée ici, en haut ici.

167
00:11:11,350 --> 00:11:14,295
Donc, cette interface spécifie essentiellement

168
00:11:14,295 --> 00:11:16,860
les informations qui vont revenir comme

169
00:11:16,860 --> 00:11:19,670
ma réponse d'authentification du côté serveur,

170
00:11:19,670 --> 00:11:22,690
la structure des données JSON qui

171
00:11:22,690 --> 00:11:25,690
revient du côté serveur et les objets JavaScript correspondants.

172
00:11:25,690 --> 00:11:28,865
Donc, vous remarquez que lorsque nous avons mis à jour le serveur,

173
00:11:28,865 --> 00:11:32,370
nous nous sommes assurés que le serveur renvoie l'état,

174
00:11:32,370 --> 00:11:37,035
le succès, l'indicateur et le jeton dans l'index de chaîne.

175
00:11:37,035 --> 00:11:42,000
Donc, cette information est obtenue ici.

176
00:11:42,000 --> 00:11:44,240
Maintenant, quand je fais un post à ce sujet,

177
00:11:44,240 --> 00:11:52,975
je transmets le nom d'utilisateur et le mot de passe à la publication sur ce point de terminaison /users/login.

178
00:11:52,975 --> 00:11:58,375
Lorsque la réponse revient de la réponse,

179
00:11:58,375 --> 00:12:03,490
le message de réponse lui-même contiendra, comme nous l'avons vu,

180
00:12:03,490 --> 00:12:06,525
le succès, le champ de jeton,

181
00:12:06,525 --> 00:12:09,885
ainsi que le message d'état ici.

182
00:12:09,885 --> 00:12:11,950
Donc, à partir du message de réponse,

183
00:12:11,950 --> 00:12:16,960
j'extrait le jeton et puis le passe à cette fonction que j'implémente ici,

184
00:12:16,960 --> 00:12:20,415
fonction locale ici, appelée StoreUserCredentials.

185
00:12:20,415 --> 00:12:30,295
Donc, cela sera retourné à mon application et sera stocké dans mon client,

186
00:12:30,295 --> 00:12:32,220
dans le stockage local.

187
00:12:32,220 --> 00:12:34,545
Ensuite, à partir de cette fonction,

188
00:12:34,545 --> 00:12:37,870
je retourne cette information à

189
00:12:37,870 --> 00:12:43,160
la fonction appelant à partir de laquelle j'ai initié le processus de connexion.

190
00:12:43,160 --> 00:12:51,610
Donc, de cette façon, j'indiquerai à mon composant de connexion que la connexion a été réussie,

191
00:12:51,610 --> 00:12:56,345
puis je passerai également le nom d'utilisateur à mon composant de connexion,

192
00:12:56,345 --> 00:12:59,680
qui passera ensuite cette information sur le composant d'en-tête,

193
00:12:59,680 --> 00:13:03,860
et le composant d'en-tête l'utilise pour refléter le nom d'utilisateur sur

194
00:13:03,860 --> 00:13:08,830
le en haut là,

195
00:13:08,830 --> 00:13:11,145
et aussi nous attrapons l'erreur ici.

196
00:13:11,145 --> 00:13:16,390
Donc, c'est une implémentation très simple de la façon dont nous avons effectué la connexion.

197
00:13:16,390 --> 00:13:17,840
Lorsque vous effectuez la déconnexion,

198
00:13:17,840 --> 00:13:20,735
remarquez ce que je fais lorsque l'utilisateur appelle une déconnexion.

199
00:13:20,735 --> 00:13:22,070
Lorsque l'utilisateur appelle une déconnexion,

200
00:13:22,070 --> 00:13:24,560
je détruis simplement les informations d'identification de l'utilisateur,

201
00:13:24,560 --> 00:13:26,845
ce qui inclut

202
00:13:26,845 --> 00:13:33,085
le jeton Web JSON que j'ai obtenu lorsque je me suis connecté à mon application.

203
00:13:33,085 --> 00:13:37,010
Ensuite, certaines fonctions d'assistance supplémentaires que j'ai implémentées ici appelées

204
00:13:37,010 --> 00:13:40,920
getUserName sont connectées et getToken,

205
00:13:40,920 --> 00:13:45,370
ce qui sera utile à partir de mes autres applications,

206
00:13:45,370 --> 00:13:50,140
d'autres composants et services.

207
00:13:50,140 --> 00:13:57,375
Donc, maintenant regardons quelques-unes des fonctions d'aide que nous avons implémentées ici.

208
00:13:57,375 --> 00:14:04,685
Ainsi, LoadUserCredentials récupère les informations d'identification du stockage local.

209
00:14:04,685 --> 00:14:10,800
Donc, vous remarquez qu'ici j'appelle LocalStorage et puis je dis GetItem.

210
00:14:10,800 --> 00:14:12,750
Donc, le LocalStorage ici utilise

211
00:14:12,750 --> 00:14:17,305
le stockage local du navigateur Web qui est pris en charge par les navigateurs Web standard,

212
00:14:17,305 --> 00:14:19,140
et stocke les informations là,

213
00:14:19,140 --> 00:14:21,620
puis il récupère ces informations là.

214
00:14:21,620 --> 00:14:23,830
Ensuite, à partir de là, les informations d'identification,

215
00:14:23,830 --> 00:14:25,745
si elles sont valides,

216
00:14:25,745 --> 00:14:27,950
alors ces informations d'identification seront configurées ici.

217
00:14:27,950 --> 00:14:32,735
Donc, toutes ces variables que j'ai définies ici seront initialisées avec

218
00:14:32,735 --> 00:14:38,965
les informations appropriées après avoir été récupérées à partir du LocalStorage.

219
00:14:38,965 --> 00:14:42,560
Maintenant, de même, la fonction StoreUserCredentials

220
00:14:42,560 --> 00:14:46,285
que j'ai implémentée ici est appelée à partir de la méthode de connexion.

221
00:14:46,285 --> 00:14:50,165
Lorsque ces informations sont transmises,

222
00:14:50,165 --> 00:14:52,290
les informations d'identification sont transmises,

223
00:14:52,290 --> 00:14:57,665
ces informations sont stockées dans le LocalStorage à ce stade avec cette clé.

224
00:14:57,665 --> 00:15:00,825
Ensuite, UseCredentials

225
00:15:00,825 --> 00:15:05,510
configure fondamentalement toutes les variables que j'ai dans le service d'authentification.

226
00:15:05,510 --> 00:15:07,285
Donc, il configure le jeton,

227
00:15:07,285 --> 00:15:09,225
il configure le nom d'utilisateur,

228
00:15:09,225 --> 00:15:14,270
puis il configure la fonction isAuthenticated ici.

229
00:15:14,270 --> 00:15:17,590
Donc, notez que le nom d'utilisateur lui-même ici,

230
00:15:17,590 --> 00:15:20,865
je l'ai déclaré comme un sujet,

231
00:15:20,865 --> 00:15:23,595
ce qui n'est rien d'autre qu'un observable ici.

232
00:15:23,595 --> 00:15:27,410
Donc, c'est pourquoi chaque fois que je dis,

233
00:15:27,410 --> 00:15:30,705
SendUserName ici, je dis informations d'identification nom d'utilisateur.

234
00:15:30,705 --> 00:15:34,780
Donc, ce SendUserName implémenté en haut ici,

235
00:15:34,780 --> 00:15:40,080
notez que c'est là que la valeur observable est renvoyée.

236
00:15:40,080 --> 00:15:43,305
Donc, c'est pourquoi je dis ce nom d'utilisateur suivant.

237
00:15:43,305 --> 00:15:45,370
Donc, l'observable.

238
00:15:45,370 --> 00:15:49,630
Renvoie le nom qui est fourni en

239
00:15:49,630 --> 00:15:55,130
tant que paramètre à quiconque s'est enregistré pour observer cet observable.

240
00:15:55,130 --> 00:15:59,070
Donc, cela observable, je vais observer cela à partir de

241
00:15:59,070 --> 00:16:03,980
mon composant d'en-tête et de cette façon chaque fois que le nom d'utilisateur change,

242
00:16:03,980 --> 00:16:09,870
soit de undefined à un nom d'utilisateur donné ou vice versa,

243
00:16:09,870 --> 00:16:13,040
alors je peux mettre à jour ma barre d'outils dans

244
00:16:13,040 --> 00:16:17,670
le composant d'en-tête pour refléter si l'utilisateur est connecté ou déconnecté.

245
00:16:17,670 --> 00:16:21,770
Donc, qui est configuré en utilisant cette UseCredentials.

246
00:16:21,770 --> 00:16:29,010
Maintenant, DestroyUserCredentials définit fondamentalement le jeton d'authentification sur undefined.

247
00:16:29,010 --> 00:16:34,320
Il efface le nom d'utilisateur, puis définit le IsAuthenticated à false, puis

248
00:16:34,320 --> 00:16:37,560
supprime cette information de mon magasin local, donc

249
00:16:37,560 --> 00:16:40,930
il jette fondamentalement le jsonwebtoken à cette partie.

250
00:16:40,930 --> 00:16:43,330
Donc, c'est comme ça que vous aimez un utilisateur.

251
00:16:43,330 --> 00:16:47,150
Donc, une fois que le jsonwebtoken est perdu, l'utilisateur ne peut plus

252
00:16:47,150 --> 00:16:49,850
s'authentifier lui-même

253
00:16:49,850 --> 00:16:53,305
côté serveur car le jeton n'est plus disponible pour nous.

254
00:16:53,305 --> 00:16:58,340
C' est ainsi que nous implémentons la fonction de déconnexion dans notre application.

255
00:16:58,340 --> 00:17:01,030
Prenez donc le temps de passer par le

256
00:17:01,030 --> 00:17:05,350
auth.service ici pour voir comment j'ai implémenté les différentes fonctionnalités.

257
00:17:05,350 --> 00:17:06,865
Maintenant, à ce moment,

258
00:17:06,865 --> 00:17:13,190
je suis sûr que vous êtes très familier avec la façon dont les applications Angular sont implémentées,

259
00:17:13,190 --> 00:17:17,960
il ne devrait donc pas être si difficile pour vous de comprendre comment ce code est implémenté.

260
00:17:17,960 --> 00:17:24,575
Maintenant, une autre fonction sur laquelle j'attirerais votre attention est le jeton de vérification JWT, ici.

261
00:17:24,575 --> 00:17:29,040
Cette fonction peut être appelée à tout moment pour vérifier et

262
00:17:29,040 --> 00:17:33,360
vous assurer que notre jeton web JSON est toujours valide.

263
00:17:33,360 --> 00:17:40,500
Donc, c'est là que j'envoie la requête get aux utilisateurs slash check JWT jeton.

264
00:17:40,500 --> 00:17:49,450
Rappelons que nous avons implémenté cette route côté serveur dans les fichiers .js et.

265
00:17:49,450 --> 00:17:55,385
Donc, à partir de là, nous serons en mesure de vérifier si le jsonwebtoken est toujours valide ou non.

266
00:17:55,385 --> 00:17:57,855
Si le jsonwebtoken n'est pas valide,

267
00:17:57,855 --> 00:17:59,170
nous allons détruire les informations d'

268
00:17:59,170 --> 00:18:03,045
identification de l'utilisateur, puis nous attendons à ce que l'utilisateur se connecte à nouveau.

269
00:18:03,045 --> 00:18:06,550
Si le jsonwebtoken est valide, alors c'est correct et

270
00:18:06,550 --> 00:18:10,375
nous pouvons continuer à permettre

271
00:18:10,375 --> 00:18:14,540
à l'utilisateur de reconnaître que nous sommes connectés. Donc, même si vous fermez

272
00:18:14,540 --> 00:18:18,665
votre navigateur, puis rouvrez le navigateur, puis rouvrez votre application Angular,

273
00:18:18,665 --> 00:18:26,625
si vous vous êtes connecté plus tôt et que le jsonwebtoken a été enregistré dans le stockage local,

274
00:18:26,625 --> 00:18:28,930
il peut être récupéré à partir de là et

275
00:18:28,930 --> 00:18:33,740
votre statut de connexion sera restauré dans votre application Angular.

276
00:18:33,740 --> 00:18:36,420
Si le jeton web json a expiré,

277
00:18:36,420 --> 00:18:38,635
nous ne serons pas autorisés à nous connecter.

278
00:18:38,635 --> 00:18:44,280
Donc, chaque fois que vous actualisez votre application Angular dans

279
00:18:44,280 --> 00:18:47,290
votre navigateur ou rechargez votre application Angular dans votre navigateur, vous allez

280
00:18:47,290 --> 00:18:50,550
vérifier le jsonwebtoken pour vous assurer qu'il est toujours valide.

281
00:18:50,550 --> 00:18:53,095
Si ce n'est pas valide, l'utilisateur sera

282
00:18:53,095 --> 00:18:56,200
effacé et vous devrez donc vous connecter à nouveau.

283
00:18:56,200 --> 00:19:00,370
Si ce n'est pas le cas, les informations de l'utilisateur connecté sont récupérées

284
00:19:00,370 --> 00:19:05,020
à partir du LocalStorage, puis initialisées dans mon application Angular.

285
00:19:05,020 --> 00:19:09,765
Périodiquement, si à un moment donné votre serveur

286
00:19:09,765 --> 00:19:15,575
répond avec un message 401 Non autorisé,

287
00:19:15,575 --> 00:19:16,880
même à ce moment,

288
00:19:16,880 --> 00:19:22,045
nous allons à nouveau vérifier que le jsonwebtoken est valide, puis autoriser cela.

289
00:19:22,045 --> 00:19:26,960
Nous allons le faire en utilisant quelque chose appelé les intercepteurs Http.

290
00:19:26,960 --> 00:19:30,630
Laissez-moi faire un tour à cette partie du code,

291
00:19:30,630 --> 00:19:35,180
puis vous expliquer comment les intercepteurs fonctionnent en peu de temps.

292
00:19:35,180 --> 00:19:38,635
Donc maintenant, en plus de AuthService,

293
00:19:38,635 --> 00:19:45,545
dans le dossier des services lui-même, vous verrez ce fichier appelé fichier AuthInterceptors.ts.

294
00:19:45,545 --> 00:19:51,285
Alors ouvrez ceci et vous verrez qu'ici j'ai implémenté des intercepteurs Http.

295
00:19:51,285 --> 00:19:54,435
Maintenant, ce que font ces intercepteurs Http,

296
00:19:54,435 --> 00:20:00,780
ceci est pris en charge avec le client Http qui vient dans le cadre d'Angular 4.4.

297
00:20:00,780 --> 00:20:04,080
Ce que font les intercepteurs http, c'est qu'ils peuvent intercepter

298
00:20:04,080 --> 00:20:06,180
les requêtes sortantes messages apportent

299
00:20:06,180 --> 00:20:09,695
des modifications au message de requête avant qu'il ne soit envoyé.

300
00:20:09,695 --> 00:20:13,530
De même, ils peuvent intercepter les messages de réponse entrants, puis modifier

301
00:20:13,530 --> 00:20:15,660
le message de réponse entrant avant que

302
00:20:15,660 --> 00:20:18,970
la réponse ne soit remise à l'application Angular.

303
00:20:18,970 --> 00:20:22,920
Alors, par interception, comment fonctionne cet intercepteur ?

304
00:20:22,920 --> 00:20:25,625
Donc, pour faire fonctionner cet intercepteur,

305
00:20:25,625 --> 00:20:28,620
nous implémentons, comme vous le voyez,

306
00:20:28,620 --> 00:20:37,285
une classe appelée en tant que HttpInterceptor en étendant le HttpInterceptor.

307
00:20:37,285 --> 00:20:39,805
Donc ici, j'ai implémenté l'AuthInterceptor.

308
00:20:39,805 --> 00:20:42,175
Alors, que fait cet AuthInterceptor ?

309
00:20:42,175 --> 00:20:47,660
Cet AuthInterceptor capture essentiellement les requêtes sortantes.

310
00:20:47,660 --> 00:20:51,785
Donc, pour capturer une requête sortante, vous appelez cette fonction appelée interception

311
00:20:51,785 --> 00:20:56,700
et cela vous donnera accès à la requête et à la suivante.

312
00:20:56,700 --> 00:21:00,550
Ainsi, vous pourriez enchaîner

313
00:21:00,550 --> 00:21:05,080
un tas d'intercepteurs l'un derrière l'autre si vous le souhaitez, afin

314
00:21:05,080 --> 00:21:11,050
qu'ils puissent traiter les demandes sortantes l'une après l'autre si vous le souhaitez.

315
00:21:11,050 --> 00:21:20,260
Ce que cette interception fait, c'est qu'elle vous donne accès au message de requête Http.

316
00:21:20,260 --> 00:21:23,300
Donc, quand j'ai accès au message de requête Http,

317
00:21:23,300 --> 00:21:27,810
vous remarquerez qu'ici j'injecte le service d'authentification.

318
00:21:27,810 --> 00:21:33,870
Maintenant, contrairement à la façon dont nous injections des services dans des composants,

319
00:21:33,870 --> 00:21:37,295
ici je montre l'utilisation d'un injecteur.

320
00:21:37,295 --> 00:21:39,995
Un injecteur fait partie du code angulaire.

321
00:21:39,995 --> 00:21:44,080
Ainsi, à l'aide d'un injecteur, vous pouvez injecter des services ou

322
00:21:44,080 --> 00:21:50,020
d'autres composants dans d'autres services ou composants.

323
00:21:50,020 --> 00:21:57,495
Donc, ici, vous voyez que j'injecte le service d'authentification ici en utilisant ceci.

324
00:21:57,495 --> 00:22:04,690
Maintenant, une autre raison est que si j'injecte directement le service dans mon constructeur,

325
00:22:04,690 --> 00:22:11,545
il développera une dépendance circulaire entre l'intercepteur et l'AuthService,

326
00:22:11,545 --> 00:22:15,200
et cela fera que votre code ne fonctionnera pas.

327
00:22:15,200 --> 00:22:18,190
C' est donc un travail autour des problèmes.

328
00:22:18,190 --> 00:22:21,430
Alors que votre intercepteur- parce que j'ai besoin du

329
00:22:21,430 --> 00:22:25,810
AuthService, afin de mettre la main sur le jeton de

330
00:22:25,810 --> 00:22:31,680
l'AuthService et AuthService dépend à son tour de cet intercepteur, c'est

331
00:22:31,680 --> 00:22:38,760
pourquoi, afin de briser la boucle, j'injecte explicitement l'AuthService dans ce cas.

332
00:22:38,760 --> 00:22:42,630
Maintenant, c'est quelque chose que j'ai compris par essai

333
00:22:42,630 --> 00:22:47,080
et erreur, j'ai d'abord commencé et j'ai simplement injecté

334
00:22:47,080 --> 00:22:49,600
les services impairs au constructeur, puis j'ai trouvé qu'

335
00:22:49,600 --> 00:22:54,270
Angular ne compilait pas le code, puis j'ai compris qu'

336
00:22:54,270 --> 00:23:01,510
il y avait une erreur là, puis après avoir fait une recherche Google ensuite

337
00:23:01,510 --> 00:23:05,330
découvert que c'est une autre façon de gérer

338
00:23:05,330 --> 00:23:09,620
la même chose et cela fonctionne beaucoup mieux pour notre application.

339
00:23:09,620 --> 00:23:13,560
Donc, une fois que j'injecte le AuthService à partir

340
00:23:13,560 --> 00:23:17,555
du service, je reçois le jeton et puis remarque ce que je fais ici.

341
00:23:17,555 --> 00:23:23,200
Ici, je dis clone const auth req req clone.

342
00:23:23,200 --> 00:23:29,380
Donc, nous allons cloner la demande et ensuite nous allons mettre en place dans les en-têtes.

343
00:23:29,380 --> 00:23:32,110
Donc, nous allons dire que les en-têtes req définissent

344
00:23:32,110 --> 00:23:35,240
l'autorisation et ensuite remarquer ce que je mets

345
00:23:35,240 --> 00:23:38,005
en place l'en-tête d'autorisation pour être, porteur.

346
00:23:38,005 --> 00:23:42,100
Plus AuthToken.

347
00:23:42,100 --> 00:23:47,360
Donc, dans l'en-tête d'autorisation, je suis en train de configurer le porteur et AuthToken ici. C'

348
00:23:47,360 --> 00:23:49,550
est donc ainsi que je configure

349
00:23:49,550 --> 00:23:53,080
l'en-tête d'autorisation dans

350
00:23:53,080 --> 00:23:57,465
le message de demande sortant dans mon application Angular. Donc, juste là.

351
00:23:57,465 --> 00:24:01,660
Et c'est ainsi que j'ai veillé à ce que toutes les demandes sortantes

352
00:24:01,660 --> 00:24:06,645
aient l'en-tête d'autorisation configuré avant qu'elles ne soient passées au côté serveur.

353
00:24:06,645 --> 00:24:12,775
Et puis après cela, nous allons simplement le transmettre à l'intercepteur suivant, s'il existe,

354
00:24:12,775 --> 00:24:15,140
ou à la file d'attente sortante, de

355
00:24:15,140 --> 00:24:19,935
sorte que le message de requête sera envoyé vers le serveur.

356
00:24:19,935 --> 00:24:24,830
De même, j'ai un autre intercepteur que j'ai implémenté ici.

357
00:24:24,830 --> 00:24:30,260
Cet intercepteur intercepte tout message de réponse non autorisé

358
00:24:30,260 --> 00:24:31,800
qui revient du côté serveur.

359
00:24:31,800 --> 00:24:37,150
Donc, si le serveur répond avec un message de réponse 401 non autorisé.

360
00:24:37,150 --> 00:24:39,550
Donc, à ce stade encore, même chose,

361
00:24:39,550 --> 00:24:42,760
j'ai mis en place le AuthService ici,

362
00:24:42,760 --> 00:24:46,410
et puis, à l'intérieur ici, je vais dire,

363
00:24:46,410 --> 00:24:49,060
gérer si erreur.

364
00:24:49,060 --> 00:24:54,800
Donc, c'est là que je vais mettre la main sur HttpEvent ici.

365
00:24:54,800 --> 00:25:04,580
Le HttpEvent est un objet de niveau inférieur

366
00:25:04,580 --> 00:25:08,630
à une requête, mais cela nous permet d'accéder au message de réponse entrant,

367
00:25:08,630 --> 00:25:12,530
et alors nous allons vérifier s'il y a une erreur,

368
00:25:12,530 --> 00:25:17,235
puis si l'erreur est une instance de réponse d'erreur HTTP,

369
00:25:17,235 --> 00:25:20,770
et si l'état d'erreur est 401.

370
00:25:20,770 --> 00:25:28,220
Donc, ce qui signifie que je viens de détecter que le serveur a renvoyé un message d'erreur 401.

371
00:25:28,220 --> 00:25:32,305
Donc, ce qui signifie qu'il y avait un problème d'autorisation côté serveur.

372
00:25:32,305 --> 00:25:33,790
Ensuite, à ce stade, je vais vérifier

373
00:25:33,790 --> 00:25:37,620
le jeton web json pour m'assurer que le jeton web json est toujours valide.

374
00:25:37,620 --> 00:25:39,030
Si ce n'est pas valide,

375
00:25:39,030 --> 00:25:44,910
je rejetterai mes informations d'identification et je m'attends à ce que l'utilisateur se connecte à nouveau.

376
00:25:44,910 --> 00:25:48,880
Donc, de cette façon, je m'assurerai que si mon jeton web json

377
00:25:48,880 --> 00:25:53,480
expire dans le processus d'essayer de récupérer des données,

378
00:25:53,480 --> 00:25:58,045
cela sera toujours intercepté ici parce que si le serveur répond avec un 401,

379
00:25:58,045 --> 00:26:00,280
je l'intercepterai puis effacerai

380
00:26:00,280 --> 00:26:03,830
mon jeton web json et je m'attends à ce que l'utilisateur se connecte à nouveau.

381
00:26:03,830 --> 00:26:08,750
Nous pouvons également rediriger l'utilisateur vers la page de connexion si vous le souhaitez,

382
00:26:08,750 --> 00:26:12,330
mais avec l'application Angular, c'est un peu plus compliqué de le

383
00:26:12,330 --> 00:26:16,275
faire et je ne voulais pas vous confondre en faisant tout cela.

384
00:26:16,275 --> 00:26:19,385
Au lieu de cela, je suis simplement en train de déconnecter

385
00:26:19,385 --> 00:26:22,500
l'utilisateur à ce stade, puis de détruire les informations d'identification de

386
00:26:22,500 --> 00:26:25,855
l'utilisateur, de sorte que l'utilisateur sera censé se connecter à ce stade.

387
00:26:25,855 --> 00:26:33,880
Ainsi, une gestion simple de la façon dont nous injectons l'en-tête d'autorisation dans la demande sortante,

388
00:26:33,880 --> 00:26:38,850
et interceptons également les 401 messages non autorisés

389
00:26:38,850 --> 00:26:40,820
qui sont de retour du côté serveur.

390
00:26:40,820 --> 00:26:45,860
Donc, vous voyez comment ces modifications supplémentaires doivent être

391
00:26:45,860 --> 00:26:51,955
apportées à votre application Angular afin de le faire fonctionner avec votre serveur.

392
00:26:51,955 --> 00:26:55,125
Avec la partie d'authentification définie dans,

393
00:26:55,125 --> 00:26:58,200
si vous n'aviez pas d'authentification et si vous alliez simplement

394
00:26:58,200 --> 00:27:02,485
accéder aux points de terminaison de l'API restants et obtenir des opérations,

395
00:27:02,485 --> 00:27:05,240
vous n'avez même pas besoin de vous soucier de ces choses.

396
00:27:05,240 --> 00:27:06,790
Aucune authentification n'est requise.

397
00:27:06,790 --> 00:27:09,140
Les données peuvent être récupérées très facilement.

398
00:27:09,140 --> 00:27:10,590
Mais pour toutes les

399
00:27:10,590 --> 00:27:12,395
opérations de publication, de mise et de suppression,

400
00:27:12,395 --> 00:27:15,630
nous devons prendre en charge toutes ces fonctionnalités.

401
00:27:15,630 --> 00:27:21,375
C' est donc la raison pour laquelle j'ai implémenté la partie d'authentification dans mon application.

402
00:27:21,375 --> 00:27:23,995
Comme je l'ai déjà illustré,

403
00:27:23,995 --> 00:27:26,985
quand aucun utilisateur n'est connecté,

404
00:27:26,985 --> 00:27:32,570
alors nous ne serons pas en mesure de naviguer vers le point de terminaison de mes favoris

405
00:27:32,570 --> 00:27:35,035
, mais quand un utilisateur est connecté,

406
00:27:35,035 --> 00:27:40,420
alors nous pourrons voir mes favoris pour l'utilisateur spécifique.

407
00:27:40,420 --> 00:27:45,095
Ceci est implémenté en utilisant des gardes de route dans Angular.

408
00:27:45,095 --> 00:27:47,995
Maintenant, pour implémenter ces gardes d'itinéraire,

409
00:27:47,995 --> 00:27:52,080
j'ai implémenté un autre service ici appelé AuthGuardService.

410
00:27:52,080 --> 00:27:54,170
Donc, dans ce AuthGuardService,

411
00:27:54,170 --> 00:27:57,970
nous avons implémenté cette méthode appelée méthode canActivate que

412
00:27:57,970 --> 00:28:02,225
nous allons sous-classer afin d'implémenter cela.

413
00:28:02,225 --> 00:28:05,705
Et dans la méthode canActivate,

414
00:28:05,705 --> 00:28:08,550
l'implémentation retournera un booléen,

415
00:28:08,550 --> 00:28:10,090
et dans ce cas,

416
00:28:10,090 --> 00:28:15,630
ce que nous vérifions est si cet utilisateur est connecté,

417
00:28:15,630 --> 00:28:18,605
alors nous allons permettre à l'utilisateur de naviguer.

418
00:28:18,605 --> 00:28:25,480
Sinon, vous naviguerez l'utilisateur jusqu'au point de terminaison d'accueil.

419
00:28:25,480 --> 00:28:31,175
C' est ainsi que le garde de route est mis en œuvre dans ce cas.

420
00:28:31,175 --> 00:28:33,955
Maintenant, pour utiliser ce garde-route,

421
00:28:33,955 --> 00:28:41,780
nous allons voir comment les itinéraires sont mis à jour pour utiliser les gardes de route.

422
00:28:41,780 --> 00:28:44,520
Donc, dans le fichier routes.ts,

423
00:28:44,520 --> 00:28:50,435
vous pouvez voir que pour le composant favoris,

424
00:28:50,435 --> 00:28:54,510
nous voyons que nous spécifions le chemin comme favoris et le composant comme

425
00:28:54,510 --> 00:28:58,620
FavoritesComponent, puis nous spécifions cet autre champ

426
00:28:58,620 --> 00:29:07,785
appelé canActivate pour lequel nous avons spécifié AuthGuard comme paramètre ici,

427
00:29:07,785 --> 00:29:12,445
et ce AuthGuard n'est rien d'autre que le service AuthGuard que nous avons implémenté,

428
00:29:12,445 --> 00:29:14,825
qui est importé ici.

429
00:29:14,825 --> 00:29:20,405
Ainsi, lorsque AuthGuard est évalué à false,

430
00:29:20,405 --> 00:29:24,755
alors vous ne serez pas autorisé à naviguer vers le composant favoris, à la

431
00:29:24,755 --> 00:29:28,105
place, vous serez redirigé vers la maison,

432
00:29:28,105 --> 00:29:36,245
mais lorsque l'utilisateur est connecté alors évidemment l'AuthGuard évaluera à true,

433
00:29:36,245 --> 00:29:37,390
et dans ce cas,

434
00:29:37,390 --> 00:29:41,665
vous serez en mesure pour naviguer jusqu'à l'itinéraire favori.

435
00:29:41,665 --> 00:29:49,700
De même, il y a également des modifications mineures aux composants restants,

436
00:29:49,700 --> 00:29:52,200
qui vous permettent de faire face aux

437
00:29:52,200 --> 00:29:57,365
subtilités de la façon dont votre client et votre serveur se parleront les uns avec les autres.

438
00:29:57,365 --> 00:30:02,555
En particulier, notez comment le composant d'en-tête a été mis à jour pour

439
00:30:02,555 --> 00:30:08,195
refléter l'état de connexion de l'utilisateur dans la barre d'outils située en haut.

440
00:30:08,195 --> 00:30:11,500
C' est encore une fois un autre changement intéressant que j'ai

441
00:30:11,500 --> 00:30:15,710
apporté au composant d'en-tête dans notre application.

442
00:30:15,710 --> 00:30:20,220
Je vais donc laisser cela pour vous permettre de comprendre comment cela a été mis en œuvre.

443
00:30:20,220 --> 00:30:22,160
Code très simple là. Ça

444
00:30:22,160 --> 00:30:24,660
devrait être facile pour toi de comprendre ça.

445
00:30:24,660 --> 00:30:28,020
Donc, avec tous ces changements, maintenant,

446
00:30:28,020 --> 00:30:32,095
mon client angulaire est capable d'interagir avec mon serveur.

447
00:30:32,095 --> 00:30:36,540
Permettez-moi de vous montrer à nouveau comment nous pouvons poster quelques commentaires sur le serveur,

448
00:30:36,540 --> 00:30:41,995
puis voir le commentaire immédiatement reflété dans le plat.

449
00:30:41,995 --> 00:30:45,325
Donc, encore une fois pour revenir à notre application,

450
00:30:45,325 --> 00:30:50,050
nous pouvons maintenant aller au menu et ensuite tirer n'importe quel plat ici,

451
00:30:50,050 --> 00:30:52,740
et je peux poster des commentaires sur le plat ici,

452
00:30:52,740 --> 00:30:59,600
donc je mettrais immédiatement en place la note ici,

453
00:30:59,600 --> 00:31:02,540
et ma valeur de commentaire ici.

454
00:31:03,540 --> 00:31:06,700
Notez que je ne saisis pas

455
00:31:06,700 --> 00:31:15,735
mon nom d'utilisateur ou le nom de mon auteur ici dans le formulaire ici.

456
00:31:15,735 --> 00:31:18,470
Bien sûr, pour soumettre un commentaire,

457
00:31:18,470 --> 00:31:19,590
vous devez être connecté.

458
00:31:19,590 --> 00:31:24,520
Donc, si vous n'êtes pas connecté, ce commentaire ne sera pas accepté par mon serveur.

459
00:31:24,520 --> 00:31:26,935
Laisse-moi d'abord me connecter.

460
00:31:26,935 --> 00:31:32,890
Donc, je peux me connecter ici.

461
00:31:32,890 --> 00:31:34,220
Et au moment où je me

462
00:31:34,220 --> 00:31:39,255
connecte, vous remarquez immédiatement que la barre d'outils d'en-tête est mise à jour pour indiquer mon statut.

463
00:31:39,255 --> 00:31:41,375
Maintenant, je peux poster ce commentaire.

464
00:31:41,375 --> 00:31:43,990
Et vous remarquerez que lorsque je poste le commentaire,

465
00:31:43,990 --> 00:31:46,440
le commentaire est ajouté dans la liste des commentaires,

466
00:31:46,440 --> 00:31:50,575
et aussi remarquer que le champ auteur est automatiquement rempli ici.

467
00:31:50,575 --> 00:31:54,040
Parce que c'est ainsi que nous configurons notre côté serveur.

468
00:31:54,040 --> 00:31:55,570
Dans le champ commentaires,

469
00:31:55,570 --> 00:31:58,880
nous avons configuré notre utilisateur comme

470
00:31:58,880 --> 00:32:05,890
référence aux informations utilisateur

471
00:32:05,890 --> 00:32:09,755
que nous stockons sur notre serveur, et comme nous utilisons le peuplate,

472
00:32:09,755 --> 00:32:11,585
Mongoose Populate côté serveur,

473
00:32:11,585 --> 00:32:14,080
les informations utilisateur sont automatiquement renseignées

474
00:32:14,080 --> 00:32:16,715
dans les commentaires entrants du serveur côté.

475
00:32:16,715 --> 00:32:21,130
Donc, c'est ainsi que vous remarquez comment je tire parti de ce que

476
00:32:21,130 --> 00:32:25,615
le serveur me fournit déjà pour remplir automatiquement les détails.

477
00:32:25,615 --> 00:32:31,180
Ainsi, des modifications mineures à nouveau même dans

478
00:32:31,180 --> 00:32:38,880
la page de détail du plat pour refléter l'utilisation de la prise en charge des commentaires côté serveur.

479
00:32:38,880 --> 00:32:43,769
Avec cela, je complète l'illustration rapide

480
00:32:43,769 --> 00:32:49,575
du client Angular que nous avons implémenté dans le cadre de cet exercice.

481
00:32:49,575 --> 00:32:55,990
Et j'espère que vous parcourez également les détails du code dans le client Angular,

482
00:32:55,990 --> 00:32:59,410
puis réfléchissez à ce que vous avez appris dans le cours Angular et voyez

483
00:32:59,410 --> 00:33:03,105
comment les modifications nous permettent d'implémenter

484
00:33:03,105 --> 00:33:06,350
dans un client angulaire modifié qui est maintenant

485
00:33:06,350 --> 00:33:09,705
capable de communiquer avec le serveur et puis prennent en charge toutes les fonctionnalités

486
00:33:09,705 --> 00:33:17,310
que nous avions l'intention d'implémenter à la fois sur le client et sur le serveur.