‫Il s'agit de la deuxième partie de la création de notre fonctionnalité de connexion.
‫La première chose que je veux
‫faire dans cette vidéo est de rendre conditionnellement cette partie de la page.
‫Cela signifie donc de rendre ces
‫boutons de connexion et d'inscription ici
‫au cas où l'utilisateur n'est pas connecté,
‫et au cas où l'utilisateur est en
‫fait bien connecté, puis rendre une sorte de menu utilisateur ici et
‫également un bouton de déconnexion.
‫Ce type de rendu devrait bien
‫sûr se produire en arrière-plan, donc dans l'un de nos modèles de carlin.
‫Maintenant, comment notre modèle saura-t-il réellement si l'utilisateur
‫est connecté ou non ?
‫En fait, afin de déterminer
‫que nous devrons créer une nouvelle fonction middleware,
‫et vraiment le seul objectif de cette nouvelle fonction
‫middleware sera de savoir si l'utilisateur est actuellement connecté ou non.
‫Vous pourriez penser que notre middleware de protection fait
‫également quelque chose de similaire, et en fait, c'est similaire.
‫Mais la différence est que
‫l'on ne fonctionne que pour les cannes protégées, donc ça a du sens, non ?
‫Mais notre nouvelle fonction middleware va
‫s'exécuter pour chaque requête sur notre site Web rendu.
‫Mettons maintenant cela en pratique ici dans
‫notre authController, et puisque c'est très similaire à la
‫route de protection ou en fait au middleware, je
‫vais aller de l'avant et copier celui-ci ici,
‫puis faire quelques modifications.
‫Alors copions-le et collons-le ici
‫et celui-ci s'appellera isLoggedIn.
‫Ce middleware est vraiment uniquement pour les pages rendues, donc
‫le but ici n'est pas de protéger une route afin
‫qu'il n'y ait jamais d'erreur dans ce middleware.
‫Écrivons en fait rapidement cela
‫ici uniquement pour les pages rendues, et il n'y aura pas d'erreurs.
‫Notre jeton doit provenir des cookies et non
‫d'un en-tête d'autorisation car,
‫bien sûr, pour les pages rendues,
‫nous n'aurons pas le jeton dans l'en-tête.
‫Encore une fois, pour l'ensemble de notre site Web
‫rendu, le jeton ne sera toujours envoyé
‫qu'à l'aide du cookie, et jamais de l'en-tête d'autorisation.
‫Celui-là est uniquement pour l'api.
‫Et en fait, cela n'a pas besoin d'être aussi complexe que
‫cela, nous pouvons simplement dire d'exécuter tout
‫le code que nous avons ici s'il y a un jeton.
‫Ou en fait, s'il existe un cookie appelé jwt en gros.
‫Alors supprimons tout cela et mettons-le essentiellement ici.
‫Je vais supprimer celui-ci et le mettre à la fin.
‫Et puis cela le reformate.
‫Or ce jeton n'existe pas ici, il s'agit
‫simplement de demander des cookies. jwt.
‫Donc, ceci vérifie ici le jeton.
‫Ensuite, nous devons également vérifier si l'utilisateur existe toujours, et donc
‫tout à partir de là
‫sera très similaire à ce que nous avions auparavant, à la
‫grande exception que nous ne créerons pas de nouvelles erreurs.
‫Nous allons simplement passer au middleware suivant, mais
‫rien ne se passera.
‫Ensuite, nous voulons également vérifier si
‫l'utilisateur a récemment changé son mot de passe.
‫Et encore, de so, alors pas d'erreur.
‫Maintenant, voici à la fin ce qui va
‫se passer si tout ça ici est
‫correct, donc si le token est vérifié, si l'utilisateur existe toujours, et s'il
‫n'a pas changé son mot de passe, eh bien,
‫dans ce cas ça veut dire qu'il y a est un utilisateur connecté.
‫Mettez ça ici.
‫Il y a donc un utilisateur connecté.
‫Ce que nous voulons faire
‫dans ce cas, c'est rendre cet utilisateur accessible à nos modèles.
‫Et comment pouvons-nous faire cela?
‫Eh bien, c'est en fait quelque chose que nous ne
‫faisions pas auparavant et c'est donc maintenant un endroit agréable pour apprendre cela.
‫Nous pouvons faire la réponse. locaux, puis mettez
‫n'importe quelle variable là-dedans.
‫Et nos modèles de carlin y auront alors accès.
‫Donc si je dis une réponse. des locaux. user, puis
‫à l'intérieur d'un modèle, il y
‫aura une variable appelée user.
‫Encore une fois, chaque modèle de carlin
‫aura accès à response . locaux et tout ce
‫que nous y mettrons sera alors une
‫variable à l'intérieur de ces modèles.
‫C'est donc un peu comme passer des données dans un modèle en
‫utilisant la fonction de rendu.
‫Celui-ci dont nous n'avons plus besoin, car nous mettrons cet
‫utilisateur actuel en réponse . des locaux.
‫Et bien sûr, après cela, le prochain middleware est appelé.
‫Et nous devons également le faire en dehors de ce If,
‫donc s'il n'y a pas
‫de cookie, le prochain
‫middleware sera bien sûr appelé
‫immédiatement, car alors, bien sûr, il n'y a
‫aucun moyen qu'il y ait réellement un utilisateur connecté.
‫Encore une fois, s'il n'y a pas de cookie, alors il
‫n'y a pas d'utilisateur connecté.
‫Et ainsi de suite tout de suite, et nous ne mettrons
‫pas l'utilisateur actuel en réponse . des locaux.
‫Mais s'il y a un
‫cookie, eh bien, nous passons par toutes ces étapes de
‫vérification et à la fin, si aucun d'entre
‫eux n'a bien appelé le prochain middleware
‫dans la pile, cela signifie qu'il y a un utilisateur connecté.
‫Et donc, nous mettons cet utilisateur en réponse . locaux, et comme ça, nous
‫avons alors accès à cet utilisateur dans nos
‫modèles de carlin.
‫Par exemple, juste ici dans l'en-tête qui est en fait l'endroit
‫où se trouvera la navigation de l'utilisateur.
‫Alors utilisons-le ici dans une
‫seconde, mais avant, nous avons bien sûr également besoin du
‫nouveau middleware que nous venons de créer.
‫Et donc venons ici pour voir la route, et
‫comme je le disais au
‫début, nous voulons que ce middleware soit
‫appliqué à chaque route que nous avons ici.
‫Nous faisons donc cela un peu comme
‫nous le faisions auparavant avec le middleware protect.
‫Donc, en gros, le mettre ici avant tous les autres itinéraires.
‫Et ainsi, il sera mis dans la pile
‫middleware pour chaque demande qui arrive.
‫Donc routeur. utiliser, authController. est connecté.
‫Et supprimons également cette protection de la page
‫de détail de la visite,
‫car cela n'a aucun sens en fait.
‫Alors maintenant, nous sommes prêts à l'utiliser.
‫Venons-en donc à notre en-tête et utilisons un conditionnel.
‫Maintenant, rappelez-vous
‫comment j'ai dit auparavant que les conditions dans pug n'étaient pas
‫très puissantes et que nous utilisons si souvent Java Script.
‫Mais pour ce que nous voulons
‫faire maintenant, ils sont en fait assez bons.
‫Donc tout ce que nous voulons faire maintenant est de dire si user.
‫Et pour cela, ils fonctionnent très bien pour des choses très simples simplement
‫pour tester si une variable existe ou non.
‫Donc, s'il y a un utilisateur, nous voulons afficher ce
‫que nous avons ici, alors mettons-le là.
‫Je le copie donc
‫ici, en
‫commentant ce code et puis ici, nous disons autre chose.
‫Donc, tout comme en Java Script, nous pouvons dire si, sinon.
‫Alors ici, en fait, je ne veux pas de mes réservations,
‫mais à la place, je veux me déconnecter.
‫Je ne sais pas pourquoi c'est là.
‫Il s'agit donc de se déconnecter, et il a également une classe spéciale
‫que j'ai créée pour lui donner un aspect spécial en CSS.
‫Donc nav, el, puis avec le modificateur, déconnexion, et supprimons également
‫cet attribut href à partir de là.
‫Alors ici, on veut le nom
‫de l'utilisateur, donc user. nom, et en fait nous ne voulons que le prénom.
‫Ainsi, par exemple, si j'ai créé un
‫compte appelé Jonas Schmedtmann, alors comme ça, je veux seulement
‫afficher la partie Jonas ici.
‫Séparons donc le nom à l'aide d'espaces, puis
‫affichons uniquement le premier élément
‫du tableau résultant.
‫N'oubliez pas qu'ici, nous pouvons simplement utiliser Java Script comme celui-ci.
‫Divisez-le par un espace, puis seulement le premier élément.
‫Alors ici, bien sûr, nous voulons aussi
‫cette image, donc c'est image/users, rappelez-vous, je crois au
‫moins.
‫Alors, c'est parti, utilisateurs.
‫Et puis tout ce qui vient de notre base de données.
‫Donc utilisateur. photo, et ensuite
‫on peut aussi lui donner un joli texte alternatif
‫qui est très important pour l'accessibilité.
‫Allons-y ici.
‫Alors, testons cela maintenant, car
‫je suis en fait très curieux de voir si cela fonctionne.
‫Alors comme avant, laissez-moi aller de l'avant
‫et supprimer le cookie ici.
‫Je ne suis pas sûr de ce que fait ce stockage local ici maintenant.
‫Supprimons cela aussi, et ce cookie aussi.
‫Revenons donc à la connexion ici, et maintenant
‫je vais devoir retaper ceci. test io, un, deux, trois, quatre.
‫Allons de l'avant et copiez-le ici, connectez-vous, et en effet,
‫nous sommes connectés avec succès.
‫Donc, nous obtenons notre cookie maintenant, c'est parti.
‫Mais bien sûr, notre photo et notre nom d'utilisateur n'étaient
‫pas immédiatement affichés ici, et c'est bien sûr
‫parce que cela ne peut se produire
‫qu'après un rechargement,
‫car c'est express qui rend ces
‫pages, donc il faut en quelque sorte un rechargement.
‫Implémentons donc cela en une seconde,
‫mais pour l'instant, voyons si nous sommes réellement connectés.
‫Allons donc à toutes les visites ici, et maintenant
‫nous obtenons cette erreur ici.
‫Essayez de recharger ici.
‫Eh bien, dit qu'il ne peut pas le trouver sur le serveur.
‫Que se passe-t-il si nous rechargeons ici ?
‫Eh bien, celui-ci fonctionne, et vous
‫voyez qu'en fait notre menu utilisateur est déjà là.
‫Nous obtenons donc notre bouton de déconnexion
‫et notre photo, et bien sûr mon nom.
‫Super.
‫Essayons maintenant de
‫nous déconnecter en supprimant ce cookie.
‫Et dans la prochaine vidéo,
‫nous allons réellement implémenter cette fonctionnalité exacte.
‫Et si on recharge maintenant, c'est de retour, super !
‫Ainsi, la fonction middleware que nous venons de
‫créer fait réellement son travail.
‫Connectons-nous simplement en
‫tant que quelqu'un d'autre ici, alors disons Laura, d'accord.
‫Alors Laura, et qu'avec le même mot
‫de passe testez un deux
‫trois quatre, connectez-vous, c'est bon, rechargez, et c'est parti.
‫Cela fonctionne donc très bien.
‫Je suis juste inquiet à propos de cette
‫erreur, et donc avant de faire quoi que ce soit
‫d'autre, nous devons réellement corriger celle-ci.
‫Et puisque cette erreur n'a commencé qu'une
‫fois que nous avons commencé
‫à utiliser ce nouveau middleware, assurons-nous simplement, voyons si
‫cela a quelque chose à voir avec cela.
‫Donc, si nous supprimons
‫ce middleware, voyons s'il fonctionne de nouveau.
‫Et oui, c'est le cas maintenant.
‫Donc c'est un peu bizarre en effet.
‫Voyons si nous
‫pouvons trouver un bug dans cette fonction middleware.
‫Ce que je vois ici tout de suite,
‫c'est que nous revenons toujours à chaque fois que nous appelons ensuite, mais ici, lors du
‫prochain, nous ne le faisons pas.
‫Cela signifie donc que si nous entrons
‫dans ce bloc ici, le prochain middleware sera appelé, mais
‫encore une fois, le
‫prochain middleware sera appelé après cela.
‫Nous devons donc probablement retourner celui-ci ici aussi.
‫Mais nous nous assurons que next n'est appelé qu'une seule fois.
‫Alors essayons ça, remettez celui-ci ici, sauvez-le,
‫faites défiler vers le bas ici.
‫Ouais, ça marche maintenant.
‫Donc, nous
‫obtenons également notre utilisateur connecté ici maintenant, et donc bien
‫sûr, si nous supprimons le cookie en déconnectant l'utilisateur, rechargez-le maintenant, alors
‫nous revenons à la normale.
‫Ensuite, ce que nous voulions corriger ici est d'obtenir une
‫alerte ici, puis de
‫recharger la page après un certain temps.
‫Pas vraiment en train de recharger, mais à la place de
‫le renvoyer à la page d'accueil.
‫Donc, pour le moment, ce n'est plus le cas, et comme
‫je l'ai dit plus tôt, nous
‫ne voyons ce menu utilisateur que lorsque nous rechargeons la page.
‫C'est donc ce que nous allons faire maintenant
‫automatiquement dans notre code Java Script ici.
‫Alors débarrassons-nous tout d'abord de ces données ici.
‫L'enregistrement de données sensibles sur la console n'est jamais une
‫bonne idée, et faisons maintenant ce
‫que je viens de dire.
‫Donc ici, nous faisons une demande, et bien sûr
‫je vais également vous montrer comment nous pouvons envoyer des données directement
‫depuis un formulaire htl dans notre application Note.
‫Il y a deux façons.
‫Une façon consiste à envoyer
‫des données à l'aide d'une requête http comme nous l'avons fait ici.
‫Et une autre consiste simplement à utiliser directement un formulaire html.
‫Et donc celui-ci est également très important, et donc un peu
‫plus tard dans la
‫section je vous montrerai comment faire celui-là aussi.
‫Quoi qu'il en soit, montrons maintenant cette alerte et rechargeons la page.
‫Ne faisons cela que si nous sommes vraiment sûrs
‫que notre appel api a réussi.
‫Disons la réponse. data, et donc ces données sont en fait
‫les données que nous avons
‫envoyées comme réponse de notre journée, et
‫donc à partir de là, nous pouvons lire . statut, et vérifiez s'il est
‫égal au succès.
‫Alors, rappelez-vous comment nous définissons toujours le
‫statut sur succès, et maintenant nous pouvons réellement l'utiliser
‫pour effectuer cette vérification.
‫Utilisons donc une simple alerte Java
‫Script, alerte comme celle-ci et disons connecté avec succès.
‫Débarrassons-nous de cela, et après une seconde et
‫demie chargeons également la première page.
‫Donc en gros, la page d'accueil.
‫Alors, fenêtre. setTimeout, puis ici
‫la fonction callback, et donc pour charger
‫une autre page on dit location . assigner, puis nous allons simplement à la
‫page d'accueil comme ceci.
‫Et nous voulons le faire après 1500
‫millisecondes, donc une seconde et demie.
‫Ensuite, au cas où
‫nous n'aurions pas réussi, nous ne voulons en
‫fait pas enregistrer cela, mais nous voulons plutôt l'alerter.
‫Alors alerte, et encore une
‫fois, ces données ici sont en fait notre réponse de données.
‫Alors, à partir de là, lisons la propriété message.
‫Cela devrait faire le travail, rechargeons ici.
‫D'accord, ce n'est pas la bonne personne.
‫Alors, plutôt administrateur chez natours. io, testez un
‫deux trois quatre cinq, afin
‫de voir l'erreur en premier.
‫Et donc vous voyez, e-mail ou
‫mot de passe incorrect, et bien sûr, c'est parce
‫que notre mot de passe était erroné, alors débarrassons-nous
‫de cela, connectez-vous, et donc connecté avec succès.
‫Voyons maintenant ce qui se passe.
‫Et il ne se recharge
‫pas automatiquement, car avant cela, nous devons
‫fermer cette fenêtre.
‫Donc, une fois que nous l'avons fermé, il devrait alors effectuer le rechargement immédiatement.
‫Et donc voilà.
‫Nous sommes maintenant à la
‫page d'accueil, et à nouveau avec notre menu utilisateur correct rendu ici, parfait.
‫Cette partie est donc également terminée, et maintenant, comme
‫dernière étape, je souhaite améliorer ces
‫alertes que l'utilisateur reçoit.
‫Au lieu d'afficher ces alertes Java Script intégrées.
‫De plus, nous allons faire ce regroupement Java Script que j'ai
‫déjà mentionné à quelques reprises, mais nous allons laisser tout
‫cela pour la prochaine vidéo parce que
‫je ne veux pas trop surcharger chacun de ces éléments.