‫Narrateur : Bon retour.
‫Donc, dans cette vidéo, vous allez apprendre un moyen super sécurisé
‫de déconnecter les utilisateurs.
‫Ainsi, jusqu'à présent, lorsque nous voulions supprimer un utilisateur, nous
‫supprimions simplement le cookie de notre navigateur.
‫À droite?
‫Donc quelque chose comme
‫ça, puis supprimez-le.
‫Cependant, le fait est que nous avons créé ce
‫cookie en tant que cookie http uniquement.
‫N'oubliez pas cela,
‫et cela signifie que nous ne pouvons en aucun
‫cas manipuler ce cookie dans notre navigateur.
‫Nous ne pouvons donc pas le
‫modifier, et nous ne pouvons pas non plus le supprimer.
‫Jetons donc un coup d'œil rapide à cet endroit dans le code où nous
‫avons fait cela.
‫Donc, dans
‫le contrôleur d'authentification là-haut, nous créons en fait
‫ce cookie, c'est donc ici.
‫Et encore une fois, rappelez-vous que cela signifie que
‫nous ne pouvons en aucun cas manipuler le cookie dans le navigateur.
‫Même pas le détruire.
‫Supprimez-le donc.
‫Donc, si nous voulons continuer à utiliser ce moyen super sécurisé
‫de stocker les cookies, alors
‫comment allons-nous pouvoir réellement déconnecter les utilisateurs de notre
‫site Web ?
‫Parce que généralement, avec l'authentification JWT, nous supprimons
‫simplement le cookie
‫ou le jeton du stockage local.
‫Mais bon, encore une fois, ce n'est pas possible en l'utilisant de cette façon.
‫Et donc ce que nous allons faire à la
‫place est de créer une route de déconnexion très simple qui renverra
‫simplement un nouveau cookie avec exactement le même
‫nom mais sans le jeton.
‫Et cela remplacera alors le cookie actuel que nous
‫avons dans le navigateur par un autre qui porte le même
‫nom mais pas de jeton.
‫Et donc, lorsque ce cookie est ensuite envoyé
‫avec la demande suivante, nous ne serons pas en
‫mesure d'identifier l'utilisateur comme étant connecté.
‫Et donc cela déconnectera efficacement l'utilisateur.
‫Et nous allions également donner
‫à ce cookie un délai d'expiration très court.
‫Et donc ce sera effectivement un peu
‫comme supprimer le
‫cookie, mais avec une solution de contournement très intelligente comme celle-ci, d'accord ?
‫Faisons-le ici, juste après la connexion.
‫Donc, encore une fois, lorsque nous procédons à une authentification basée sur des
‫jetons, nous n'avons généralement jamais besoin d'un point
‫de terminaison comme celui-ci, mais lorsque nous voulons envoyer un cookie super sécurisé comme nous le faisons bien,
‫nous devons le faire comme ceci.
‫Donc, encore une fois, sur la réponse, nous définissons le cookie, et le
‫secret est de lui donner exactement le même nom.
‫Donc, comme je
‫l'ai mentionné précédemment, et c'est jwt.
‫Alors comme ici, d'accord ?
‫Mais ici, nous envoyons ensuite le
‫jeton, mais maintenant nous enverrons simplement un texte factice.
‫Alors disons déconnecté, puis les
‫options de cookie.
‫Donc une date d'expiration, comme dans 10
‫secondes à partir de maintenant.
‫Créons donc une nouvelle date
‫basée
‫sur la date. maintenant
‫plus 10 secondes.
‫C'est donc 10 fois 1000.
‫Et aussi, je vais le définir, encore une fois, sur http uniquement.
‫Définissez sur true, mais
‫nous n'avons pas besoin de le définir comme sécurisé,
‫car dans ce cas, il n'y a aucune
‫donnée sensible que quiconque puisse obtenir.
‫Ici, il nous manque la
‫virgule et il ne nous reste plus qu'à renvoyer cette réponse.
‫Donc, statut 200 et marquons-le simplement
‫comme un succès ici.
‫Ensuite, dans notre route, nous devons l'ajouter, bien sûr, aussi pour
‫que ce soit sur la
‫route de l'utilisateur, alors faisons-le ici après
‫la connexion, mais celui-ci sera en fait une demande d'obtention
‫car nous n'allons pas envoyer
‫de données avec
‫la demande que nous
‫ne changeons rien, nous obtenons simplement un cookie.
‫Et donc ce nom a vraiment du sens.
‫Ou ce verbe a vraiment du sens.
‫Alors déconnectez-vous, et
‫maintenant nous sommes prêts à emprunter cette route comme nous l'avons
‫fait ici avec notre bibliothèque Axios.
‫Donc exportez, déconnectez-vous ou const
‫en premier et comme
‫avant, nous utilisons
‫un bloc try catch
‫qui dans ce cas n'est
‫pas vraiment important car il ne peut pas
‫vraiment y avoir d'erreur lors de la déconnexion, n'est-ce
‫pas ?
‫Mais de toute façon, juste au cas où, par
‫exemple, nous n'avons pas de connexion Internet.
‫Donc, dans ce cas, nous obtiendrons alors une belle erreur et
‫commençons par le faire ici.
‫Alors, affichez l'erreur
‫de
‫déconnexion, essayez à nouveau.
‫D'accord, mais cela ici, comme je l'ai dit,
‫ne devrait pas arriver si souvent.
‫Faisons donc
‫plutôt
‫notre requête avec Axios.
‫Très bien.
‫Et donc la méthode cette fois est
‫get et l'URL est
‫similaire à ce que nous
‫avons ici, mais c'est
‫se déconnecter.
‫Et puis, à l'étape suivante, rechargeons également la page.
‫C'est donc toujours ce que nous faisons
‫manuellement lorsque nous supprimons un cookie, n'est-ce pas ?
‫Et donc ici, bien sûr, nous devons le faire par programme.
‫À droite?
‫Et nous devons le
‫faire ici car, puisqu'il s'agit d'une requête Ajax, nous ne pouvons pas le
‫faire en arrière-plan.
‫Nous ne pouvons donc pas le faire avec express.
‫Et donc nous devons, bien sûr, le faire manuellement ici.
‫À droite?
‫Sinon, nous serions techniquement déconnectés, mais notre menu
‫utilisateur refléterait toujours, ce qui indiquerait
‫toujours que nous sommes connectés.
‫Et donc bien sûr, nous avons simplement besoin de recharger
‫la page qui enverrait alors le cookie invalide
‫essentiellement au
‫serveur, de sorte que celui que nous venons de
‫recevoir sans jeton et que nous
‫ne soyons plus connectés, et donc notre menu utilisateur disparaître, d'accord ?
‫Alors faisons-le s'il y a un succès.
‫Alors comme avant, reposez-vous. Les données. statut.
‫Et donc dans ce point final, nous renvoyons également le statut défini
‫sur succès, et nous
‫pouvons donc une fois de plus le tester ici.
‫Et donc si c'est le
‫cas, nous n'en avons même pas besoin, donc
‫dans ce cas, l'emplacement de la veuve. recharger.
‫Et puis quelque chose de vraiment important
‫est que nous devons en fait le définir sur
‫true ici, et cela forcera alors un rechargement à
‫partir du serveur et non du cache du navigateur, d'accord ?
‫Maintenant et bien sûr, nous devons le marquer
‫ici comme asynchrone, et d'accord.
‫Donc, cette partie ici est à nouveau vraiment importante
‫car sinon elle pourrait simplement charger la même
‫page à
‫partir du cache qui aurait alors toujours notre menu utilisateur là-haut.
‫Mais bien sûr, ce n'est pas
‫ce que nous voulons, nous voulons vraiment une nouvelle page provenant du serveur.
‫Très bien?
‫Nous avons donc notre fonction de déconnexion
‫et maintenant dans l'index, nous devons maintenant la déclencher une fois que nous
‫avons appuyé sur ce bouton.
‫Créons donc d'abord un élément ici.
‫Donc, le document
‫du bouton de déconnexion. querySelector et
‫rappelez-vous comment nous avons créé cet élément.
‫C'est donc ici.
‫Alors celui-ci.
‫Nous sélectionnons donc maintenant par cette classe.
‫D'accord, et nous pourrions bien sûr aussi utiliser un identifiant ici,
‫mais ce n'est pas vraiment important, d'accord ?
‫Ce qui compte ici, c'est de dire maintenant
‫s'il y a
‫un bouton de déconnexion, puis logOutButton. addEventListener.
‫Nous voulons donc qu'il écoute tous les événements qui
‫se produisent sur ce bouton chaque fois qu'il y a un clic.
‫Nous attendons donc l'événement click et
‫lorsque cela se produit, nous appelons la fonction de
‫déconnexion que nous n'avons pas encore
‫importée, ajoutons donc cela ici.
‫Alors connectez-vous et déconnectez-vous.
‫Très bien, et ça devrait être ça.
‫Alors, testons-le maintenant.
‫Rechargez-le juste pour être sûr, et
‫maintenant Oh, nous
‫obtenons une erreur de déconnexion.
‫Essayez à nouveau, pourquoi est-ce.
‫Eh bien, essayons de mieux voir l'erreur.
‫Mais ce qui est important, c'est qu'en fait tout
‫cela fonctionne déjà.
‫Donc, cet écouteur d'événement ici
‫et cette fonction de déconnexion font en quelque sorte son travail.
‫Alors
‫faisons juste console. erreur de journal. réponse.
‫Rechargeons donc ceci ici.
‫Cela devrait en quelque sorte se produire automatiquement.
‫Très bien.
‫Alors réessayez.
‫Alors, que se passe-t-il ici,
‫donc la conversion vers l'ID d'objet a échoué pour la déconnexion de la valeur.
‫Donc c'est très bizarre.
‫Jetez un œil à cet itinéraire.
‫Oh, bien
‫sûr, c'est une grave erreur.
‫Devrait être connecté bien sûr.
‫D'accord, mais ce genre de cours, encore une fois, arrive tout le temps.
‫Rechargeons donc ceci ici.
‫Et réessayez.
‫Et maintenant, nous obtenons quelque chose ici.
‫Maintenant, c'est toujours une erreur,
‫mais ce n'est pas du tout un problème.
‫Nous avons donc une erreur de jeton
‫Web JSON car notre jeton Web JSON est mal formé.
‫Et donc cela vient, comme
‫vous pouvez le voir, du middleware connecté.
‫Et donc nous pouvons en quelque sorte deviner pourquoi, n'est-ce pas ?
‫Revenons donc en arrière pour ajouter notre contrôleur d'authentification.
‫Et donc le jeton Web JSON
‫que nous envoyons essentiellement maintenant est-il ici, n'est-ce pas ?
‫Donc, cela s'est déconnecté.
‫Et donc
‫ici, dans isLoggedIn, cela déclenchera alors essentiellement une erreur.
‫Donc, ici, dans le jeton Web JSON, vérifiez, n'est-ce pas ?
‫Et puisque toute cette fonction ici est
‫encapsulée dans ce catchASync, elle enverra cette erreur à tous les middleware
‫de gestion des erreurs globales.
‫Et cela va alors créer cette erreur dont dans ce cas on
‫ne veut pas, tu te souviens ?
‫Donc, dans
‫ce middleware isLoggedIn, nous ne voulons pas provoquer d'erreurs.
‫Et donc, résolvons cela en
‫fait et nous allons donc supprimer ce catchASync
‫d'ici parce que nous ne voulons pas attraper d'erreurs Async.
‫Au lieu de cela, ce que nous voulons faire,
‫c'est essentiellement les capturer
‫localement, puis s'il y a une erreur, dites simplement suivant.
‫Comme ça, d'accord ?
‫Alors faisons-le.
‫Alors enveloppez tout cela dans un essai.
‫Fermez-le ici.
‫Eh bien, autre chose ne va pas.
‫Ah ! Il nous manque probablement le bloc catch.
‫Et donc dans ce cas, nous voulons passer au middleware suivant.
‫Donc, en gros, dire qu'il n'y a pas d'utilisateur connecté.
‫À droite?
‫Alors, testons-le à nouveau.
‫Revenez en arrière, oh , et maintenant nous ne sommes plus connectés.
‫Alors connectez-vous.
‫C'était réussi.
‫Et maintenant, déconnectons-nous tout de suite.
‫Ah ! Beau! Maintenant, cela fonctionne correctement.
‫Et donc cette fois, ce qui s'est passé ici,
‫c'est bien sûr que cette vérification
‫a échoué car ce jeton Web JSON n'était pas dans un
‫format que cet algorithme attendait.
‫Mais ce qui s'est passé dans ce cas, c'est
‫que l'erreur n'a pas été détectée à l'aide
‫de notre fonction catchASync, mais à la place, elle est allée directement
‫à err, qui est ensuite allée directement au middleware suivant.
‫D'accord, super !
‫Donc, si nous examinons maintenant nos cookies, nous
‫en avons un en cours d'utilisation qui a probablement déjà expiré.
‫Donc, vous voyez qu'il n'a que cette durée de vie de 10 secondes et
‫donc si je recharge cette page maintenant, elle
‫devrait déjà avoir disparu.
‫Vous ne voyez donc aucun cookie en cours d'utilisation.
‫D'accord, et c'est en fait tout ce que
‫nous avons à faire pour déconnecter l'utilisateur de notre site Web.