0Pricing
Angular Academy · Leçon

Ajouter des en-têtes d’authentification

Ajoutez des jetons aux requêtes sortantes

Ajouter des en-têtes d’authentification est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Pourquoi intercepter pour l’authentification

La plupart des API exigent un en-tête Authorization pour chaque requête. Plutôt que de l’ajouter manuellement à chaque appel, un intercepteur l’ajoute automatiquement à toutes les requêtes sortantes.

Cloner pour ajouter un en-tête

Comme les requêtes sont immuables, clonez-les avec setHeaders pour ajouter le jeton.

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();
  const authReq = req.clone({
    setHeaders: { Authorization: 'Bearer ' + token }
  });
  return next(authReq);
};

Lire le jeton depuis un service

Injectez un service d’authentification ou de gestion des jetons pour obtenir le jeton actuel. L’utilisation d’un signal ou de BehaviorSubject dans ce service permet de conserver une valeur à jour.

export class AuthService {
  private token = signal<string | null>(null);
  getToken() { return this.token(); }
  setToken(t: string) { this.token.set(t); }
}

Ignorer l’absence de jeton

Si l’utilisateur n’est pas connecté, transmettez la requête d’origine sans la modifier.

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();
  if (!token) return next(req);
  return next(req.clone({
    setHeaders: { Authorization: 'Bearer ' + token }
  }));
};

Ajouter le jeton uniquement à votre API

Ne divulguez pas votre jeton à des URL tierces. Protégez-vous en vérifiant que l’URL de la requête appartient à votre serveur principal.

const isApi = req.url.startsWith(environment.apiUrl);
if (!isApi || !token) return next(req);
return next(req.clone({
  setHeaders: { Authorization: 'Bearer ' + token }
}));

setHeaders ou headers.set

setHeaders dans clone est la forme concise. Vous pouvez également utiliser req.headers.set(...) et le transmettre via { headers }. setHeaders fusionne les en-têtes ; il ne les remplace pas tous.

const headers = req.headers.set('Authorization', 'Bearer ' + token);
return next(req.clone({ headers }));

Ajouter plusieurs en-têtes

Ajoutez plusieurs en-têtes à la fois dans un seul clone.

return next(req.clone({
  setHeaders: {
    Authorization: 'Bearer ' + token,
    'X-Client': 'web',
    'Accept-Language': lang
  }
}));

withCredentials pour les cookies

Si l’authentification utilise des cookies HttpOnly plutôt que des jetons, activez withCredentials afin que le navigateur les envoie entre différentes origines.

return next(req.clone({ withCredentials: true }));

Actualiser un jeton expiré

Pour actualiser un jeton, l’intercepteur peut intercepter une réponse 401, demander un nouveau jeton, puis réessayer la requête d’origine — un modèle plus avancé abordé avec la gestion des erreurs.

Garder l’intercepteur pur

L’intercepteur doit lire le jeton et cloner la requête ; évitez d’y déclencher une navigation ou une logique lourde. Conservez des responsabilités ciblées afin que le pipeline des requêtes reste prévisible.

Enregistrer l’intercepteur d’authentification

Placez-le tôt dans la chaîne afin que l’en-tête soit présent avant l’exécution de la journalisation ou des autres intercepteurs.

provideHttpClient(
  withInterceptors([authInterceptor, loggingInterceptor])
)

Vérification rapide

Vérifiez votre compréhension de l’ajout d’en-têtes d’authentification.

Récapitulatif : ajouter des en-têtes d’authentification

Un intercepteur d’authentification ajoute le jeton aux requêtes sortantes.

  • Clonez avec setHeaders: { Authorization: ... }.
  • Ignorez les requêtes sans jeton et limitez l’ajout à votre URL d’API.
  • Utilisez withCredentials pour l’authentification par cookie.

Ensuite : gérer les erreurs globalement.

Questions Fréquemment Posées

La leçon « Ajouter des en-têtes d’authentification » est-elle gratuite ?

Oui — le texte complet de « Ajouter des en-têtes d’authentification » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Ajouter des en-têtes d’authentification » ?

Ajoutez des jetons aux requêtes sortantes Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Ajouter des en-têtes d’authentification » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Intercepteurs fonctionnels
  2. Ajouter des en-têtes d’authentification
  3. Gérer les erreurs globalement
  4. Nouvelles tentatives et indicateurs de chargement
← Retour à Angular Academy