web-dev-qa-db-fra.com

Interceptor Angular 4.3 - Définir plusieurs en-têtes sur la requête clonée

Je viens de remarquer que le Header Object qui était possible dans la précédente requête HTTP RequestsOption n'est plus pris en charge dans le nouvel intercepteur.

C'est la nouvel intercepteur logique:

// Get the auth header from the service.
const authHeader = this.auth.getAuthorizationHeader();
// Clone the request to add the new header.
const authReq = req.clone({headers: req.headers.set('Authorization', authHeader)});

J'ai maintenant deux façons d'ajouter mes en-têtes dans cette demande:

Exemple:

headers?: HttpHeaders;

    headers: req.headers.set('token1', 'asd')

setHeaders?: {
   [name: string]: string | string[];
};

    setHeaders: {
             'token1': 'asd',
             'token2': 'lol'
    }

Comment puis-je ajouter plusieurs en-têtes conditionnellement à cette demande? Identique à ce que je faisais avec l'objet en-tête:

 myLovellyHeaders(headers: Headers) {
    headers.set('token1', 'asd');
    headers.set('token2', 'lol');
     if (localStorage.getItem('token1')) {
     headers.set('token3', 'gosh');
     }
    }
    const headers = new Headers();
    this.myLovellyHeaders(headers);
angularheaderinterceptor
22
39ro

Le nouveau client HTTP fonctionne avec un objet en-tête immuable. Vous devez stocker une référence aux en-têtes précédents pour muter l'objet:

 myLovellyHeaders(headers: Headers) {
     let p = headers.set('token1', 'asd');   
     p = p.set('token2', 'lol');
     if (localStorage.getItem('token1')) {
        p = p.set('token3', 'gosh');
     }

Voir Pourquoi HttpParams ne fonctionne pas dans plusieurs lignes dans angular 4. pour comprendre pourquoi vous devez stocker la référence à la valeur renvoyée.

C'est la même chose pour les en-têtes:

export class HttpHeaders {
  ...
  set(name: string, value: string|string[]): HttpHeaders {
    return this.clone({name, value, op: 's'});
  }

  private clone(update: Update): HttpHeaders {
    const clone = new HttpHeaders();
    clone.lazyInit =
        (!!this.lazyInit && this.lazyInit instanceof HttpHeaders) ? this.lazyInit : this;
    clone.lazyUpdate = (this.lazyUpdate || []).concat([update]);
    return clone;
  }

Pour en savoir plus sur les mécanismes derrière les intercepteurs, lisez:

9
Max Koretskyi aka Wizard

angulaire 4.3 +

Définir plusieurs en-têtes dans Interceptor:

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

import {environment} from '../../../../environments/environment';

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

    const headers = new HttpHeaders({
      'Authorization': 'token 123',
      'WEB-API-key': environment.webApiKey,
      'Content-Type': 'application/json'
    });


    const cloneReq = req.clone({headers});

    return next.handle(cloneReq);
  }
}
15
non4me

Mon code fonctionnait avec l'approche suivante pour ajouter de nouveaux en-têtes afin de remplacer les valeurs précédentes par de nouvelles valeurs:

headers: req.headers.set('token1', 'asd')
.set('content_type', 'asd')
.set('accept', 'asd')
9
Enayat

Pour ajouter à l'en-tête existant d'une requête clonée (comme dans un intercepteur HTTP), le code ci-dessous fonctionne (avec Angular 5.x). Dans le cas ci-dessous, il est ajouté à l'en-tête existant. (qui dans mon cas inclut le cookie XSRF-TOKEN automatiquement inclus par Angular) avec un jeton d'autorisation JWT stocké dans sessionStorage:

export class TokenInterceptor implements HttpInterceptor {

    constructor() { }
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        let headers = request.headers
            .set('Content-Type', 'application/json')
            .set('Authorization', `Bearer ${sessionStorage.getItem('authToken')}`);

        const cloneReq = request.clone({ headers });

        return next.handle(cloneReq);
    }
}
6
Alex