Aller au contenu principal

39-1 Ajouter le jeton automatiquement aux requêtes

Si vous démarrez votre projet Houdini (Angular) et que vous avez protégé vos actions d'API liées aux projets (utilisation d'un guard sur le contrôleur de projets dans le votre API), vous serez accueilli par ce message:

Imgur

En effet, on essaie de faire une requête à l'API, mais aucun jeton d'authentification n'est pas envoyé.

Ajouter manuellement le jeton au localstorage​

Dans un premier temps, pour tester, ajoutez manuellement un jeton valide au localstorage. Pour obtenir un jeton valide, vous pouvez effectuer une requête d'authentification via Postman.

Imgur

info

La clé access_token est utilisée pour stocker le jeton. Le nom de la clé n'a pas d'importance en soi, tant et aussi longtemps que vous êtes cohérent et utilisez la même clé lorsque viendra le temps de récupérer le jeton du local storage.

attention

Vous devrez éventuellement sauvegarder le jeton dans le localstorage lorsque vous ferez l'authentification de l'utilisateur via un formulaire de connexion.

Envoyer le jeton dans l'en-tête des requêtes d'API​

Dans la configuration api.config.ts, on peut ajouter un intercepteur de requête qui ajoutera le jeton en provenance du localstorage à l'en-tête de chaque requête. Il s'agit d'un principe similaire à ce que nous avons fait pour Airtable.

src/app/core/http/api.ts
import axios from "axios";

export const api = axios.create({
  baseURL: 'http://localhost:3000',
});

api.interceptors.request.use((config: any) => {
  const token = localStorage.getItem('access_token');

  if(token) {
    config.headers['Authorization'] =  `Bearer ${token}`;
  }

  return config;
});

Et voilà, vous aurez des requêtes fonctionnelles et authentifiées!

Imgur