Jeton angulaire au porteur

D’accord, donc, généralement, lorsque nous faisons des demandes d’API, nous avons besoin d’un jeton pour valider notre demande.

Dans notre cas, nous venons d’apprendre à nous connecter en tant qu’utilisateur et nous nous sommes assurés que les itinéraires sont sécurisés.

Alors, à partir de là, comment pouvons-nous manipuler les appels d’API pour toujours inclure le jeton que nous avons stocké dans notre objet utilisateur ?

Nous ne voulons pas ajouter un en-tête à chaque appel d’objet de cette manière.

Ne vous méprenez pas. Cela fonctionnera, mais cela se répète, alors créons un intercepteur qui fera exactement cela pour nous !

Création de notre permalien d’intercepteur

Comme d’habitude, ouvrons le terminal et trouvons notre dossier de projet. Exécutez maintenant la commande suivante pour générer notre intercepteur de jetons.

Cela créera un fichier dans notre dossier d’intercepteurs.

C’est pourquoi nous enregistrons le authService en tant que fournisseur dans notre service. Ensuite, nous implémentons le à partir duquel nous allons étendre la fonction.

Cette fonction d’interception a une requête et un objet next.

Ce que nous faisons, c’est récupérer le jeton à partir de notre objet utilisateur. Si cette option est définie, nous clonons la requête en cours d’exécution et ajoutons un en-tête.

Dans ce cas, nous ajoutons un jeton avec le jeton réel qui lui est attaché (oui, je sais que ce n’est pas un jeton oAuth) Ensuite,

nous retournons la requête et récupérons si nous obtenons un 401 (non autorisé).

Si c’est le cas, nous nous déconnectons de l’utilisateur actuel puisque notre jeton a expiré et renvoyons une erreur.

Implémentation du permalien de l’intercepteur

Nous devons donc maintenant nous assurer que tous nos appels sont enregistrés avec cet intercepteur.

Ouvrez votre et ajoutez ce qui suit dans la section des fournisseurs.

Cela indique à Angular que nous avons créé le nôtre et à partir de quel service il doit le charger.

pénible Faisons

une démo rapide pour voir si cela fonctionne.

Ouvrez le et donnez-lui l’apparence suivante :

nous effectuons simplement un simple appel d’API dans le composant pour vérifier si notre intercepteur fonctionne.

Maintenant, si vous ouvrez l’onglet réseau de votre console, vous devriez voir la demande suivante !

Et voilà, nous avons maintenant ajouté notre en-tête personnalisé, et il sera ajouté à chacun de nos appels.

Vous pouvez également trouver ce code sur GitHub.

Merci de m’avoir lu, et connectons-nous ! permalink

Merci d’avoir lu mon blog. N’hésitez pas à vous abonner à ma newsletter par e-mail et à vous connecter sur Facebook ou Twitter

🛠. Modifier sur GitHub