web-dev-qa-db-fra.com

Comment ajouter plusieurs en-têtes dans Angular 5 HttpInterceptor

J'essaie d'apprendre à utiliser HttpInterceptor pour ajouter quelques en-têtes à chaque requête HTTP de l'application vers l'API. J'ai cet intercepteur:

import { Injectable } from '@angular/core';

import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';


@Injectable()
export class fwcAPIInterceptor implements HttpInterceptor {
  intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

  const authReq = req.clone({
    headers: req.headers.set('Content-Type', 'application/json')
  });

  console.log('Intercepted HTTP call', authReq);

  return next.handle(authReq);
}

}

À part l'en-tête 'Content-Type', j'ai besoin d'ajouter une 'autorisation' mais je ne sais pas comment le faire (la documentation de Angular HttpHeaders est juste la liste des méthodes, sans aucune explication).

Comment puis-je le faire? Merci!

angularangular-http-interceptorsangular-httpclient
5
Fel
@Injectable()
export class fwcAPIInterceptor implements HttpInterceptor {
  intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

  const authReq = req.clone({
    headers: new HttpHeaders({
      'Content-Type':  'application/json',
      'Authorization': 'my-auth-token'
    })
  });

  console.log('Intercepted HTTP call', authReq);

  return next.handle(authReq);
}
11
axl-code

Puisque la méthode set renvoie à chaque fois un objet d'en-tête, vous pouvez le faire. De cette façon, les en-têtes d'origine de la demande interceptée seront également conservés.

const authReq = req.clone({
    headers: req.headers.set('Content-Type', 'application/json')
    .set('header2', 'header 2 value')
    .set('header3', 'header 3 value')
});
9
Ketan Patil
  const modifiedReq = req.clone({
      url: this.setUrl(req.url),
      headers: this.addExtraHeaders(req.headers)
    });

Et la méthode:

private addExtraHeaders(headers: HttpHeaders): HttpHeaders {
  headers = headers.append('myHeader', 'abcd');
  return headers;
}

La méthode .append crée un nouvel objet HttpHeaders ajoute myHeader et retourne le nouvel objet.

L'utilisation de cette solution signifie que vous pouvez également utiliser plusieurs intercepteurs, car vous n'écraserez pas vos en-têtes.

1
Mihai

Comme mentionné précédemment - la méthode acceptée remplace les en-têtes; pour les ajouter, j'aime bien l'approche depuis la documentation de l'API :

const authReq = req.clone({ setHeaders: { Authorization: authToken } });
0
vitalii-patsai

La solution ci-dessus a fonctionné comme un charme. N'oubliez pas d'attribuer un rappel aux en-têtes de la ligne 2

1 private addExtraHeaders(headers: HttpHeaders): HttpHeaders {<br> 2 headers = headers.append('myHeader', 'abcd');<br> 3 return headers;<br> 4 } <br>

0
Manjiri Killedar