Le cours ultime de JWT [ SingUp, connectez-vous et déconnexion avec la pile MERN]

1. Introduction: Bienvenue dans le cours ultime de JWT. Dans ce cours, nous allons apprendre le JWT dans un langage simple et facile. Après avoir terminé ce cours, vous aurez une bonne compréhension des jetons Web JSON. Tout d'abord, nous allons voir ce qu'est JWT, pourquoi nous en avons besoin. Ensuite, nous allons commencer par la partie back-end de JWT, qui explique comment générer des jetons, comment vérifier les jetons et implémenter l' API de sécurité uniquement pour les utilisateurs connectés. Après cela, nous passerons à la partie frontale dans laquelle nous stockons Dogan dans notre navigateur. Implémentation des fonctionnalités de connexion et de déconnexion d'inscription, envoi d'un jeton dans l'en-tête et création d'un composant pour la route privée. Dans la section Projet, vous trouverez toutes les ressources pour ce cours. Je suis très enthousiaste pour ce cours et j'espère que vous l'êtes aussi. Commençons. 2. Qu'est-ce que JWT et pourquoi nous en avons besoin ?: JWT signifie JSON web token, qui est utilisé pour transférer en toute sécurité des informations entre deux parties, comme le back-end et le front-end. Mais la raison principale de l'utilisation de JWT est d' authentifier l'utilisateur à l' aide de son jeton. Comprenons cela avec l'exemple. Voici à peine un login avec ses informations de compte, son e-mail et son mot de passe. Maintenant, notre serveur plus j, l'inflammation. Et si c'est vrai, serveur renvoie son identifiant utilisateur en réponse et le stocke dans le citoyen ou le cookie. Maintenant, chaque fois qu'il envoie la demande des informations sécurisées, disons toutes ses informations bancaires. publication du serveur a demandé l'ID utilisateur. Et s'il a un ID utilisateur, alors le serveur envoie les informations sécurisées. Mais voici un gros problème, ce n'est pas notre cookie dans lequel nous stockons notre identifiant utilisateur. Il peut être facilement modifié dans le navigateur. Supposons que je viens de remplacer cet identifiant par un autre nom d'utilisateur. Ensuite, nous obtenons les informations sur cet utilisateur. Cette approche n'est donc pas sécurisée. Pour résoudre ce problème, nous avons introduit le jeton Web JSON. Maintenant, à peine connectez-vous avec son e-mail et son mot de passe. Notre serveur s'est arrêté pour vérifier l'inflammation. Et si c'est vrai, serveur renvoie le jeton unique chiffré et le stocke dans le stockage local. Maintenant, l'avantage de ce jeton est qu'il est créé avec détails de l'utilisateur et une clé secrète que nous avons définie sur le serveur. Donc, chaque fois que vous envoyez à peine une demande aux informations actuelles de la politique, une demande aux informations actuelles de la politique, le serveur a demandé un jeton JWT, vérifiez-le à l'aide de notre clé secrète. Si c'est vérifié, puis puis service et les informations de ce demandeur. Et si nous changeons quelque chose dans les informations de l'utilisateur, notre jeton changera. C'est pourquoi nous utilisons JWT, l'authentification utilisateur. Je sais que vous avez de nombreuses questions concernant le jeton Web JSON, mais regardez ce tutoriel complet, il dissipera vos doutes. Dans ce tutoriel, je vais utiliser NodeJS comme backend et React JS pour le front-end. Mais vous pouvez toujours les suivre quel que soit le langage de programmation que vous utilisez. 3. Commencer par Backend: Ici, je crée un projet simple dans Node.JS dans lequel je connecte ce serveur de nœuds à ma base de données MongoDB localhost et écoute ce serveur sur localhost par milliers. Au fait, vous pouvez également télécharger le code de démarrage. Nous allons d'abord installer toutes les dépendances de ce projet. Ouvrez donc le terminal et écrivez npm install. Laissez-le fonctionner en arrière-plan. Maintenant, dans le dossier des modèles, j'ai créé un utilisateur modèle avec seulement trois pilules, nom, e-mail et mot de passe. Maintenant, dans le dossier des itinéraires, je définis tous les itinéraires. La ligne de bus est destinée à l'enregistrement de l'utilisateur dans ce fichier users.js. Donc ici, nous récupérons d'abord toutes les données du corps du point de la demande et les déstructurons. Ensuite, nous vérifierons l'utilisateur existant. Et après cela, nous enregistrerons les informations utilisateur dans la base de données et les informations de l'utilisateur Sandy car il répond à une route assez simple. Ensuite, dans le fichier server.js, j'importe cet utilisateur et je définis ce pavé de route en tant qu' API moins utilisateur. Alors ouvrez dix minutes et écrivez le serveur Norman. Cela mettra continuellement à jour le serveur de Jane's. Super, nous connectons la base de données. Alors goûtons-nous avec Postman. Maintenant, je passe notre route ici et je sélectionne Row et Jason. Maintenant, ici, je passe l'objet de données et je clique sur Envoyer et voir que nous obtenons les données utilisateur. Maintenant, si B clique à nouveau sur le bouton Envoyer, alors nous obtenons que l'utilisateur existe déjà. C'est donc la petite introduction pour savoir qui surveille le temps de pause du nœud juste pour comprendre. De même, nous avons une autre route appelée odd pour la connexion. Laissez-moi vous montrer directement dans Postman. Je passe donc l' adresse e-mail et le mot de passe corrects. Cliquez ensuite sur Envoyer. Vous voyez, nous obtenons l'utilisateur actuel. Mais si nous passons un mauvais mot de passe, nous obtenons une erreur. Il existe maintenant trois tâches principales pour JWT dans le back-end. Regardé. L'un est de générer un jeton sur le registre. Deuxièmement, générez un jeton lors de la connexion. Enfin, lorsque l'utilisateur demande des informations de sécurité, nous devons vérifier le jeton. Commençons par la tâche numéro un. 4. Générer un jeton JWT sur l'enregistrement et la connexion: Ouvrez donc le terminal et ajoutez un nouveau terminal et écrivez npm I, JSON Web Token et appuyez sur Entrée. Maintenant, l'utilisateur est sorti. En haut, je déclare que JWT est égal deux jetons Web requis et décents. Maintenant, après avoir stocké les données sur l'enregistrement, réfléchissez au signe JWT Token ou JWT. Maintenant, le premier argument est nos données que nous voulons transmettre avec ce jeton. Je crée donc une nouvelle variable appelée données JWT parce que pour souligner l' ID de l'utilisateur, le point de soulignement, le nom de la virgule, user.name. Passez maintenant ces données JWT ici. Le deuxième paramètre est notre clé secrète JWT. Nous pouvons donc passer ici n'importe quelle chaîne comme code bless you, ou quoi que ce soit d'autre. Cette clé secrète est très importante pour l'authentification. Dans ce cas, il n'est pas sécurisé. Nous allons donc déclarer notre clé secrète dans fichier point ENV ici. Jwt secret équivaut à quelque chose comme 123 code blast ou quelque chose qui ne sera pas facile à deviner. Comme si vous créiez l'application Zomato, clé secrète est comme si Zwicky était le meilleur. Maintenant, enregistrez-le et revenez à notre parcours utilisateur. Par ici, nous ajoutons le point ENV traité, le secret JWT. Avec ce processus point ENV, nous pouvons accéder à la variable de ce fichier ENV. Maintenant, si vous voulez faire expirer le jeton dans un certain temps, nous pouvons également le définir. Je veux donc faire expirer ce jeton dans quelques heures. Donc, si un utilisateur achète ce token après deux heures, il peut se reconnecter pour un nouveau token, n'est-ce pas ? Dans l'objet expire entre guillemets doubles et. Tu peux écrire l'heure. Si vous souhaitez l'exporter en une journée, passez 1D. Mais je passe ici pour mouiller pendant deux heures. Encore une fois, c'est facultatif. Maintenant, stockez cela dans une variable appelée jeton dans la réponse, envoyez le jeton, enregistrez les modifications. Maintenant, dans Postmen, nous créons un nouveau code utilisateur pour lire gmail.com et cliquez sur Envoyer. Tu vois, nous obtenons ce jeton crypté. Copiez maintenant ce jeton et cet en-tête sur Jwt.io. Ceci est le site officiel de JWT. Vous pouvez lire ici sa documentation. Cliquez maintenant sur ce débogueur. Oui, nous pouvons décoder notre jeton. Voyons maintenant ce qui se trouve à l'intérieur ce jeton basé sur notre jeton ici. Maintenant, tous les jetons sont divisés en trois parties. La première partie concerne l'en-tête, qui est de couleur rouge. La deuxième partie concerne la charge utile, qui est en violet. Et la dernière et la plus importante partie est la signature, qui est de couleur bleue. Maintenant, cet en-tête contient l' algorithme et le type de jeton, ce qui est très courant. Ne te concentre pas là-dessus. Cette charge utile contient maintenant les données que nous voulons transmettre à ce jeton. Dans notre cas, nous transmettons l'identifiant et le nom. voyez, ici nous obtenons nos données. Nous pouvons donc afficher ces données sur notre interface sans demander de nouvelle API. Et nous avons plus de données, ce qui signifie émis à la valeur est l'heure à laquelle notre jeton a été généré. Et EXP est notre période d'exploration. Maintenant, la dernière partie, la signature, qui est générée en fonction de notre en-tête, ces données utiles et de la clé secrète, qui n'est disponible que sur le serveur. Cela empêchera donc les utilisateurs d'obtenir leur propre Dogan et de le modifier ensuite avec un identifiant pour se faire passer pour quelqu'un d'autre. Parce que si vous modifiez quelque chose dans cette charge utile ou cet en-tête, la signature le régénérera. n'y a aucune chance pour l'utilisateur de faire quelque chose de contraire à l'éthique. C'est pourquoi JWT est si populaire. Nous avons donc créé avec succès notre registre JSON Web Token Board. Faisons de même pour la connexion. Copiez donc ces trois lignes et allez dans et pointez le fichier js et collez-le ici. Et en haut, redéclarez JWT égal à requérir un jeton Web JSON et enregistrez-le. Maintenant, dans la connexion, passez haut les données correctes et envoyez-les. Tu vois, on a un jeton. Nous terminons avec succès notre deuxième tâche ou backend. 5. Vérifier le jeton sur la route sécurisée: Maintenant, la dernière tâche, qui est sites ou la demande d'itinéraire sécurisé, ce qui signifie que les données ne sont accessibles que par les utilisateurs connectés. Ensuite, nous devons faire une pause pour vérifier le jeton Web JSON. Et s'il est valide, nous renvoyons des données. Donc, dans le fichier users.js, nous ajoutons une nouvelle API, obtenant les informations utilisateur actuellement connectées , qui s'afficheront sur bra palpate. Donc, le point de routeur droit obtient le chemin Les Paul et ajoute une fonction avec la réponse à la requête. Maintenant, nous devons créer notre middleware dans lequel nous vérifierons le jeton sur chaque route sécurisée. Créez donc un nouveau dossier appelé middleware. Et à l'intérieur, nous créons un nouveau fichier appelé ab.js. Super. Maintenant, nous définissons d'abord la fonction et ajoutons module.exports ou exportons cette fonction. Maintenant, vous savez peut-être que notre fonction middleware a trois paramètres, request, response et le suivant. Maintenant, ne nous inquiétons pas pour ça. Maintenant, à l'intérieur de cela, nous passons d'abord le jeton que vous passez par l'en-tête. Donc, demandez l'en-tête et passez ici le nom de l'en-tête, je passe x ou token, qui est le nom couramment utilisé. Vous pouvez transmettre ce que vous voulez pour le stocker dans une variable de jeton. Ensuite, nous vérifierons si le jeton n'est pas disponible. Renvoyez ensuite l'état du point de réponse pour 01 , Dotson et bass, accès refusé. Dogan introuvable. Et si le jeton est disponible, nous le vérifierons. Donc, en haut, redéclarez JWT égal à exiger un jeton Web JSON. Maintenant, nous écrivons JWT point verify. Le premier paramètre est notre jeton, que nous voulons vérifier. Le deuxième paramètre est notre clé secrète JWT. Alors, traitez point ENV, secret JWT. Maintenant, cela nous donnera un identifiant et un nom, que nous transmettons plus tôt. allons donc stocker cela dans la variable user, et nous passons que les valeurs dans request point user sont égales à user. Après cela, nous appellerons la fonction suivante. Il exécutera donc l'API. Maintenant, si ce jeton est valide, alors ce code nous donnera une erreur. Soviétiques essaient d'attraper le blocage pour ça. Maintenant, déplacez ça à l'intérieur du bloc d'essai. Maintenant, dans ce bloc de capture, nous écrivons l'état du point de réponse, 400. Les points envoient un jeton non valide et l'enregistrent. Revenons maintenant à la route users.js. Et d'abord, nous importons impair. Donc écrire const odd est égal à deux, intergiciel à double point requis, moins impair. Maintenant, nous passons cet étrange intergiciel ici. Ainsi, lorsque quelqu'un appelle cette API, cet étrange middleware s'exécute. Et si le jeton est vérifié, alors, puis cette fonction s'exécutera. Maintenant, tout de suite IT User point find by ID and password request dot user dot underscore ID, que nous avons déclaré dans le middleware d' automne, et le stocker dans une variable appelée profile. Ensuite, les points de réponse et le profil. Ici, nous ajoutons un poids. Par conséquent, nous devons écrire ici async, Save it. Nous allons maintenant tester cette API privée. Revenons donc à Postman et ajoutez une nouvelle requête et passez ici http deux-points double slash hôte local, deux-points Python slash api slash utilisateur, et cliquez sur Envoyer. Vous voyez, nous obtenons le message d'erreur Accès refusé parce que nous n'avons pas transmis de jeton dans l'en-tête. Allez donc dans la section En-tête. Et voici x jeton impair, que nous passons dans le middleware d'automne. Et ici, nous passons notre jeton. Je copie donc ce jeton depuis la connexion, je le goûte et je le colle ici. Maintenant, cliquez sur envoyer et nous obtenons le profil utilisateur. Maintenant, si nous changeons quelque chose dans ce jeton et que nous l'envoyons, nous obtiendrons un jeton non valide. Notre partie back-end est donc terminée ici. Minimisez ce serveur via score, car nous devons continuer à exécuter ce serveur. Nous allons maintenant voir comment gérer JWT dans React. 6. Authentification de Frontend: J'ai donc ouvert le dossier client dans un autre VS Code. Tout d'abord, nous allons installer toutes les dépendances. Alors ouvrez et écrivez npm install et laissez-le fonctionner en arrière-plan. Permettez-moi de vous donner un bref aperçu de cette application React. Donc, dans ce composant de l'application, je crée une barre maintenant, et à l'intérieur du snail bad, je crée trois liens now. Et pour le routage, je crée ce composant de routage dans lequel je définis tous les itinéraires comme home, login et register, c' est aussi simple que cela. Lancez cette application. Ouvrez donc un terminal et écrivez npm start et appuyez sur Entrée C. C' est notre composant principal. Après cela, nous avons le formulaire de connexion sur la page de connexion. Donc, si nous écrivons e-mail et mot de passe, puis soumettons le formulaire, nous obtenons des valeurs dans la console. De même, nous avons un formulaire d'inscription. Nous remplissons le formulaire et cliquons sur le bouton S'inscrire. Ensuite, nous obtenons des valeurs dans la console, ainsi de suite , JWT, quand vous utilisez une résistance, nous envoyons un jeton depuis le back-end, non ? Ensuite, nous stockons ce jeton dans le stockage local du navigateur et le transmettons lorsque nous faisons une demande d'API sécurisée. Dans notre exemple, notre API de profil. Donc, comme pour le backend, nous avons trois tâches pour le front-end. La première est que nous stockons le jeton sur la résistance. Ensuite, nous stockons le jeton sur Login. Et enfin, nous avons dit jeton à notre en-tête. Nous pouvons donc effectuer une demande d'API sécurisée. 7. Stocker un jeton en s'inscrivant et en vous connectant: Ouvrez donc le terminal et ajoutez un nouveau terminal et écrivez npm I SEOs et appuyez sur Entrée. Si vous ne connaissez pas les SCO, votre vidéo du guide Injectez mon XES. Maintenant, je crée un nouveau dossier appelé utils for utilities et je crée un nouveau fichier avec le nom STDP ab.js. Maintenant, dans ce fichier, tout d'abord, j'importe à partir de zéros. Et après cela, je crée une variable appelée instance égale à XES point create. Passez maintenant l'objet et à l'intérieur, réécrivez l'URL de base. Ici. Nous pouvons transmettre notre URL de base backend, qui est une double barre oblique http deux-points l'hôte local par mille API de moins. Et à la fin, exportez l'instance par défaut. Donc, en gros, nous créons un raccourci pour faire une demande d'API. Nous n'avons donc pas besoin d'écrire à chaque fois une URL complète. Si nous faisons une requête ou localhost deux-points pi mille slash api slash user, alors nous devons simplement écrire slash user. Maintenant, allez dans le registre du dossier des composants et ouvrez ce fichier register dot js. Il s'agit donc d'un formulaire d'inscription. Maintenant, dans la fonction de soumission, nous appellerons notre API de registre. Donc, en haut, nous importons d'abord STDP depuis, nous allons aux détenteurs et ajoutons les détails en tant que PIB. Maintenant, je supprime cette console ici, http point post. Maintenant, le premier paramètre est le chemin de notre API, qui est moins utilisateur. Et le deuxième paramètre concerne les détails de l'utilisateur. Maintenant, cette déclaration renvoie une promesse. Nous allons gérer cela avec async wait. J'écris ici sur huit, et ici nous passons AC. Stockons maintenant cette valeur dans une variable appelée response. Et consolez cette réponse, enregistrez les modifications et jetez un œil, allez dans les résistances, collez et remplissez les données avec un e-mail unique. Et cliquez sur le bouton Enregistrer. Vous voyez, nous obtenons cet objet de réponse. Dans ces données, nous obtenons notre jeton. Distrayons cette réponse et récupérons cette propriété data. Maintenant, créons notre jeton dans notre stockage local. Notre navigateur possède donc son propre petit espace de stockage. Nous écrivons donc le stockage local, point set item. Maintenant, la variable post est le nom de ce champ, qui est un jeton. Ensuite, nous transmettons des données, qui sont un véritable jeton. Et après cela, nous allons déplacer l'utilisateur vers la page d'accueil. Pour la navigation. Nous utilisons le routeur dom React. Au sommet. Je suis important d'utiliser la navigation à partir du routeur React dom, terminez ici. Laisser naviguer est égal à utiliser navigate. Et après cela, nous écrivons Naviguer. Et à l'intérieur, nous passons notre chemin, qui est moins de vendeurs, et nous y jetons un coup d'œil. Passez maintenant un e-mail différent et cliquez sur le bouton Enregistrer. Voir nous rediriger vers la page d'accueil. Laissez-moi vous montrer où nous stockons notre jeton. Allez donc dans le panneau Application ici. Cliquez maintenant sur les histoires locales et sélectionnez l'URL de votre site Web. Vous voyez, nous avons restauré notre jeton ici. Revenez maintenant aux registres et à la paume et achetez les mêmes données et cliquez sur Enregistrer. Dans la console, nous obtenons une erreur. Revenons donc à notre application React. Et nous ajoutons un bloc try-catch pour gérer cette discorde de mode d'erreur dans ce bloc try, engage block. Nous allons simplement consoler cette époque, enregistrer les modifications et jeter un coup d'œil. Cliquez sur le bouton Enregistrer. Vous voyez, nous obtenons l'objet additionneur. Maintenant, dans cette réponse d'erreur, nous obtenons nos données, que nous envoyons de l'utilisateur back-end qui existent déjà. Nous écrivons donc ici si la réponse du point de l' additionneur est disponible et que l'additionneur point response.status est égal à 400. Ensuite, définissez error, adder dot response.data, qui est notre variable d'état. Parce que nous ne voulons afficher aucun autre additionneur que nous n'envoyons pas depuis le backend. Et en bas, j'ajoute déjà la condition, c' est-à-dire si l'additionneur est disponible, puis j'imprime cette erreur, les modifications et je jette un œil. Maintenant, je clique sur ce bouton Enregistrer et nous obtenons cette ère similaire à notre page de connexion. Donc je copie ce bloc try and catch et ouvre la page login point js. Et dans la fonction de soumission du handle, collez-le. Maintenant, copiez-le dans les importations et collez-le dans le composant de connexion. Copiez maintenant cette dernière ligne de navigation et collez-la. Donc maintenant, nous changeons le chemin de l'utilisateur, faisons impair et achetons ces données de formulaire, qui sont également des détails de l'utilisateur. Les participants, et jetez un œil. Maintenant, remplissez ce formulaire avec les mauvaises informations et voyez que nous obtenons notre additionneur maintenant après les bonnes informations. Et un composant vraiment direct vers la maison. Vous pouvez également vérifier les jetons stockés dans le stockage local. 8. Obtenir des informations utilisateur à partir de Token: Maintenant, je ne veux pas afficher ce lien de connexion et d'inscription si un utilisateur est déjà connecté. Revenons donc à Add Component, nous créons une variable d'état appelée user et la valeur initiale à null. Et en haut, import l'a utilisé depuis React. Maintenant, la logique est que la date de ces utilisateurs est nulle, ce qui signifie que l'utilisateur n' est pas connecté. L'utilisateur est disponible, puis l'utilisateur est connecté. La question est de savoir comment nous pouvons obtenir les données utilisateur actuelles. N'oubliez pas que nous transmettons nos données utilisateur dans notre section de charge utile JWT. Nous utilisons donc ces données ici pour nous authentifier. Maintenant, nous ajoutons ici la condition. Si dans le stockage local nous avons un jeton, alors nous obtenons des données à partir du jeton, n'est-ce pas ? Si le jeton point de stockage local est disponible, modifiez l'état de l'utilisateur. Maintenant, comment nous pouvons décoder notre jeton et obtenir ces données afin d'avoir une bibliothèque appelée JWT Decode. Ouvrez donc le terminal et écrivez le code npm I JWT dash d et appuyez sur Entrée et fermez ce terminal. Maintenant, nous importons le décodage JWT à partir du décor JWT. Maintenant, à l'intérieur de cette IV, nous obtenons le premier jeton du stockage local, point obtient l'élément et le jeton. Et maintenant, nous utilisons le décor JWT. Et à l'intérieur, nous passons ce jeton JWT. Maintenant, stockez ceci dans le journal variable user et définissez user sur log user. Maintenant, consolons cette variable d'état utilisateur. Enregistrez les modifications, et jetez un œil et nous obtenons une erreur, qui est due à une boucle infinie. Laissez-moi vous expliquer ici. abord, nous vérifions le jeton et nous avons ajouté les données utilisateur à cette variable utilisateur, qui crée une boucle finie. Nous devons donc déplacer ce code en dehors de ce composant de l'application. Supprimez maintenant cette fonction set user et dirigez cette valeur utilisateur du journal en tant que valeur initiale. Maintenant, avant cette condition if, redéfinissez cette variable utilisateur de journal car si le jeton n' est pas disponible, nous ne pouvons pas accéder à ce journal est une variable et supprimez également cette constante. Maintenant, enregistrez les modifications et jetez un œil. Vous voyez, nous obtenons nos informations d'utilisateur. Maintenant, en utilisant cette variable utilisateur, nous allons afficher les liens privés et le lien de connexion et d"enregistrement des jours de hauteur. Passez donc cet utilisateur comme invite dans ce composant de la barre de navigation. Maintenant dans maintenant par composant, structure 3D props et obtient la variable utilisateur. Maintenant, nous avons attrapé ces deux liens de navigation avec condition, qui est si l'utilisateur n' est pas disponible, alors ce lien. Maintenant, nous devons passer ici, réagir enceinte. Et après cela, si un utilisateur est disponible, nous afficherons deux autres liens, profil et déconnexion. Je duplique donc ce bloc et l'état de Jane et publie un lien par profil. Et deuxièmement, pour les modifications de déconnexion et jetez un œil. Vous voyez, nous obtenons notre profil et nos liens de déconnexion. Maintenant, allez dans le panneau Application sélectionnez ce jeton et supprimez-le. Quel but de dégustation. Actualisez maintenant la page. Nous obtenons des liens de connexion et d'enregistrement. 9. Corriger le bogue Rafraîchir: instant, vous pensez que notre application fonctionne bien, mais nous avons un bug ici. Laisse-moi te montrer. Ouvrez donc le formulaire de connexion et le bon e-mail et le bon mot de passe. Cliquez maintenant sur ce bouton de connexion. Maintenant, pour appuyer sur le stockage local C, nous obtenons notre jeton. Mais ces liens sont toujours visibles. Parce que dans le composant de l'application, cette condition if ne s'exécute qu'une seule fois. Donc, si nous actualisons manuellement la page, nous obtenons d'autres liens. Donc, après la connexion, nous devons actualiser automatiquement la page. C'est très simple. Revenons donc à notre composant de connexion. Et l'ambiance est de naviguer dans une annonce ici, emplacement du point de la fenêtre est égal à. Maintenant, supprimez cette navigation utilisée. Et supprimez également de l'important, enregistrez-le et copiez cette fenêtre.emplacement et collez-la dans le composant de registre. Un mode est utilisé. Naviguez et supprimez, enregistrez les modifications et jetez un œil. Encore une fois, jeton distant et actualisez la page. Filtrez maintenant l'adresse e-mail et le mot Cliquez ensuite sur Login. Vérifiez que nous obtenons nos liens sans actualiser manuellement. Parfait. 10. Mettre en œuvre la fonctionnalité de déconnexion: Créons maintenant des composants. Qu'est-ce que ces deux pages dans le dossier des composants. Je crée un nouveau dossier appelé profile, et à l'intérieur, je crée un nouveau fichier, profile point js. Maintenant écrivez AFC, React boilerplate, et je passe ici H1. Il s'agit du composant de profil. Sauvegardez-le. Et créons un nouveau dossier appelé déconnexion. Et à l'intérieur, créez un nouveau fichier, logout point js. Et encore une fois, écrivez notre passe-partout AFC et enregistrez ceci. Maintenant, allez dans le fichier de routage dot js. Nous définissons ici nos itinéraires. Dupliquez donc ces deux lignées et gènes mais pour profiler et élément également profiler. Et pour la deuxième route, on change bad pour se déconnecter. Un élément déconnecte également les modifications et jette un œil. Tu vois, nous obtenons nos itinéraires. Maintenant, terminons d'abord la fonction de déconnexion. Ouvrez donc le fichier logout dot js. La déconnexion consiste donc essentiellement supprimer le jeton du stockage local. C'est ça. J'ai donc importé use effect de React. Et ici je crée, utilise la fonction flèche arrière et tableau vide parce que nous voulons l'exécuter une seule fois. Maintenant à l'intérieur de cela en utilisant le stockage local, point supprimer l'élément, le jeton. Et après cela, nous redirigerons vers la base d'attache. Donc, l' emplacement du point de la fenêtre est égal à 2 s. Sauvegardons-le et jetons un coup d'œil. Cliquez maintenant sur Déconnexion et voyez que nous nous sommes déconnectés avec succès. Maintenant, reconnectons-nous. Et tu vois, ça marche bien. 11. Faire une demande d'API sécurisée avec Token: Maintenant, dans cette page de profil, nous voulons afficher les informations utilisateur que nous avons utilisateur de requête GET. Ouvrons le fichier profile dot js. Et d'abord, nous importons l'effet use. Et après cela, nous importons STDP de Vigo vers Fuller's up utils less STDP. Maintenant, dans le composant, nous déclarons une fonction appelée get user profile, arrow function. Et à l'intérieur, nous avons corrigé les données, non ? Http point get slash user. Maintenant, ajoutons un poids. Et pour cela, nous devons ajouter un C. Super. Maintenant, stockons cela dans une variable appelée response et consultons la réponse. Créons maintenant un objet utilisateur. Et à l'intérieur, nous appelons cette fonction. Enregistrez les modifications et la couleur. Allez sur la page de profil et voyez que nous obtenons une erreur, qui est non autorisée en raison de notre middleware impair, qui a été déclaré dans le backend. Seul l'utilisateur peut accéder à ces informations qui envoie un jeton dans l'en-tête. Nous allons donc résoudre ce problème. Pour cela, nous créons un nouveau fichier dans vos contes appelé set ou token dot js. Créez maintenant une fonction appelée set ou token. Et des bars ici, Token. Maintenant à l'intérieur, nous écrivons si Dogan est disponible, puis nous passons ce jeton dans l'en-tête en utilisant x. Utilisez. Si important de notre pile STDP, c'est une étape très importante. Juste ici. X est égal au point par défaut point d'en-tête point commun. Entre crochets. Nous passons notre nom d'en-tête, qui est x, ou token, que nous définissons dans notre back-end, est égal à token. Maintenant, dans as, lisez, écrivez, supprimez, puis copiez et collez cette commande. Et exportons default, set ou token. Appelons maintenant ce composant d'application de fonction. Jusqu'à présent, l'ensemble ou le jeton le plus important des utils, moins d'octogone défini. Maintenant, après avoir stocké ce jeton dans le jeton JWT et transmis notre jeton, qui est JWT. Enregistrez les modifications et actualisez la page de profil. Voir que nous obtenons des données de profil. C'est ainsi que vous pouvez transmettre un jeton dans l'en-tête. Vous n'avez plus besoin d'écrire un en-tête pour toutes les requêtes. Ce set ou ce jeton le fera pour vous. 12. Créer un composant de route privée: Maintenant, prenons cette application plus en avant. Parce que j'ai trouvé un bogue. Déconnectons-nous et dans l'URL, ajoutons un profil barre oblique et appuyons sur Entrée. Voir. Ici, nous obtenons le composant de profil qui n'est accessible que par l'utilisateur authentifié. Bien qu'ils puissent obtenir toutes les données grâce à notre API de sécurité, ce n'est pas une bonne pratique. Donc, si utilisateur sans login, je le fais, j'entre dans l'espace. Nous redirigerons l' utilisateur vers la page de connexion. Créons donc un nouveau fichier dans le dossier douteux appelé route privée. Maintenant, bon, RFC quad Boilerplate et réécrit ici. Si l'utilisateur est disponible, sortie ventrale, qui nous aidera à afficher un composant enfant. Je vais vous le montrer dans une seconde. Si l'utilisateur n'est pas disponible, accédez à la barre oblique. Assurez-vous d'importer la prise et de naviguer depuis le dom du routeur React. Nous obtenons l'utilisateur à partir des accessoires. Revenons donc au composant App. Et dans ce composant de routage, nous passons utilisateur égal à utilisateur. Et dans le composant de routage, utilisateur de structure 3D. Maintenant, dans la version 6 du routeur React, nous pouvons définir des routes privées très facilement. Cette route privée n' est rien qu'une fonction qui redirigera l'utilisateur s'il n'est pas connecté. Donc, la bonne route et ne passez pas directement le chemin et passez ici composant de route privé avec l'utilisateur égal à l'utilisateur et à la route la plus proche. Maintenant, entre cette route, nous pouvons passer toutes nos routes privées. Déplaçons donc ce profil et déconnectons-nous du coulis. Cela signifie donc que chaque fois que quelqu'un essaie d'acheminer l'un de ces itinéraires, alors cette fonction d'itinéraire privé exécutera post, enregistrera les modifications et jettera un œil. Vous voyez, nous allons directement à la page de connexion. 13. Corriger les petits insectes: Maintenant, connectez-vous avec vos informations dans les types d'URL moins de connexion et appuyez sur Entrée. Vous voyez, nous recevons ce formulaire de connexion. Alors réglons ce problème très rapidement. Ici. Qui achète ce composant de connexion utilisateur ? Ouvrez maintenant ce composant de connexion et l'utilisateur des accessoires de destruction. Après cela, nous écrivons ici use effect et error function avec un tableau vide. Et à l'intérieur, nous vérifions si l'utilisateur est disponible. Ensuite, nous renvoyons à l'utilisateur un pas en arrière. Importons l'utilisateur depuis React et utilisons la navigation depuis React, routeur dom. Et après avoir déclaré, nous ajoutons lead navigate égal à utiliser navigate. Maintenant, ici, naviguez et passez moins un, ce qui signifie un pas en arrière. Il fonctionne comme le bouton Précédent dans le navigateur. Si nous écrivons moins deux, cela reculera de deux pas. Gardez ça et jetez un œil. Maintenant, tapez ici, c'est moins login et entrez. vous redirigeons vers la page d'accueil. Maintenant, copions-le à partir du fichier login point js et collez-le dans le composant register. Copiez à nouveau ces lignes de saisie et collez-les en haut. Revenez maintenant au composant de routage et passez l'utilisateur égal à l'utilisateur. Alors que ce troisième composant et composant dans le registre, l'utilisateur de la structure 3D abandonne les modifications et jette un œil. Vous voyez, lorsque nous avons essayé d'accéder à la page S'inscrire, nous redirigeons un pas en arrière. Félicitations, vous avez réussi créer une authentification utilisateur à l'aide de JWT, qui est le moyen le plus utilisé pour authentifier les applications utilisateur. J'espère que ce tutoriel vous apprendra beaucoup de choses. Si vous avez des doutes, vous allez me les poser dans la section des commentaires. Rendez-vous dans la prochaine vidéo. Passe une bonne journée.