1
00:00:01,750 --> 00:00:05,683
‫Il s'agit de la deuxième partie de la création de notre fonctionnalité de connexion.

2
00:00:07,280 --> 00:00:09,600
‫La première chose que je veux

3
00:00:09,600 --> 00:00:14,160
‫faire dans cette vidéo est de rendre conditionnellement cette partie de la page.

4
00:00:14,160 --> 00:00:16,390
‫Cela signifie donc de rendre ces

5
00:00:16,390 --> 00:00:18,570
‫boutons de connexion et d'inscription ici

6
00:00:18,570 --> 00:00:21,010
‫au cas où l'utilisateur n'est pas connecté,

7
00:00:21,010 --> 00:00:23,470
‫et au cas où l'utilisateur est en

8
00:00:23,470 --> 00:00:27,450
‫fait bien connecté, puis rendre une sorte de menu utilisateur ici et

9
00:00:27,450 --> 00:00:29,543
‫également un bouton de déconnexion.

10
00:00:30,720 --> 00:00:32,650
‫Ce type de rendu devrait bien

11
00:00:32,650 --> 00:00:36,720
‫sûr se produire en arrière-plan, donc dans l'un de nos modèles de carlin.

12
00:00:36,720 --> 00:00:39,420
‫Maintenant, comment notre modèle saura-t-il réellement si l'utilisateur

13
00:00:39,420 --> 00:00:41,603
‫est connecté ou non ?

14
00:00:42,510 --> 00:00:44,600
‫En fait, afin de déterminer

15
00:00:44,600 --> 00:00:47,550
‫que nous devrons créer une nouvelle fonction middleware,

16
00:00:47,550 --> 00:00:50,970
‫et vraiment le seul objectif de cette nouvelle fonction

17
00:00:50,970 --> 00:00:54,813
‫middleware sera de savoir si l'utilisateur est actuellement connecté ou non.

18
00:00:55,720 --> 00:00:58,790
‫Vous pourriez penser que notre middleware de protection fait

19
00:00:58,790 --> 00:01:02,080
‫également quelque chose de similaire, et en fait, c'est similaire.

20
00:01:02,080 --> 00:01:03,590
‫Mais la différence est que

21
00:01:03,590 --> 00:01:07,720
‫l'on ne fonctionne que pour les cannes protégées, donc ça a du sens, non ?

22
00:01:07,720 --> 00:01:10,370
‫Mais notre nouvelle fonction middleware va

23
00:01:10,370 --> 00:01:14,003
‫s'exécuter pour chaque requête sur notre site Web rendu.

24
00:01:17,060 --> 00:01:19,710
‫Mettons maintenant cela en pratique ici dans

25
00:01:19,710 --> 00:01:23,170
‫notre authController, et puisque c'est très similaire à la

26
00:01:23,170 --> 00:01:26,430
‫route de protection ou en fait au middleware, je

27
00:01:26,430 --> 00:01:29,450
‫vais aller de l'avant et copier celui-ci ici,

28
00:01:29,450 --> 00:01:31,483
‫puis faire quelques modifications.

29
00:01:34,250 --> 00:01:37,240
‫Alors copions-le et collons-le ici

30
00:01:37,240 --> 00:01:39,860
‫et celui-ci s'appellera isLoggedIn.

31
00:01:43,210 --> 00:01:46,900
‫Ce middleware est vraiment uniquement pour les pages rendues, donc

32
00:01:46,900 --> 00:01:50,510
‫le but ici n'est pas de protéger une route afin

33
00:01:50,510 --> 00:01:53,593
‫qu'il n'y ait jamais d'erreur dans ce middleware.

34
00:01:55,200 --> 00:01:57,370
‫Écrivons en fait rapidement cela

35
00:01:58,550 --> 00:02:03,550
‫ici uniquement pour les pages rendues, et il n'y aura pas d'erreurs.

36
00:02:08,360 --> 00:02:11,560
‫Notre jeton doit provenir des cookies et non

37
00:02:11,560 --> 00:02:13,640
‫d'un en-tête d'autorisation car,

38
00:02:13,640 --> 00:02:16,230
‫bien sûr, pour les pages rendues,

39
00:02:16,230 --> 00:02:19,133
‫nous n'aurons pas le jeton dans l'en-tête.

40
00:02:20,050 --> 00:02:23,220
‫Encore une fois, pour l'ensemble de notre site Web

41
00:02:23,220 --> 00:02:25,800
‫rendu, le jeton ne sera toujours envoyé

42
00:02:25,800 --> 00:02:29,000
‫qu'à l'aide du cookie, et jamais de l'en-tête d'autorisation.

43
00:02:29,000 --> 00:02:32,143
‫Celui-là est uniquement pour l'api.

44
00:02:33,070 --> 00:02:36,320
‫Et en fait, cela n'a pas besoin d'être aussi complexe que

45
00:02:36,320 --> 00:02:38,790
‫cela, nous pouvons simplement dire d'exécuter tout

46
00:02:38,790 --> 00:02:42,030
‫le code que nous avons ici s'il y a un jeton.

47
00:02:42,030 --> 00:02:46,083
‫Ou en fait, s'il existe un cookie appelé jwt en gros.

48
00:02:49,680 --> 00:02:54,460
‫Alors supprimons tout cela et mettons-le essentiellement ici.

49
00:02:54,460 --> 00:02:57,303
‫Je vais supprimer celui-ci et le mettre à la fin.

50
00:03:02,780 --> 00:03:04,373
‫Et puis cela le reformate.

51
00:03:08,630 --> 00:03:10,900
‫Or ce jeton n'existe pas ici, il s'agit

52
00:03:10,900 --> 00:03:13,907
‫simplement de demander des cookies. jwt.

53
00:03:20,000 --> 00:03:22,743
‫Donc, ceci vérifie ici le jeton.

54
00:03:28,060 --> 00:03:31,320
‫Ensuite, nous devons également vérifier si l'utilisateur existe toujours, et donc

55
00:03:31,320 --> 00:03:33,290
‫tout à partir de là

56
00:03:33,290 --> 00:03:36,513
‫sera très similaire à ce que nous avions auparavant, à la

57
00:03:36,513 --> 00:03:39,533
‫grande exception que nous ne créerons pas de nouvelles erreurs.

58
00:03:41,500 --> 00:03:43,780
‫Nous allons simplement passer au middleware suivant, mais

59
00:03:43,780 --> 00:03:45,123
‫rien ne se passera.

60
00:03:47,540 --> 00:03:49,530
‫Ensuite, nous voulons également vérifier si

61
00:03:49,530 --> 00:03:51,910
‫l'utilisateur a récemment changé son mot de passe.

62
00:03:51,910 --> 00:03:55,113
‫Et encore, de so, alors pas d'erreur.

63
00:03:56,210 --> 00:03:58,410
‫Maintenant, voici à la fin ce qui va

64
00:03:58,410 --> 00:04:00,420
‫se passer si tout ça ici est

65
00:04:00,420 --> 00:04:03,920
‫correct, donc si le token est vérifié, si l'utilisateur existe toujours, et s'il

66
00:04:03,920 --> 00:04:06,400
‫n'a pas changé son mot de passe, eh bien,

67
00:04:06,400 --> 00:04:09,673
‫dans ce cas ça veut dire qu'il y a est un utilisateur connecté.

68
00:04:11,800 --> 00:04:12,713
‫Mettez ça ici.

69
00:04:17,810 --> 00:04:20,440
‫Il y a donc un utilisateur connecté.

70
00:04:20,440 --> 00:04:22,130
‫Ce que nous voulons faire

71
00:04:22,130 --> 00:04:25,320
‫dans ce cas, c'est rendre cet utilisateur accessible à nos modèles.

72
00:04:25,320 --> 00:04:26,950
‫Et comment pouvons-nous faire cela?

73
00:04:26,950 --> 00:04:29,960
‫Eh bien, c'est en fait quelque chose que nous ne

74
00:04:29,960 --> 00:04:33,283
‫faisions pas auparavant et c'est donc maintenant un endroit agréable pour apprendre cela.

75
00:04:34,970 --> 00:04:38,340
‫Nous pouvons faire la réponse. locaux, puis mettez

76
00:04:38,340 --> 00:04:40,500
‫n'importe quelle variable là-dedans.

77
00:04:40,500 --> 00:04:43,650
‫Et nos modèles de carlin y auront alors accès.

78
00:04:43,650 --> 00:04:46,920
‫Donc si je dis une réponse. des locaux. user, puis

79
00:04:46,920 --> 00:04:49,000
‫à l'intérieur d'un modèle, il y

80
00:04:49,000 --> 00:04:50,963
‫aura une variable appelée user.

81
00:04:52,320 --> 00:04:55,060
‫Encore une fois, chaque modèle de carlin

82
00:04:55,060 --> 00:04:59,410
‫aura accès à response . locaux et tout ce

83
00:04:59,410 --> 00:05:02,060
‫que nous y mettrons sera alors une

84
00:05:02,060 --> 00:05:04,300
‫variable à l'intérieur de ces modèles.

85
00:05:04,300 --> 00:05:07,350
‫C'est donc un peu comme passer des données dans un modèle en

86
00:05:07,350 --> 00:05:08,713
‫utilisant la fonction de rendu.

87
00:05:11,870 --> 00:05:14,400
‫Celui-ci dont nous n'avons plus besoin, car nous mettrons cet

88
00:05:14,400 --> 00:05:17,593
‫utilisateur actuel en réponse . des locaux.

89
00:05:20,710 --> 00:05:24,450
‫Et bien sûr, après cela, le prochain middleware est appelé.

90
00:05:24,450 --> 00:05:27,833
‫Et nous devons également le faire en dehors de ce If,

91
00:05:30,930 --> 00:05:32,660
‫donc s'il n'y a pas

92
00:05:32,660 --> 00:05:34,180
‫de cookie, le prochain

93
00:05:34,180 --> 00:05:35,900
‫middleware sera bien sûr appelé

94
00:05:35,900 --> 00:05:38,380
‫immédiatement, car alors, bien sûr, il n'y a

95
00:05:38,380 --> 00:05:41,010
‫aucun moyen qu'il y ait réellement un utilisateur connecté.

96
00:05:41,010 --> 00:05:44,260
‫Encore une fois, s'il n'y a pas de cookie, alors il

97
00:05:44,260 --> 00:05:46,170
‫n'y a pas d'utilisateur connecté.

98
00:05:46,170 --> 00:05:49,050
‫Et ainsi de suite tout de suite, et nous ne mettrons

99
00:05:49,050 --> 00:05:52,283
‫pas l'utilisateur actuel en réponse . des locaux.

100
00:05:53,410 --> 00:05:55,240
‫Mais s'il y a un

101
00:05:55,240 --> 00:05:58,180
‫cookie, eh bien, nous passons par toutes ces étapes de

102
00:05:58,180 --> 00:06:00,400
‫vérification et à la fin, si aucun d'entre

103
00:06:00,400 --> 00:06:02,530
‫eux n'a bien appelé le prochain middleware

104
00:06:02,530 --> 00:06:05,620
‫dans la pile, cela signifie qu'il y a un utilisateur connecté.

105
00:06:05,620 --> 00:06:09,510
‫Et donc, nous mettons cet utilisateur en réponse . locaux, et comme ça, nous

106
00:06:09,510 --> 00:06:12,190
‫avons alors accès à cet utilisateur dans nos

107
00:06:12,190 --> 00:06:13,573
‫modèles de carlin.

108
00:06:15,090 --> 00:06:19,230
‫Par exemple, juste ici dans l'en-tête qui est en fait l'endroit

109
00:06:19,230 --> 00:06:22,493
‫où se trouvera la navigation de l'utilisateur.

110
00:06:23,810 --> 00:06:25,990
‫Alors utilisons-le ici dans une

111
00:06:25,990 --> 00:06:29,380
‫seconde, mais avant, nous avons bien sûr également besoin du

112
00:06:29,380 --> 00:06:31,733
‫nouveau middleware que nous venons de créer.

113
00:06:32,950 --> 00:06:35,563
‫Et donc venons ici pour voir la route, et

114
00:06:37,320 --> 00:06:39,210
‫comme je le disais au

115
00:06:39,210 --> 00:06:41,240
‫début, nous voulons que ce middleware soit

116
00:06:41,240 --> 00:06:43,710
‫appliqué à chaque route que nous avons ici.

117
00:06:43,710 --> 00:06:45,840
‫Nous faisons donc cela un peu comme

118
00:06:45,840 --> 00:06:48,210
‫nous le faisions auparavant avec le middleware protect.

119
00:06:48,210 --> 00:06:51,330
‫Donc, en gros, le mettre ici avant tous les autres itinéraires.

120
00:06:51,330 --> 00:06:54,020
‫Et ainsi, il sera mis dans la pile

121
00:06:54,020 --> 00:06:56,403
‫middleware pour chaque demande qui arrive.

122
00:06:57,820 --> 00:07:02,820
‫Donc routeur. utiliser, authController. est connecté.

123
00:07:07,250 --> 00:07:10,140
‫Et supprimons également cette protection de la page

124
00:07:10,140 --> 00:07:12,180
‫de détail de la visite,

125
00:07:12,180 --> 00:07:14,803
‫car cela n'a aucun sens en fait.

126
00:07:15,690 --> 00:07:18,433
‫Alors maintenant, nous sommes prêts à l'utiliser.

127
00:07:19,290 --> 00:07:23,103
‫Venons-en donc à notre en-tête et utilisons un conditionnel.

128
00:07:24,420 --> 00:07:25,500
‫Maintenant, rappelez-vous

129
00:07:25,500 --> 00:07:29,260
‫comment j'ai dit auparavant que les conditions dans pug n'étaient pas

130
00:07:29,260 --> 00:07:32,570
‫très puissantes et que nous utilisons si souvent Java Script.

131
00:07:32,570 --> 00:07:34,340
‫Mais pour ce que nous voulons

132
00:07:34,340 --> 00:07:36,270
‫faire maintenant, ils sont en fait assez bons.

133
00:07:36,270 --> 00:07:40,793
‫Donc tout ce que nous voulons faire maintenant est de dire si user.

134
00:07:42,020 --> 00:07:46,980
‫Et pour cela, ils fonctionnent très bien pour des choses très simples simplement

135
00:07:46,980 --> 00:07:50,063
‫pour tester si une variable existe ou non.

136
00:07:52,273 --> 00:07:56,380
‫Donc, s'il y a un utilisateur, nous voulons afficher ce

137
00:07:56,380 --> 00:07:59,853
‫que nous avons ici, alors mettons-le là.

138
00:08:00,940 --> 00:08:02,433
‫Je le copie donc

139
00:08:05,000 --> 00:08:06,410
‫ici, en

140
00:08:09,150 --> 00:08:13,560
‫commentant ce code et puis ici, nous disons autre chose.

141
00:08:13,560 --> 00:08:17,670
‫Donc, tout comme en Java Script, nous pouvons dire si, sinon.

142
00:08:17,670 --> 00:08:20,300
‫Alors ici, en fait, je ne veux pas de mes réservations,

143
00:08:20,300 --> 00:08:22,580
‫mais à la place, je veux me déconnecter.

144
00:08:22,580 --> 00:08:24,173
‫Je ne sais pas pourquoi c'est là.

145
00:08:25,490 --> 00:08:29,000
‫Il s'agit donc de se déconnecter, et il a également une classe spéciale

146
00:08:29,980 --> 00:08:33,313
‫que j'ai créée pour lui donner un aspect spécial en CSS.

147
00:08:34,180 --> 00:08:39,180
‫Donc nav, el, puis avec le modificateur, déconnexion, et supprimons également

148
00:08:40,860 --> 00:08:44,713
‫cet attribut href à partir de là.

149
00:08:47,270 --> 00:08:49,743
‫Alors ici, on veut le nom

150
00:08:53,010 --> 00:08:57,040
‫de l'utilisateur, donc user. nom, et en fait nous ne voulons que le prénom.

151
00:08:57,040 --> 00:08:59,990
‫Ainsi, par exemple, si j'ai créé un

152
00:08:59,990 --> 00:09:04,650
‫compte appelé Jonas Schmedtmann, alors comme ça, je veux seulement

153
00:09:04,650 --> 00:09:07,293
‫afficher la partie Jonas ici.

154
00:09:08,530 --> 00:09:11,810
‫Séparons donc le nom à l'aide d'espaces, puis

155
00:09:11,810 --> 00:09:14,030
‫affichons uniquement le premier élément

156
00:09:14,030 --> 00:09:15,623
‫du tableau résultant.

157
00:09:18,330 --> 00:09:21,280
‫N'oubliez pas qu'ici, nous pouvons simplement utiliser Java Script comme celui-ci.

158
00:09:22,610 --> 00:09:26,513
‫Divisez-le par un espace, puis seulement le premier élément.

159
00:09:28,330 --> 00:09:31,593
‫Alors ici, bien sûr, nous voulons aussi

160
00:09:33,430 --> 00:09:37,300
‫cette image, donc c'est image/users, rappelez-vous, je crois au

161
00:09:37,300 --> 00:09:38,313
‫moins.

162
00:09:41,930 --> 00:09:43,377
‫Alors, c'est parti, utilisateurs.

163
00:09:46,660 --> 00:09:49,683
‫Et puis tout ce qui vient de notre base de données.

164
00:09:53,220 --> 00:09:56,747
‫Donc utilisateur. photo, et ensuite

165
00:09:56,747 --> 00:10:00,880
‫on peut aussi lui donner un joli texte alternatif

166
00:10:00,880 --> 00:10:03,737
‫qui est très important pour l'accessibilité.

167
00:10:03,737 --> 00:10:05,723
‫Allons-y ici.

168
00:10:12,070 --> 00:10:14,040
‫Alors, testons cela maintenant, car

169
00:10:14,040 --> 00:10:18,113
‫je suis en fait très curieux de voir si cela fonctionne.

170
00:10:19,780 --> 00:10:22,180
‫Alors comme avant, laissez-moi aller de l'avant

171
00:10:22,180 --> 00:10:24,393
‫et supprimer le cookie ici.

172
00:10:25,610 --> 00:10:28,900
‫Je ne suis pas sûr de ce que fait ce stockage local ici maintenant.

173
00:10:28,900 --> 00:10:33,163
‫Supprimons cela aussi, et ce cookie aussi.

174
00:10:35,030 --> 00:10:38,460
‫Revenons donc à la connexion ici, et maintenant

175
00:10:38,460 --> 00:10:40,903
‫je vais devoir retaper ceci. test io, un, deux, trois, quatre.

176
00:10:44,217 --> 00:10:48,260
‫Allons de l'avant et copiez-le ici, connectez-vous, et en effet,

177
00:10:48,260 --> 00:10:50,940
‫nous sommes connectés avec succès.

178
00:10:50,940 --> 00:10:55,420
‫Donc, nous obtenons notre cookie maintenant, c'est parti.

179
00:10:55,420 --> 00:10:59,040
‫Mais bien sûr, notre photo et notre nom d'utilisateur n'étaient

180
00:10:59,040 --> 00:11:01,820
‫pas immédiatement affichés ici, et c'est bien sûr

181
00:11:01,820 --> 00:11:04,470
‫parce que cela ne peut se produire

182
00:11:04,470 --> 00:11:06,210
‫qu'après un rechargement,

183
00:11:06,210 --> 00:11:08,450
‫car c'est express qui rend ces

184
00:11:08,450 --> 00:11:11,470
‫pages, donc il faut en quelque sorte un rechargement.

185
00:11:11,470 --> 00:11:13,443
‫Implémentons donc cela en une seconde,

186
00:11:15,120 --> 00:11:17,460
‫mais pour l'instant, voyons si nous sommes réellement connectés.

187
00:11:17,460 --> 00:11:22,160
‫Allons donc à toutes les visites ici, et maintenant

188
00:11:22,160 --> 00:11:25,400
‫nous obtenons cette erreur ici.

189
00:11:25,400 --> 00:11:28,180
‫Essayez de recharger ici.

190
00:11:28,180 --> 00:11:29,373
‫Eh bien, dit qu'il ne peut pas le trouver sur le serveur.

191
00:11:30,490 --> 00:11:33,630
‫Que se passe-t-il si nous rechargeons ici ?

192
00:11:33,630 --> 00:11:35,633
‫Eh bien, celui-ci fonctionne, et vous

193
00:11:37,400 --> 00:11:39,936
‫voyez qu'en fait notre menu utilisateur est déjà là.

194
00:11:39,936 --> 00:11:42,910
‫Nous obtenons donc notre bouton de déconnexion

195
00:11:42,910 --> 00:11:46,220
‫et notre photo, et bien sûr mon nom.

196
00:11:46,220 --> 00:11:48,490
‫Super.

197
00:11:48,490 --> 00:11:49,870
‫Essayons maintenant de

198
00:11:49,870 --> 00:11:51,890
‫nous déconnecter en supprimant ce cookie.

199
00:11:51,890 --> 00:11:53,670
‫Et dans la prochaine vidéo,

200
00:11:53,670 --> 00:11:55,900
‫nous allons réellement implémenter cette fonctionnalité exacte.

201
00:11:55,900 --> 00:11:57,433
‫Et si on recharge maintenant, c'est de retour, super !

202
00:11:59,530 --> 00:12:03,160
‫Ainsi, la fonction middleware que nous venons de

203
00:12:03,160 --> 00:12:05,840
‫créer fait réellement son travail.

204
00:12:05,840 --> 00:12:07,663
‫Connectons-nous simplement en

205
00:12:08,500 --> 00:12:12,440
‫tant que quelqu'un d'autre ici, alors disons Laura, d'accord.

206
00:12:12,440 --> 00:12:15,713
‫Alors Laura, et qu'avec le même mot

207
00:12:17,870 --> 00:12:20,930
‫de passe testez un deux

208
00:12:20,930 --> 00:12:25,190
‫trois quatre, connectez-vous, c'est bon, rechargez, et c'est parti.

209
00:12:25,190 --> 00:12:29,690
‫Cela fonctionne donc très bien.

210
00:12:29,690 --> 00:12:31,680
‫Je suis juste inquiet à propos de cette

211
00:12:31,680 --> 00:12:33,900
‫erreur, et donc avant de faire quoi que ce soit

212
00:12:33,900 --> 00:12:35,580
‫d'autre, nous devons réellement corriger celle-ci.

213
00:12:35,580 --> 00:12:37,890
‫Et puisque cette erreur n'a commencé qu'une

214
00:12:37,890 --> 00:12:40,000
‫fois que nous avons commencé

215
00:12:40,000 --> 00:12:43,060
‫à utiliser ce nouveau middleware, assurons-nous simplement, voyons si

216
00:12:43,060 --> 00:12:45,520
‫cela a quelque chose à voir avec cela.

217
00:12:45,520 --> 00:12:47,020
‫Donc, si nous supprimons

218
00:12:48,110 --> 00:12:50,530
‫ce middleware, voyons s'il fonctionne de nouveau.

219
00:12:50,530 --> 00:12:52,853
‫Et oui, c'est le cas maintenant.

220
00:12:54,860 --> 00:12:56,570
‫Donc c'est un peu bizarre en effet.

221
00:12:56,570 --> 00:12:58,253
‫Voyons si nous

222
00:12:59,218 --> 00:13:02,790
‫pouvons trouver un bug dans cette fonction middleware.

223
00:13:02,790 --> 00:13:05,023
‫Ce que je vois ici tout de suite,

224
00:13:09,560 --> 00:13:13,890
‫c'est que nous revenons toujours à chaque fois que nous appelons ensuite, mais ici, lors du

225
00:13:13,890 --> 00:13:15,760
‫prochain, nous ne le faisons pas.

226
00:13:15,760 --> 00:13:18,360
‫Cela signifie donc que si nous entrons

227
00:13:18,360 --> 00:13:22,540
‫dans ce bloc ici, le prochain middleware sera appelé, mais

228
00:13:22,540 --> 00:13:24,490
‫encore une fois, le

229
00:13:24,490 --> 00:13:27,060
‫prochain middleware sera appelé après cela.

230
00:13:27,060 --> 00:13:28,633
‫Nous devons donc probablement retourner celui-ci ici aussi.

231
00:13:30,630 --> 00:13:34,823
‫Mais nous nous assurons que next n'est appelé qu'une seule fois.

232
00:13:36,040 --> 00:13:40,223
‫Alors essayons ça, remettez celui-ci ici, sauvez-le,

233
00:13:41,670 --> 00:13:45,430
‫faites défiler vers le bas ici.

234
00:13:45,430 --> 00:13:48,713
‫Ouais, ça marche maintenant.

235
00:13:53,460 --> 00:13:54,510
‫Donc, nous

236
00:13:55,840 --> 00:13:59,490
‫obtenons également notre utilisateur connecté ici maintenant, et donc bien

237
00:13:59,490 --> 00:14:03,610
‫sûr, si nous supprimons le cookie en déconnectant l'utilisateur, rechargez-le maintenant, alors

238
00:14:03,610 --> 00:14:05,330
‫nous revenons à la normale.

239
00:14:05,330 --> 00:14:09,283
‫Ensuite, ce que nous voulions corriger ici est d'obtenir une

240
00:14:12,366 --> 00:14:14,430
‫alerte ici, puis de

241
00:14:14,430 --> 00:14:16,930
‫recharger la page après un certain temps.

242
00:14:16,930 --> 00:14:20,133
‫Pas vraiment en train de recharger, mais à la place de

243
00:14:21,620 --> 00:14:23,400
‫le renvoyer à la page d'accueil.

244
00:14:23,400 --> 00:14:26,343
‫Donc, pour le moment, ce n'est plus le cas, et comme

245
00:14:28,570 --> 00:14:30,410
‫je l'ai dit plus tôt, nous

246
00:14:30,410 --> 00:14:33,330
‫ne voyons ce menu utilisateur que lorsque nous rechargeons la page.

247
00:14:33,330 --> 00:14:36,230
‫C'est donc ce que nous allons faire maintenant

248
00:14:36,230 --> 00:14:38,800
‫automatiquement dans notre code Java Script ici.

249
00:14:38,800 --> 00:14:40,293
‫Alors débarrassons-nous tout d'abord de ces données ici.

250
00:14:41,882 --> 00:14:45,280
‫L'enregistrement de données sensibles sur la console n'est jamais une

251
00:14:46,350 --> 00:14:48,340
‫bonne idée, et faisons maintenant ce

252
00:14:48,340 --> 00:14:50,140
‫que je viens de dire.

253
00:14:50,140 --> 00:14:53,403
‫Donc ici, nous faisons une demande, et bien sûr

254
00:14:54,250 --> 00:14:58,220
‫je vais également vous montrer comment nous pouvons envoyer des données directement

255
00:14:58,220 --> 00:15:01,220
‫depuis un formulaire htl dans notre application Note.

256
00:15:01,220 --> 00:15:04,503
‫Il y a deux façons.

257
00:15:06,430 --> 00:15:07,410
‫Une façon consiste à envoyer

258
00:15:07,410 --> 00:15:09,260
‫des données à l'aide d'une requête http comme nous l'avons fait ici.

259
00:15:09,260 --> 00:15:11,750
‫Et une autre consiste simplement à utiliser directement un formulaire html.

260
00:15:11,750 --> 00:15:15,940
‫Et donc celui-ci est également très important, et donc un peu

261
00:15:15,940 --> 00:15:17,960
‫plus tard dans la

262
00:15:17,960 --> 00:15:21,130
‫section je vous montrerai comment faire celui-là aussi.

263
00:15:21,130 --> 00:15:23,090
‫Quoi qu'il en soit, montrons maintenant cette alerte et rechargeons la page.

264
00:15:23,090 --> 00:15:27,200
‫Ne faisons cela que si nous sommes vraiment sûrs

265
00:15:27,200 --> 00:15:30,320
‫que notre appel api a réussi.

266
00:15:30,320 --> 00:15:32,870
‫Disons la réponse. data, et donc ces données sont en fait

267
00:15:32,870 --> 00:15:36,290
‫les données que nous avons

268
00:15:36,290 --> 00:15:38,600
‫envoyées comme réponse de notre journée, et

269
00:15:38,600 --> 00:15:41,220
‫donc à partir de là, nous pouvons lire . statut, et vérifiez s'il est

270
00:15:41,220 --> 00:15:44,693
‫égal au succès.

271
00:15:44,693 --> 00:15:47,483
‫Alors, rappelez-vous comment nous définissons toujours le

272
00:15:50,439 --> 00:15:53,920
‫statut sur succès, et maintenant nous pouvons réellement l'utiliser

273
00:15:53,920 --> 00:15:55,900
‫pour effectuer cette vérification.

274
00:15:55,900 --> 00:15:58,093
‫Utilisons donc une simple alerte Java

275
00:15:59,038 --> 00:16:02,147
‫Script, alerte comme celle-ci et disons connecté avec succès.

276
00:16:02,147 --> 00:16:07,147
‫Débarrassons-nous de cela, et après une seconde et

277
00:16:14,120 --> 00:16:17,950
‫demie chargeons également la première page.

278
00:16:17,950 --> 00:16:21,330
‫Donc en gros, la page d'accueil.

279
00:16:21,330 --> 00:16:22,730
‫Alors, fenêtre. setTimeout, puis ici

280
00:16:23,640 --> 00:16:28,640
‫la fonction callback, et donc pour charger

281
00:16:31,100 --> 00:16:33,400
‫une autre page on dit location . assigner, puis nous allons simplement à la

282
00:16:33,400 --> 00:16:36,633
‫page d'accueil comme ceci.

283
00:16:37,700 --> 00:16:41,563
‫Et nous voulons le faire après 1500

284
00:16:43,690 --> 00:16:47,120
‫millisecondes, donc une seconde et demie.

285
00:16:47,120 --> 00:16:49,023
‫Ensuite, au cas où

286
00:16:49,990 --> 00:16:52,780
‫nous n'aurions pas réussi, nous ne voulons en

287
00:16:52,780 --> 00:16:55,950
‫fait pas enregistrer cela, mais nous voulons plutôt l'alerter.

288
00:16:55,950 --> 00:16:57,553
‫Alors alerte, et encore une

289
00:16:59,600 --> 00:17:02,350
‫fois, ces données ici sont en fait notre réponse de données.

290
00:17:02,350 --> 00:17:04,533
‫Alors, à partir de là, lisons la propriété message.

291
00:17:05,793 --> 00:17:08,403
‫Cela devrait faire le travail, rechargeons ici.

292
00:17:14,680 --> 00:17:17,313
‫D'accord, ce n'est pas la bonne personne.

293
00:17:19,930 --> 00:17:21,853
‫Alors, plutôt administrateur chez natours. io, testez un

294
00:17:22,830 --> 00:17:27,413
‫deux trois quatre cinq, afin

295
00:17:29,230 --> 00:17:31,770
‫de voir l'erreur en premier.

296
00:17:31,770 --> 00:17:34,270
‫Et donc vous voyez, e-mail ou

297
00:17:34,270 --> 00:17:37,490
‫mot de passe incorrect, et bien sûr, c'est parce

298
00:17:37,490 --> 00:17:40,783
‫que notre mot de passe était erroné, alors débarrassons-nous

299
00:17:41,960 --> 00:17:44,750
‫de cela, connectez-vous, et donc connecté avec succès.

300
00:17:44,750 --> 00:17:46,630
‫Voyons maintenant ce qui se passe.

301
00:17:46,630 --> 00:17:48,710
‫Et il ne se recharge

302
00:17:48,710 --> 00:17:51,310
‫pas automatiquement, car avant cela, nous devons

303
00:17:51,310 --> 00:17:52,970
‫fermer cette fenêtre.

304
00:17:52,970 --> 00:17:54,700
‫Donc, une fois que nous l'avons fermé, il devrait alors effectuer le rechargement immédiatement.

305
00:17:54,700 --> 00:17:57,963
‫Et donc voilà.

306
00:18:00,690 --> 00:18:01,973
‫Nous sommes maintenant à la

307
00:18:02,950 --> 00:18:05,810
‫page d'accueil, et à nouveau avec notre menu utilisateur correct rendu ici, parfait.

308
00:18:05,810 --> 00:18:10,213
‫Cette partie est donc également terminée, et maintenant, comme

309
00:18:11,990 --> 00:18:14,530
‫dernière étape, je souhaite améliorer ces

310
00:18:14,530 --> 00:18:17,020
‫alertes que l'utilisateur reçoit.

311
00:18:17,020 --> 00:18:19,060
‫Au lieu d'afficher ces alertes Java Script intégrées.

312
00:18:19,060 --> 00:18:22,333
‫De plus, nous allons faire ce regroupement Java Script que j'ai

313
00:18:23,230 --> 00:18:26,050
‫déjà mentionné à quelques reprises, mais nous allons laisser tout

314
00:18:26,050 --> 00:18:28,490
‫cela pour la prochaine vidéo parce que

315
00:18:28,490 --> 00:18:31,320
‫je ne veux pas trop surcharger chacun de ces éléments.