1
00:00:03,650 --> 00:00:08,090
Maintenant, que nous avons terminé la mise à jour du côté serveur.

2
00:00:08,090 --> 00:00:11,045
Il est temps de passer au client réactif.

3
00:00:11,045 --> 00:00:15,060
Pour votre commodité, je vous ai fourni le référentiel GitHub,

4
00:00:15,060 --> 00:00:20,330
qui contient la version finale du client qui est capable de communiquer avec

5
00:00:20,330 --> 00:00:26,300
notre serveur API REST, puis de rendre les différentes vues pour notre client.

6
00:00:26,300 --> 00:00:30,095
Donc, j'ai pris la réapplication que nous avons développée dans

7
00:00:30,095 --> 00:00:34,040
le deuxième cours de la spécialisation et ensuite l'ai modifiée.

8
00:00:34,040 --> 00:00:39,175
Nous ferons un bref tour à travers le code un peu plus tard.

9
00:00:39,175 --> 00:00:43,520
Maintenant, vous allez cloner le dépôt Git sur votre ordinateur,

10
00:00:43,520 --> 00:00:49,955
puis démarrer votre client, puis le voir communiquer avec notre ensemble de serveurs.

11
00:00:49,955 --> 00:00:53,655
Voyons les détails ensuite.

12
00:00:53,655 --> 00:00:56,985
Pour commencer cet exercice,

13
00:00:56,985 --> 00:01:00,460
dans votre terminal ou fenêtre de commande,

14
00:01:00,460 --> 00:01:06,429
allez à votre emplacement pratique, puis à l'invite, tapez git clone

15
00:01:06,429 --> 00:01:22,280
https://github.com/jmuppala/conFusion-React.git, puis laissez

16
00:01:22,280 --> 00:01:27,315
l'application React être clonée sur votre ordinateur.

17
00:01:27,315 --> 00:01:29,210
Une fois le clonage terminé,

18
00:01:29,210 --> 00:01:34,350
déplacez vers le dossier Confusion-React

19
00:01:34,350 --> 00:01:38,625
qui vient d'être créé lorsque vous clonez ce dépôt Git.

20
00:01:38,625 --> 00:01:43,965
Ensuite, vous remarquerez immédiatement qu'il y a déjà un tas de fichiers.

21
00:01:43,965 --> 00:01:50,565
Maintenant, à l'invite, tapez yarn install,

22
00:01:50,565 --> 00:01:54,350
afin d'installer tous les modules de nœuds

23
00:01:54,350 --> 00:01:58,155
dont dépend cette application React.

24
00:01:58,155 --> 00:02:03,140
Donc, une fois que les modules de noeud sont tous installés,

25
00:02:03,140 --> 00:02:11,810
alors nous pouvons démarrer notre fil commencer à compiler et servir notre application React.

26
00:02:11,810 --> 00:02:13,840
Une fois que tout est dans,

27
00:02:13,840 --> 00:02:18,650
assurez-vous que votre serveur MongoDB est

28
00:02:18,650 --> 00:02:23,775
opérationnel et que votre serveur API REST est également opérationnel.

29
00:02:23,775 --> 00:02:26,030
Sinon, le client ne fonctionnera pas.

30
00:02:26,030 --> 00:02:30,650
Donc, maintenant que vous avez installé votre client sur votre ordinateur,

31
00:02:30,650 --> 00:02:33,200
ajoutez le début de fil de type invite

32
00:02:33,200 --> 00:02:38,610
et votre application sera recompilée et servie dans un court laps de temps.

33
00:02:38,610 --> 00:02:42,434
Une fois votre application compilée avec succès,

34
00:02:42,434 --> 00:02:45,650
allez dans le navigateur et vous verrez que

35
00:02:45,650 --> 00:02:51,095
votre application React démarre et est visible sur l'écran ici.

36
00:02:51,095 --> 00:02:54,290
Vous remarquerez immédiatement que votre application est

37
00:02:54,290 --> 00:02:57,440
capable de récupérer les données du serveur, puis de rendre

38
00:02:57,440 --> 00:03:00,815
les différentes parties de votre application comme vous l'avez

39
00:03:00,815 --> 00:03:06,070
fait à la fin de votre cours React.

40
00:03:06,100 --> 00:03:08,635
Lorsque vous accédez au dossier À propos,

41
00:03:08,635 --> 00:03:14,025
vous verrez également que la page A propos affiche également les informations.

42
00:03:14,025 --> 00:03:16,880
En tant que tel plus tôt dans le menu,

43
00:03:16,880 --> 00:03:21,845
vous voyez les éléments du menu s'afficher comme nous l'avons vu avec l'application.

44
00:03:21,845 --> 00:03:23,950
Maintenant, en outre, j'ai ajouté

45
00:03:23,950 --> 00:03:28,475
une page de plus à l'application d'une seule page appelée Mes favoris,

46
00:03:28,475 --> 00:03:31,150
que vous ne pouvez pas accéder,

47
00:03:31,150 --> 00:03:35,170
car aucun utilisateur n'est connecté à leur système.

48
00:03:35,170 --> 00:03:38,330
Donc, vous voyez que je n'ai aucun utilisateur connecté au système.

49
00:03:38,330 --> 00:03:42,160
Donc, c'est pourquoi il ne sert à rien d'indiquer mes favoris parce que vous ne savez pas

50
00:03:42,160 --> 00:03:47,950
quel utilisateur comme favoris devrait être affiché ici et la page de contact comme d'habitude.

51
00:03:47,950 --> 00:03:49,710
Maintenant, connectons-nous.

52
00:03:49,710 --> 00:03:51,555
Pour vous connecter à notre application,

53
00:03:51,555 --> 00:03:58,020
nous allons cliquer sur le bouton de connexion et vous verrez que la boîte de dialogue de connexion apparaît.

54
00:03:58,020 --> 00:04:04,989
Ensuite, permettez-moi de me connecter en tant que l'un des utilisateurs enregistrés,

55
00:04:04,989 --> 00:04:09,650
que nous avons enregistrés dans le cadre de ce cours plus tôt.

56
00:04:09,650 --> 00:04:11,445
Donc, une fois que vous vous connectez,

57
00:04:11,445 --> 00:04:16,530
vous remarquerez immédiatement que dans le coin droit,

58
00:04:16,530 --> 00:04:19,760
vous voyez que le bouton de connexion s'est maintenant transformé en

59
00:04:19,760 --> 00:04:24,200
déconnexion et le nom de l'utilisateur est indiqué ici.

60
00:04:24,200 --> 00:04:26,810
Donc, quiconque est connecté est indiqué ici.

61
00:04:26,810 --> 00:04:33,280
Vous pouvez également en principe remplacer cela par l'image de l'utilisateur.

62
00:04:33,280 --> 00:04:36,080
Maintenant, pour cela, vous devez faire plus de modifications au

63
00:04:36,080 --> 00:04:40,290
client et au serveur afin de prendre en charge l'affichage de l'image ici.

64
00:04:40,290 --> 00:04:42,160
Mais pour le moment, je vous montre juste

65
00:04:42,160 --> 00:04:46,640
comment nous pouvons facilement afficher les informations de l'utilisateur ici.

66
00:04:46,640 --> 00:04:50,405
Donc, cela nécessitait une modification mineure à la tête du composant,

67
00:04:50,405 --> 00:04:54,010
où je serai en mesure de récupérer le nom d'utilisateur.

68
00:04:54,010 --> 00:04:56,225
Donc, une fois que l'utilisateur se connecte,

69
00:04:56,225 --> 00:04:59,060
alors si vous cliquez maintenant sur Mes Favoris, vous

70
00:04:59,060 --> 00:05:02,185
remarquerez qu'il n'y a rien dans Mes Favoris pour l'utilisateur.

71
00:05:02,185 --> 00:05:07,635
Évidemment parce que l'utilisateur n'a pas encore choisi de favoris.

72
00:05:07,635 --> 00:05:09,880
Alors, allons maintenant au menu.

73
00:05:09,880 --> 00:05:11,520
Ensuite, dans le menu,

74
00:05:11,520 --> 00:05:19,820
laissez-moi sélectionner un élément et ensuite nous ajouterons ce plat à nos favoris.

75
00:05:19,820 --> 00:05:22,065
Donc, en descendant ici,

76
00:05:22,065 --> 00:05:25,250
vous verrez le symbole du cœur là-bas,

77
00:05:25,250 --> 00:05:29,555
cliquez dessus, et vous verrez que cela serait ajouté dans les favoris.

78
00:05:29,555 --> 00:05:32,000
Le fait que cela a été ajouté dans les favoris,

79
00:05:32,000 --> 00:05:39,550
est indiqué par le changement dans l'icône ici d'un cœur non rempli à un cœur rempli.

80
00:05:39,550 --> 00:05:42,615
Maintenant, si vous allez à n'importe quel autre plat,

81
00:05:42,615 --> 00:05:46,005
vous remarquerez que cela a un cœur vide, ce

82
00:05:46,005 --> 00:05:49,685
qui signifie que ce n'est pas encore parmi nos favoris.

83
00:05:49,685 --> 00:05:51,920
Donc, laissez-moi ajouter un élément de plus à

84
00:05:51,920 --> 00:05:56,950
mes favoris, puis ajoutons un troisième élément à mes favoris aussi.

85
00:05:56,950 --> 00:06:04,265
Donc, maintenant, vous verrez que si je vais maintenant à mes favoris,

86
00:06:04,265 --> 00:06:09,390
vous verrez un ensemble de Mes Favoris s'afficher ici.

87
00:06:09,390 --> 00:06:12,470
Donc, vous avez vu que je viens d'ajouter ces trois plats

88
00:06:12,470 --> 00:06:15,580
à mes favoris et donc ceux-ci sont affichés ici.

89
00:06:15,580 --> 00:06:18,800
Donc, ceci est suivi en utilisant

90
00:06:18,800 --> 00:06:23,240
ce point de terminaison favoris sur

91
00:06:23,240 --> 00:06:26,670
le côté serveur, selon ce qui est implémenté dans le cadre de votre dernière affectation.

92
00:06:26,670 --> 00:06:29,090
Donc, si vous avez fait cette affectation correctement,

93
00:06:29,090 --> 00:06:32,389
alors cette partie devrait fonctionner comme prévu.

94
00:06:32,389 --> 00:06:36,255
Maintenant, nous pouvons également modifier Mon favori.

95
00:06:36,255 --> 00:06:40,530
Donc, laissez-moi aller de l'avant et supprimer l'un des éléments de Mes Favoris.

96
00:06:40,530 --> 00:06:43,795
Donc, quand je clique sur ce bouton, vous remarquerez immédiatement

97
00:06:43,795 --> 00:06:48,935
que, cet élément est supprimé de Mes Favoris et disparaît immédiatement et

98
00:06:48,935 --> 00:06:54,120
mes favoris sont mis à jour et vous voyez la valeur résultante affichée ici.

99
00:06:54,120 --> 00:06:57,200
Par conséquent, notez que les Mes favoris seront affichés uniquement

100
00:06:57,200 --> 00:07:01,785
pour les utilisateurs qui sont connectés au système.

101
00:07:01,785 --> 00:07:07,250
Ainsi, vous remarquez immédiatement un ensemble de modifications qui ont été

102
00:07:07,250 --> 00:07:09,635
apportées au client afin de prendre en charge

103
00:07:09,635 --> 00:07:12,440
certaines de ces fonctionnalités supplémentaires que vous voyez ici.

104
00:07:12,440 --> 00:07:16,690
Vous avez également vu la fonctionnalité de connexion et de déconnexion être prise en charge ici.

105
00:07:16,690 --> 00:07:18,530
Donc, quand je clique sur le bouton de déconnexion,

106
00:07:18,530 --> 00:07:22,445
vous remarquez immédiatement que l'utilisateur est déconnecté et

107
00:07:22,445 --> 00:07:25,520
le nom d'utilisateur disparaît de là et

108
00:07:25,520 --> 00:07:29,375
donc le bouton est également transformé en bouton de connexion.

109
00:07:29,375 --> 00:07:34,880
Maintenant, donc, avec cela, vous remarquez comment mon client a été

110
00:07:34,880 --> 00:07:39,960
mis à jour pour utiliser le nouveau serveur API REST,

111
00:07:39,960 --> 00:07:44,180
afin de prendre en charge les favoris enregistrés côté serveur et

112
00:07:44,180 --> 00:07:50,140
ensuite automatiquement reflétés dans l'application My Client comme indiqué ici.

113
00:07:50,140 --> 00:07:55,190
Maintenant que vous avez vu l'application React modifiée en action,

114
00:07:55,190 --> 00:07:58,250
il est temps de visiter le code source pour voir

115
00:07:58,250 --> 00:08:01,340
exactement comment elle est implémentée et quelles sont les modifications

116
00:08:01,340 --> 00:08:07,875
que nous avons apportées correspondant à l'application Redux à la fin du cours Redux.

117
00:08:07,875 --> 00:08:10,760
Maintenant, les deux changements majeurs que vous remarquerez,

118
00:08:10,760 --> 00:08:16,070
est le support pour les favoris et aussi le support d'authentification,

119
00:08:16,070 --> 00:08:19,680
la connexion utilisateur et le support de déconnexion.

120
00:08:19,680 --> 00:08:21,770
Maintenant, comment ces mesures sont-elles mises en œuvre ?

121
00:08:21,770 --> 00:08:27,720
Nous commencerons notre parcours dans la partie Redux de notre application.

122
00:08:27,720 --> 00:08:29,580
Donc, en allant dans la partie Redux,

123
00:08:29,580 --> 00:08:31,585
visitons les types d'action.

124
00:08:31,585 --> 00:08:35,255
Dans les types d'action, vous verrez maintenant que nous avons

125
00:08:35,255 --> 00:08:40,210
trois nouveaux types d'action liés à leurs favoris.

126
00:08:40,210 --> 00:08:41,750
Ainsi, vous verrez le chargement des favoris, les

127
00:08:41,750 --> 00:08:43,500
favoris ont échoué, et ajouter des favoris,

128
00:08:43,500 --> 00:08:47,270
qui comme vous vous attendiez à être là.

129
00:08:47,270 --> 00:08:57,355
Ensuite, six types d'action différents liés à leur processus de connexion et de déconnexion.

130
00:08:57,355 --> 00:09:00,320
Maintenant, de sorte que vous pouvez voir la demande de connexion, le succès de connexion, l'

131
00:09:00,320 --> 00:09:02,210
échec de connexion, la demande de

132
00:09:02,210 --> 00:09:03,810
déconnexion, le succès de déconnexion et l'échec.

133
00:09:03,810 --> 00:09:10,535
Donc, nous allons voir comment ces types d'action sont réellement utilisés dans notre action créer.

134
00:09:10,535 --> 00:09:12,620
Donc, aller dans les créateurs d'action,

135
00:09:12,620 --> 00:09:17,600
donc c'est là que vous verrez le support pour les favoris ici.

136
00:09:17,600 --> 00:09:22,070
Donc, nous allons d'abord examiner le support pour les favoris, puis après cela, nous allons

137
00:09:22,070 --> 00:09:26,790
examiner le support de la prise en charge de l'authentification.

138
00:09:26,790 --> 00:09:32,630
Donc, ici, vous verrez que nous avons de nouvelles méthodes ci-dessous

139
00:09:32,630 --> 00:09:39,160
appelées FavoritesLoading, FavoritesFailed et AddFavorites.

140
00:09:39,160 --> 00:09:41,550
Maintenant, à partir de vos expériences précédentes

141
00:09:41,550 --> 00:09:45,950
vaisselleChargement et vaissellesFailed et addDishits et ainsi de suite.

142
00:09:45,950 --> 00:09:48,650
Donc, ces choses vous sont très familières, de

143
00:09:48,650 --> 00:09:54,090
sorte que c'est exactement le même type de configuration pour le code ici.

144
00:09:54,090 --> 00:09:58,170
En outre, vous verrez une autre méthode ici appelée FetchFavorites,

145
00:09:58,170 --> 00:10:01,780
qui est à nouveau comme je l'ai dit un réservoir Redux

146
00:10:01,780 --> 00:10:03,630
, qui est implémenté ici,

147
00:10:03,630 --> 00:10:11,040
où nous allons utiliser le fetch pour accéder au serveur pour récupérer les favoris.

148
00:10:11,040 --> 00:10:15,580
Donc, ce sont les méthodes que vous verrez ici et puis aussi vous verrez

149
00:10:15,580 --> 00:10:21,270
DeleteFavorite ici et aussi un réservoir Redux pour PostFavorite ici.

150
00:10:21,270 --> 00:10:24,050
Donc, dans le PostFavorite comme vous vous y attendez,

151
00:10:24,050 --> 00:10:28,130
vous afficheriez le favori sur le serveur ici.

152
00:10:28,130 --> 00:10:35,730
Donc, notez ici comment nous utilisons l'autorisation.

153
00:10:35,730 --> 00:10:39,760
Étant mis en place dans notre en-tête d'autorisation donc,

154
00:10:39,760 --> 00:10:43,710
c'est quelque chose sur lequel je voudrais attirer votre attention en ce moment,

155
00:10:43,710 --> 00:10:50,940
nous reviendrons à cela lorsque nous examinerons l'authentification et l'autorisation de l'utilisateur.

156
00:10:50,940 --> 00:10:55,820
Donc, nous sommes en train de configurer l'en-tête d'autorisation comme celui-ci en utilisant fetch ici.

157
00:10:55,820 --> 00:11:00,620
Donc, pour fetch, nous postons un élément dans le fetch

158
00:11:00,620 --> 00:11:06,845
ici et vous remarquerez que la structure de la façon dont le fetch est fait est donnée ici.

159
00:11:06,845 --> 00:11:13,735
Maintenant, chaque fois que vous publiez un favori ou supprimez un favori ou récupérez un favori

160
00:11:13,735 --> 00:11:17,825
, nous aurons toujours

161
00:11:17,825 --> 00:11:22,545
le serveur retourné à vous, l'ensemble des favoris, puis nous allons simplement ajouter ces favoris

162
00:11:22,545 --> 00:11:29,185
dans notre magasin redux ici, donc c'est ce que nous faisons ici.

163
00:11:29,185 --> 00:11:33,585
Encore une fois, la structure du code devrait vous sembler très familière,

164
00:11:33,585 --> 00:11:37,070
si vous regardez simplement comment le favori de publication,

165
00:11:37,070 --> 00:11:41,600
le favori de suppression, et les favoris de récupération sont implémentés.

166
00:11:41,600 --> 00:11:45,665
Donc, tout cela va gérer la question des favoris.

167
00:11:45,665 --> 00:11:49,520
Maintenant, comment exactement les favoris eux-mêmes sont-ils implémentés ?

168
00:11:49,520 --> 00:11:52,950
Ainsi, la fonction de réducteur est implémentée dans la structure préférée ici.

169
00:11:52,950 --> 00:11:54,875
Donc, à l'intérieur de cette fonction réduite,

170
00:11:54,875 --> 00:11:57,570
vous verrez comment nous gérons l'ajout de favoris, le

171
00:11:57,570 --> 00:11:59,760
chargement des favoris et les favoris a échoué ici.

172
00:11:59,760 --> 00:12:04,120
Encore une fois, le code devrait vous sembler très

173
00:12:04,120 --> 00:12:10,300
familier en fonction de votre expérience avec les fonctions de réducteur que vous avez vues pour redux auparavant.

174
00:12:10,300 --> 00:12:18,850
Donc, faites encore une fois un peu d'attention à la façon dont le code est implémenté.

175
00:12:18,850 --> 00:12:21,130
C' est assez simple, donc je ne passe pas

176
00:12:21,130 --> 00:12:24,610
trop de temps à expliquer comment ces choses sont mises en œuvre.

177
00:12:24,610 --> 00:12:27,720
Maintenant, en profitant de ceux-ci,

178
00:12:27,720 --> 00:12:30,895
nous avons dans les composants, nous avons maintenant

179
00:12:30,895 --> 00:12:37,630
un nouveau composant favoris dont le travail est de rendre toute la liste de nos favoris.

180
00:12:37,630 --> 00:12:41,380
Donc, ici vous voyez que le composant favoris lui-même,

181
00:12:41,380 --> 00:12:44,790
la structure du composant favoris est très similaire à

182
00:12:44,790 --> 00:12:49,460
la structure du composant de menu donc ici nous avons

183
00:12:49,460 --> 00:12:56,900
le composant favoris qui est implémenté en tant que composant fonctionnel et

184
00:12:56,900 --> 00:13:05,575
là nous rendons les favoris dans ici comme vous le voyez dans le code ici.

185
00:13:05,575 --> 00:13:08,460
Encore une fois, très simple, je pense que vous devriez être en mesure de

186
00:13:08,460 --> 00:13:12,190
comprendre facilement comment le composant favoris est

187
00:13:12,190 --> 00:13:18,835
implémenté en ayant eu de l'expérience avec la façon dont le composant de menu est implémenté là.

188
00:13:18,835 --> 00:13:22,920
Donc, encore une fois, je ne passe pas trop de temps à expliquer le code ici.

189
00:13:22,920 --> 00:13:26,605
Maintenant, l'analyse à travers le code est également

190
00:13:26,605 --> 00:13:32,280
une bonne expérience pour vous d'apprendre comment le code est implémenté afin de

191
00:13:32,280 --> 00:13:37,880
traiter ce code dans votre propre tête vous aidera à comprendre

192
00:13:37,880 --> 00:13:43,790
à nouveau pour consolider votre compréhension de réagir plus en détail.

193
00:13:43,790 --> 00:13:46,085
Donc, je vais laisser ça comme un exercice pour vous.

194
00:13:46,085 --> 00:13:49,150
Maintenant, je souligne où les changements ont été

195
00:13:49,150 --> 00:13:53,380
faits pour implémenter le support pour les favoris.

196
00:13:53,380 --> 00:13:54,840
Maintenant, le terme préféré,

197
00:13:54,840 --> 00:13:56,630
favoris est également l'effet de levier dans

198
00:13:56,630 --> 00:13:59,995
le composant de détail de plat et à l'intérieur du composant de détail de plat,

199
00:13:59,995 --> 00:14:08,830
vous verrez que nous avons l'additionnel- Ici,

200
00:14:08,830 --> 00:14:14,799
dans le plat de

201
00:14:14,799 --> 00:14:19,360
rendu composant fonctionnel, nous allons rendre le bouton qui prend en charge

202
00:14:19,360 --> 00:14:27,595
la sélection ou lorsque vous cliquez sur le contour du cœur,

203
00:14:27,595 --> 00:14:33,440
il ajoutera cet élément particulier dans votre liste de favoris.

204
00:14:33,440 --> 00:14:37,815
Donc, tout cela est supporté ici en utilisant ce bouton ici qui

205
00:14:37,815 --> 00:14:44,200
appelle comme vous voyez cette fonction appelée post favori qui est le redux.

206
00:14:44,200 --> 00:14:47,900
Merci que nous avons mis en œuvre là et ce support pour cela

207
00:14:47,900 --> 00:14:51,925
est implémenté dans les composants principaux donc quand vous allez dans le composant principal,

208
00:14:51,925 --> 00:14:56,720
vous verrez comment le favori de poste est mis en œuvre ici

209
00:14:56,720 --> 00:15:00,230
et vous verrez également que cela est

210
00:15:00,230 --> 00:15:04,540
inclus dans la carte envoyée aux accessoires et donc le post favori mis en œuvre.

211
00:15:04,540 --> 00:15:07,580
Donc, vous voyez que la structuration est très la

212
00:15:07,580 --> 00:15:11,910
même que ce que vous avez vu pour l'autre code là-bas.

213
00:15:11,910 --> 00:15:18,295
Donc, je ne vais pas passer trop de temps sur la façon dont le support des favoris est implémenté,

214
00:15:18,295 --> 00:15:21,400
permettez-moi plutôt de passer un peu plus de temps sur

215
00:15:21,400 --> 00:15:27,705
la façon dont l'autorisation et l'authentification de l'utilisateur sont prises en charge dans le code ici.

216
00:15:27,705 --> 00:15:29,765
Maintenant, pour l'authentification de l'utilisateur,

217
00:15:29,765 --> 00:15:35,810
ce que nous faisons ici est que lorsque vous allez dans le magasin de configuration ici,

218
00:15:35,810 --> 00:15:42,530
vous verrez que j'ai une autre fonction de réducteur appelée Auth qui est implémentée ici.

219
00:15:42,530 --> 00:15:49,670
Donc, cela suivra la partie autorisation de celui-ci.

220
00:15:49,670 --> 00:15:51,380
Maintenant, comment cela est-il mis en œuvre ?

221
00:15:51,380 --> 00:15:53,910
Encore une fois, aller dans les créateurs d'

222
00:15:53,910 --> 00:16:01,070
action, les types d'inaction nous avons déjà vu l'ensemble des actions liées à la connexion et la déconnexion.

223
00:16:01,070 --> 00:16:02,985
Donc, en allant dans les créateurs d'action,

224
00:16:02,985 --> 00:16:05,980
vous verrez que ici nous avons

225
00:16:05,980 --> 00:16:10,620
toutes les fonctions qui sont implémentées pour la connexion et la déconnexion.

226
00:16:10,620 --> 00:16:18,405
Donc, vous verrez une nouvelle fonction appelée login request, receive logging,

227
00:16:18,405 --> 00:16:25,765
et donc ce sont quand la connexion est réussie et ainsi de suite, mais en particulier,

228
00:16:25,765 --> 00:16:35,930
cette fonction particulière ici de l'utilisateur de connexion est l'endroit où nous commençons avec le processus de connexion.

229
00:16:35,930 --> 00:16:40,955
Donc, nous allons envoyer la connexion de la demande au moment où l'utilisateur essaie de se connecter,

230
00:16:40,955 --> 00:16:46,010
après cela, nous allons faire une récupération aux utilisateurs barre oblique point de terminaison de connexion avec

231
00:16:46,010 --> 00:16:52,455
le post et cela contient dans le corps du message les informations d'identification de l'utilisateur ici.

232
00:16:52,455 --> 00:16:54,445
Donc, une fois que nous faisons la récupération,

233
00:16:54,445 --> 00:16:58,570
si la réponse est correctement renvoyée,

234
00:16:58,570 --> 00:17:02,330
alors la réponse devrait contenir le jeton là.

235
00:17:02,330 --> 00:17:08,545
Donc, nous allons traiter cette réponse ici et ensuite si la connexion a réussi,

236
00:17:08,545 --> 00:17:15,790
alors nous allons stocker le jeton dans le stockage local ici.

237
00:17:15,790 --> 00:17:18,210
Donc, vous pouvez voir que nous disons LocalStorage définir jeton de

238
00:17:18,210 --> 00:17:21,600
réponse de jeton d'élément et ensuite nous allons

239
00:17:21,600 --> 00:17:27,830
également stocker les informations d'identification de l'utilisateur dans le stockage local ici.

240
00:17:27,830 --> 00:17:34,045
Donc, ces deux-là m'aideront à suivre le processus de connexion de l'utilisateur.

241
00:17:34,045 --> 00:17:39,600
Après cela, nous enverrons ensuite le login de réception.

242
00:17:39,600 --> 00:17:44,150
Maintenant, à ce stade, lorsque l'utilisateur est connecté avec succès,

243
00:17:44,150 --> 00:17:46,645
nous allons également chercher les favoris pour l'utilisateur.

244
00:17:46,645 --> 00:17:51,975
Rappelez-vous maintenant que vous ne pouvez récupérer les favoris que pour un utilisateur connecté.

245
00:17:51,975 --> 00:17:55,110
Lorsqu' aucun utilisateur n'est connecté, il n'y a pas de favoris à récupérer,

246
00:17:55,110 --> 00:17:58,110
mais lorsque l'utilisateur se connecte avec succès, vous voulez récupérer

247
00:17:58,110 --> 00:18:02,250
le favori de l'utilisateur afin qu'il puisse l'afficher dans votre application de réaction.

248
00:18:02,250 --> 00:18:04,520
Donc, c'est pourquoi je fais aussi une recherche favoris

249
00:18:04,520 --> 00:18:07,505
ici et puis nous recevrons la connexion ici.

250
00:18:07,505 --> 00:18:12,050
Ensuite, s'il y a une erreur, nous enverrons l'erreur de connexion ici.

251
00:18:12,050 --> 00:18:18,080
Ainsi, toutes ces fonctions l'erreur de connexion de réception et de connexion

252
00:18:18,080 --> 00:18:25,020
appellera alors les fonctions de réducteur appropriées qui sont implémentées dans le fichier Auth.Js.

253
00:18:25,020 --> 00:18:27,260
Donc, en allant dans le fichier Auth.Js,

254
00:18:27,260 --> 00:18:33,660
l'état ici suit l'état de connexion de l'utilisateur ici.

255
00:18:33,660 --> 00:18:36,930
Donc, ici, nous allons également stocker dans l'état,

256
00:18:36,930 --> 00:18:40,740
l'état implique le booléen de chargement Est qui

257
00:18:40,740 --> 00:18:46,160
suit si vous êtes en train de vous connecter. La facilité d'authentification -

258
00:18:46,160 --> 00:18:53,850
Indiquera si l'utilisateur est authentifié et si l'utilisateur est connecté, de

259
00:18:53,850 --> 00:18:57,200
sorte que vous serez en mesure d'autoriser l'utilisateur.

260
00:18:57,200 --> 00:19:00,060
Par conséquent, cet indicateur est utilisé dans de nombreuses circonstances

261
00:19:00,060 --> 00:19:03,970
pour afficher l'état de connexion de l'utilisateur, puis également

262
00:19:03,970 --> 00:19:11,340
la propriété de l'utilisateur pour l'état suit les informations d'identification de l'utilisateur.

263
00:19:11,340 --> 00:19:16,135
Donc, c'est là que nous obtiendrons le nom d'utilisateur pour l'affichage dans notre composant d'en-tête.

264
00:19:16,135 --> 00:19:25,310
Maintenant, ici vous verrez la demande de connexion et lorsque le succès de connexion est déclenché,

265
00:19:25,310 --> 00:19:31,695
alors vous stockerez la valeur du jeton ici, puis l'échec de connexion.

266
00:19:31,695 --> 00:19:35,235
La demande de déconnexion, déconnexion réussie,

267
00:19:35,235 --> 00:19:45,140
tous ceux-ci sont gérés par ces différentes parties à l'intérieur de ce réducteur le réducteur auth.js ici.

268
00:19:45,140 --> 00:19:51,705
Donc, c'est ainsi que l'authentification de l'utilisateur est gérée ici.

269
00:19:51,705 --> 00:19:54,055
Maintenant, dans le composant d'en-tête,

270
00:19:54,055 --> 00:19:55,770
aller dans le composant d'en-tête,

271
00:19:55,770 --> 00:20:00,040
donc c'est là que nous avons la fonction de connexion ici.

272
00:20:00,040 --> 00:20:02,460
Donc, le HandleLogin, vous vous souvenez que nous avons

273
00:20:02,460 --> 00:20:05,545
déjà implémenté cela dans le cours de réaction.

274
00:20:05,545 --> 00:20:09,330
Dans le HandleLogin, ils activeront le modal.

275
00:20:09,330 --> 00:20:14,340
Donc, nous allons fermer le modal et ensuite nous allons connecter l'utilisateur à ce stade.

276
00:20:14,340 --> 00:20:18,810
Donc, nous dirons ceci .props LoginUser et vous verrez que les informations d'identification, le nom d'

277
00:20:18,810 --> 00:20:22,710
utilisateur et le mot de passe sont transmis en tant que paramètres à

278
00:20:22,710 --> 00:20:27,115
l'utilisateur LoginUser et que cela pénètre dans le func LoginUser,

279
00:20:27,115 --> 00:20:30,400
qui s'occupe ensuite de la connexion à l'utilisateur.

280
00:20:30,400 --> 00:20:34,930
Maintenant, comment affichez-vous l'état de connexion de l'utilisateur.

281
00:20:34,930 --> 00:20:36,785
Donc, c'est encore très simple.

282
00:20:36,785 --> 00:20:38,870
Dans la barre de navigation ici,

283
00:20:38,870 --> 00:20:42,900
vous verrez que j'ai ajouté un nouvel élément ici.

284
00:20:42,900 --> 00:20:47,900
Donc, c'est là que nous dirons this.props.auth.isAuthenticated.

285
00:20:47,900 --> 00:20:54,280
Donc, l'indicateur isAuthenticated est utilisé ici par moi et donc si cela est réglé sur true,

286
00:20:54,280 --> 00:20:55,845
alors j'afficherai

287
00:20:55,845 --> 00:21:04,910
le bouton Déconnexion ici et c'est donc la chose que je vais afficher ici.

288
00:21:04,910 --> 00:21:07,110
Sinon, j'afficherai le bouton de connexion.

289
00:21:07,110 --> 00:21:09,890
Donc, en utilisant ce drapeau isAuthenticated,

290
00:21:09,890 --> 00:21:14,435
je retourne quel bouton particulier va être affiché dans

291
00:21:14,435 --> 00:21:20,520
l'en-tête là, que vous affichiez le bouton de déconnexion ou le bouton de connexion.

292
00:21:20,520 --> 00:21:24,290
Donc, c'est le point que nous montrons ici.

293
00:21:24,290 --> 00:21:29,240
Donc, la connexion ou la déconnexion ici.

294
00:21:29,240 --> 00:21:34,690
Donc, c'est comme ça que nous gérons le processus de connexion et de déconnexion

295
00:21:34,690 --> 00:21:40,935
ici et aussi nous allons afficher le nom d'utilisateur juste là.

296
00:21:40,935 --> 00:21:43,245
Ainsi, lorsque vous affichez le bouton de déconnexion,

297
00:21:43,245 --> 00:21:48,585
vous verrez également que nous affichons le nom de l'utilisateur.

298
00:21:48,585 --> 00:21:54,290
Donc, en bas ici,

299
00:21:54,290 --> 00:21:59,720
nous allons également afficher le bouton

300
00:21:59,720 --> 00:22:06,490
HandleLogout et ensuite nous avons le bouton de déconnexion affiché ici.

301
00:22:06,490 --> 00:22:09,650
En outre, cette déclaration particulière ici,

302
00:22:09,650 --> 00:22:13,280
c'est ainsi que nous affichons le nom d'utilisateur ici.

303
00:22:13,280 --> 00:22:17,760
Donc, cela utilise le this.props.auth.user.username.

304
00:22:17,760 --> 00:22:24,110
Donc, la propriété utilisateur dans l'état auth contient les

305
00:22:24,110 --> 00:22:27,290
informations d'identification de l'utilisateur et à partir de là j'ai récupéré le nom d'utilisateur, puis j'

306
00:22:27,290 --> 00:22:30,980
utilise cela pour afficher cela dans la barre d'en-tête.

307
00:22:30,980 --> 00:22:34,190
C' est ainsi que le composant d'en-tête est

308
00:22:34,190 --> 00:22:38,170
mis à jour afin de gérer le processus de connexion et de déconnexion.

309
00:22:38,170 --> 00:22:41,610
Encore une fois, des moyens assez simples de mise en œuvre,

310
00:22:41,610 --> 00:22:44,490
c'est assez simple que j'ai mis en œuvre ici.

311
00:22:44,490 --> 00:22:49,765
Maintenant, évidemment, si vous voulez une façon plus complexe de gérer le processus de connexion et de déconnexion,

312
00:22:49,765 --> 00:22:54,120
vous pouvez certainement aller dans la façon complète de faire les choses,

313
00:22:54,120 --> 00:22:58,160
mais cela suffit pour répondre aux exigences de mon application.

314
00:22:58,160 --> 00:23:01,650
Donc, j'ai implémenté le processus de connexion et de déconnexion

315
00:23:01,650 --> 00:23:06,970
d'une manière très simple ici en utilisant l'aide du magasin Redux.

316
00:23:06,970 --> 00:23:09,440
Donc, par le magasin Redux lui-même suit

317
00:23:09,440 --> 00:23:15,455
mon état de connexion si je suis connecté et que je suis authentifié et si je suis déconnecté.

318
00:23:15,455 --> 00:23:17,020
Donc, si l'utilisateur est déconnecté,

319
00:23:17,020 --> 00:23:19,325
alors les Mes favoris ne sont pas affichés ici.

320
00:23:19,325 --> 00:23:24,090
Maintenant, un point important que vous allez demander est,

321
00:23:24,090 --> 00:23:31,990
comment pouvons-nous nous assurer que nous n'allons pas dans l'état favori ici ?

322
00:23:31,990 --> 00:23:39,530
Donc, cela est géré à l'endroit où nous gérons les routes ici.

323
00:23:39,530 --> 00:23:42,640
Donc, vous remarquerez que pour les favoris ici,

324
00:23:42,640 --> 00:23:46,880
nous déclarons pour les favoris le point de terminaison au lieu d'

325
00:23:46,880 --> 00:23:51,080
appeler ceci comme la route que nous l'appelons comme une route privée.

326
00:23:51,080 --> 00:23:55,590
Ainsi, l'itinéraire privé vous permet de vous assurer que vous serez

327
00:23:55,590 --> 00:24:00,500
autorisé à entrer dans cette partie uniquement

328
00:24:00,500 --> 00:24:02,870
dans des circonstances, où l'utilisateur est connecté.

329
00:24:02,870 --> 00:24:09,600
Ainsi, cela empêchera une navigation vers leur point de terminaison /favorites si aucun utilisateur n'est connecté.

330
00:24:09,600 --> 00:24:12,055
Maintenant, comment cette route privée est-elle mise en œuvre ?

331
00:24:12,055 --> 00:24:16,020
Cette route privée est implémentée ici.

332
00:24:16,020 --> 00:24:19,635
Donc, vous pouvez voir que cette route privée est implémentée comme indiqué ici.

333
00:24:19,635 --> 00:24:24,070
Donc, ce n'est rien d'autre qu'une route ici et puis ici,

334
00:24:24,070 --> 00:24:28,670
nous allons implémenter this.props.auth.isAuthenticated.

335
00:24:28,670 --> 00:24:30,620
Donc, si l'utilisateur est authentifié,

336
00:24:30,620 --> 00:24:35,100
alors je vais permettre de naviguer vers

337
00:24:35,100 --> 00:24:40,890
le composant qui est le composant favoris.

338
00:24:40,890 --> 00:24:45,130
Sinon, je vais simplement rediriger vers le composant d'accueil.

339
00:24:45,130 --> 00:24:46,790
Donc, si aucun utilisateur n'est connecté,

340
00:24:46,790 --> 00:24:49,900
je vais simplement rediriger vers le composant home et donc cela est

341
00:24:49,900 --> 00:24:54,230
implémenté en utilisant cette route privée que j'ai conçue ici.

342
00:24:54,230 --> 00:25:00,270
Donc, la route privée est quelque chose qui est pris en charge par le routeur

343
00:25:00,270 --> 00:25:06,750
que nous utilisons le routeur React Dom que nous avons utilisé dans notre application React.

344
00:25:06,750 --> 00:25:10,300
Donc, une façon très simple de gérer les situations,

345
00:25:10,300 --> 00:25:16,425
où vous ne voulez pas que certaines routes soient naviguées lorsque l'utilisateur n'est pas connecté.

346
00:25:16,425 --> 00:25:21,610
Encore une fois, quelques modifications simples que j'ai apportées à

347
00:25:21,610 --> 00:25:23,080
l'application pour faciliter

348
00:25:23,080 --> 00:25:27,360
toutes les différentes fonctionnalités que vous voyez dans votre application React.

349
00:25:27,360 --> 00:25:29,270
Maintenant, comme vous vous y attendez,

350
00:25:29,270 --> 00:25:31,115
vous pourriez être sous-estimé à ce stade,

351
00:25:31,115 --> 00:25:34,630
« Est-il si simple à implémenter » et c'est

352
00:25:34,630 --> 00:25:39,005
exactement ce qui a été fait pour prendre en charge toutes les nouvelles fonctionnalités.

353
00:25:39,005 --> 00:25:42,700
Comme vous le voyez, l'authentification de l'utilisateur et le

354
00:25:42,700 --> 00:25:47,470
processus de connexion et de déconnexion puisque notre serveur a un support complet pour tout,

355
00:25:47,470 --> 00:25:51,800
la mise en œuvre du suivi côté client de la

356
00:25:51,800 --> 00:25:57,290
connexion utilisateur et le processus de déconnexion et tout ce qui devient assez simple

357
00:25:57,290 --> 00:25:59,980
en modifiant simplement certains des composants et ajouter dans

358
00:25:59,980 --> 00:26:09,015
la fonction de réducteur d'authentification et ajouter dans l'état d'authentification à notre magasin Redux.

359
00:26:09,015 --> 00:26:13,010
L' ensemble du processus de gestion de l'authentification de l'utilisateur

360
00:26:13,010 --> 00:26:17,885
et de la connexion et de la déconnexion devient assez simple dans ce cas.

361
00:26:17,885 --> 00:26:23,055
Donc, avec cette visite rapide du code React mis à jour,

362
00:26:23,055 --> 00:26:25,820
continuons à examiner

363
00:26:25,820 --> 00:26:30,415
notre application React quelques fonctionnalités supplémentaires de notre application React.

364
00:26:30,415 --> 00:26:33,650
Donc encore une fois, revenant à notre application,

365
00:26:33,650 --> 00:26:36,580
nous pouvons maintenant aller au menu et ensuite tirer

366
00:26:36,580 --> 00:26:41,080
n'importe quel plat ici et je peux poster des commentaires sur le plat ici,

367
00:26:41,080 --> 00:26:49,020
donc je mettrais immédiatement en place la note ici et ma valeur de commentaire ici.

368
00:26:50,020 --> 00:26:59,950
Notez que je ne saisis pas mon nom d'utilisateur ou le nom de mon auteur ici dans le formulaire ici.

369
00:26:59,950 --> 00:27:03,820
Bien sûr, pour soumettre un commentaire, vous devez être connecté.

370
00:27:03,820 --> 00:27:08,765
Donc, si vous n'êtes pas connecté, ce commentaire ne sera pas accepté par mon serveur.

371
00:27:08,765 --> 00:27:11,165
Laisse-moi d'abord me connecter.

372
00:27:11,165 --> 00:27:17,140
Donc, je peux me connecter ici

373
00:27:17,140 --> 00:27:19,965
et au moment où je me connecte, vous remarquez immédiatement que la

374
00:27:19,965 --> 00:27:23,485
barre d'outils d'en-tête est mise à jour pour indiquer mon statut.

375
00:27:23,485 --> 00:27:28,255
Maintenant, je peux poster ce commentaire et vous remarquerez que lorsque je poste le commentaire,

376
00:27:28,255 --> 00:27:30,670
le commentaire est ajouté dans la liste des commentaires

377
00:27:30,670 --> 00:27:33,120
et aussi remarquer que le champ auteur est

378
00:27:33,120 --> 00:27:38,285
automatiquement rempli ici parce que c'est ainsi que nous configurons notre côté serveur.

379
00:27:38,285 --> 00:27:39,810
Dans le champ commentaires,

380
00:27:39,810 --> 00:27:44,680
nous avons configuré notre utilisateur comme référence

381
00:27:44,680 --> 00:27:48,580
aux informations utilisateur que nous stockons sur

382
00:27:48,580 --> 00:27:53,060
notre serveur et comme nous utilisons le peuplement Mongoose du côté serveur,

383
00:27:53,060 --> 00:27:55,555
les informations utilisateur sont automatiquement renseignées

384
00:27:55,555 --> 00:27:58,230
dans les commentaires entrants du côté serveur.

385
00:27:58,230 --> 00:28:02,350
Donc, c'est comme ça que vous remarquez comment je tire parti de

386
00:28:02,350 --> 00:28:07,560
ce que le serveur me fournit déjà pour remplir automatiquement les détails.

387
00:28:08,290 --> 00:28:12,665
Ainsi, des modifications mineures à nouveau même dans

388
00:28:12,665 --> 00:28:20,420
la page de détail du plat pour refléter l'utilisation de la prise en charge des commentaires sur le site du serveur.

389
00:28:20,420 --> 00:28:22,370
Avec cela, je complète

390
00:28:22,370 --> 00:28:29,415
l'illustration rapide du client React que nous avons implémenté dans le cadre de

391
00:28:29,415 --> 00:28:33,445
cet exercice et j'espère que vous

392
00:28:33,445 --> 00:28:37,690
allez à travers les détails du code dans le client aussi et ensuite

393
00:28:37,690 --> 00:28:41,560
réfléchir à ce que vous avez appris dans le cours React et voir comment

394
00:28:41,560 --> 00:28:46,230
les modifications nous permettent d'implémenter dans une version modifiée,

395
00:28:46,230 --> 00:28:51,390
[inaudible] qui est maintenant capable de communiquer avec le serveur et de prendre en charge toutes les fonctionnalités que

396
00:28:51,390 --> 00:28:58,770
nous avions l'intention d'implémenter à l'origine dans le cadre de notre client et du côté serveur.