PC & Mobile

Authentification des requêtes HTTP dans les applications Web modernes – Jake Richards

Authentification des requêtes HTTP dans les applications Web modernes - Jake Richards


Assurez-vous que vos utilisateurs sont authentifiés à l'aide de technologies modernes telles qu'Axios, JWT et TypeScript.

S'assurer que l'utilisateur est authentifié est un élément essentiel de la création d'une application Web moderne. Aujourd’hui, nous allons envisager une approche commune utilisant l’accès JWT et actualisant les jetons avec Axios. Les exemples seront écrits en TypeScript mais devraient également fonctionner en JavaScript simple. Vous pouvez accéder à l’exemple de code via le lien "sandbox" qui vous intéresse: https://codesandbox.io/s/react-typescript-n8hmb?fontsize=14

Installation de dépendances

Il suffit de courir npm i jsonwebtoken axios -S et si vous utilisez TypeScript, veillez à enregistrer en tant que dépendance de dev npm i dactylographié -D.

Configuration de l'utilitaire d'authentification

Pour créer des fonctions réutilisables qui interagissent avec l’API du navigateur localStorage et notre logique JWT, nous allons configurer un fichier d’utilitaire d’authentification, auth.ts. Cela abritera la logique permettant de déterminer si un utilisateur est authentifié ou non avant d'exécuter un appel d'API. Ce fichier fournira également des fonctions nous permettant d'accéder à la récupération et à la définition de l'accès et d'actualiser les jetons lorsqu'ils doivent être mis à jour.

Exécution de requêtes HTTP avec Axios

Dans notre intégration avec Axios, nous voudrons fournir des fonctions qui nous donneront accès à des API externes qui géreront l’authentification pour nous. Nous aimerions avoir un contrat qui nous oblige uniquement à spécifier un point final et toutes les données pertinentes. Voyons comment cela pourrait être fait. Nous appellerons ce fichier api.ts.

Ici, nous avons une fonction d'assistance appelée performAuthenticatedRequest qui peut être utilisé pour fournir obtenir, poster, mettre, et effacer méthodes pour exécuter des requêtes HTTP vers toute API externe spécifiée.

Vous devrez implémenter la logique de récupération d'un nouveau jeton d'accès pour un jeton d'actualisation sur votre serveur - ou utiliser un service tel que Auth0 qui le fait pour vous.

Conclusion

C'est tout ce qu'on peut en dire! Pas une tonne de code, mais il est important de comprendre la scission de la logique ici et de créer des fonctions réutilisables qui nous permettent de nous authentifier et de communiquer avec des API externes.

Afficher plus

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Articles similaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Bouton retour en haut de la page
Fermer