Axios jwt token react

Dans nos précédents articles, nous avons su comment créer l’authentification et l’autorisation dans React.js application. Dans ce tutoriel, je vais continuer à vous montrer comment implémenter Refresh Token avec JWT et Axios Interceptors dans React.

Related Posts :
– Tutoriel Axios Interceptors avec exemple
de jeton d’actualisation – Introduction approfondie au jeton
Web JWT-JSON – Exemple
d’authentification React JWT (sans Redux) – Hooks React : exemple
d’authentification JWT (sans Redux) – React + Redux : exemple d’authentification JWT

avec Redux : React + Redux : Refresh Token avec Axios et exemple JWT

Vue d’ensemble du jeton d’actualisation React avec JWT

Le diagramme montre le déroulement de l’implémentation du jeton d’actualisation React JWT.

– A sera fourni au moment où l’utilisateur se connectera.
– Une valeur légale doit être ajoutée à l’en-tête HTTP si le client accède à des ressources protégées.
– Avec l’aide d’Axios Interceptors, l’application React peut vérifier si le (JWT) est expiré (401 ), envoie une demande pour recevoir une nouvelle demande et l’utiliser pour une nouvelle demande de ressource.

Voyons comment le jeton d’actualisation React.js fonctionne avec l’interface utilisateur de démonstration.

– Tout d’abord, nous effectuons une connexion au compte.

– L’utilisateur peut désormais accéder aux ressources avec le jeton d’accès disponible.

– Lorsque le jeton d’accès a expiré, React envoie automatiquement une demande de jeton d’actualisation, reçoit un nouveau jeton d’accès et l’utilise avec une nouvelle demande.

– Après un certain temps, le nouveau jeton d’accès a de nouveau expiré, ainsi que le jeton d’actualisation.

Désormais, l’utilisateur ne peut plus accéder aux ressources restreintes.

Le serveur back-end de ce client React se trouve à l’adresse suivante :

Nous allons implémenter la fonctionnalité Token Refresh en nous basant sur le code des articles précédents, vous devez donc d’abord lire l’un des tutoriels suivants :

Intercepteurs Axios dans React

Créons un service qui fournit une instance Axios avec requête et réponse.

services / api.js

Dans le code ci-dessus, nous :
– interceptons les demandes ou les réponses avant qu’elles ne soient traitées par ce moment-là ou attrapons.
– gérer l’état sur la réponse de l’intercepteur (sauf la réponse de la demande de connexion)
– utiliser un appel d’indicateur sur la demande d’origine (config) pour gérer la boucle infinie. Il se peut que la demande échoue à nouveau et que le serveur continue de renvoyer le code d’état.

Pour plus de détails, veuillez consulter :
Tutoriel Axios Interceptors avec exemple de jeton d’actualisation

Mettre

à jour les services avec de nouveaux intercepteurs Axios

Les intercepteurs Axios manipulent l’en-tête, le corps et les paramètres des requêtes envoyées au serveur afin que nous n’ayons pas besoin d’ajouter des requêtes Axios comme ceci :

Nous supprimons donc auth-header.js fichier, puis mettons à jour les services qui l’utilisent avec le nouveau service.

services /

user.service.js services / auth.service.js

Nous devons également créer l’instance Axios et les autres services utilisés ci-dessus.
fournit des méthodes get, set, remove pour travailler avec le jeton et les données utilisateur stockées sur le navigateur.

services / token.service.js

React Refresh Token à l’aide de Hooks

Si vous utilisez dans l’exemple React Hooks : Authentification JWT (sans Redux), vous pouvez modifier les services comme ceci.

services user.service.js

services / services auth.service.js

/ token.service.js

Conclusion

Aujourd’hui, nous savons comment implémenter JWT Refresh Token dans une application React à l’aide d’Axios Interceptors. Pour comprendre le flux logique, vous devriez d’abord lire l’un des tutoriels suivants :

– Exemple
d’authentification React JWT (sans Redux) – Hooks React : Exemple
d’authentification JWT (sans Redux) – React + Redux : Exemple d’authentification JWT Le

serveur back-end pour ce client React peut être trouvé à l’adresse suivante :

Lectures complémentaires

Articles similaires :
– En profondeur Introduction à JWT-JSON Web Token
– Tutoriel Axios Interceptors avec exemple de jeton d’actualisation

Authentification et autorisation fullstack :
– React + Spring Boot
– React + Node.js Express

Vous pouvez simplifier l’instruction d’importation avec :
Importation absolue dans le

code source

React

Le code source de cette application React se trouve sur Github :
– React (
composants) – React (hooks)

Avec Redux : React + Redux : Exemple de Refresh Token avec Axios et JWT