Interceptor Angular 4.3 - Set multiple headers on the cloned request

Question

I just noticed that the Header Object that was possible to use in the previous HTTP RequestsOption is not anymore supported in the new Interceptor.

It's the new Interceptor logic:

// 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)});

I have, now, two ways to add my headers in this request:

Example:

headers?: HttpHeaders;

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

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

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

How can I add multiple headers conditionally on this request? Same to what I used to do with the Header Object:

 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);

score 27 · Accepted Answer · answered Oct 06 '17 at 13:13

Angular 4.3+

Set multi headers in 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);
  }
}

Hi non4me, is that will miss the orignal headers using `req.clone({headers})`? — Rollsbean, Sep 03 '19 at 08:54

Enayat · Answer 2 · 2018-10-11T17:08:17.610

18

My code worked with the following approach to add new headers to replace previous values by new values:

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

edited Oct 11 '18 at 17:08

answered Oct 13 '17 at 13:56

Enayat

3,904
1
33
47

2

.set() won't append headers, it will add the new headers replacing whatever comes. – DJ22T Oct 11 '18 at 16:06
I meant add new headers. Thanks for the note – Enayat Oct 11 '18 at 17:07

Max Koretskyi · Answer 3 · 2018-01-10T15:56:08.323

The new HTTP client works with immutable headers object. You need to store a reference to the previous headers to mutate the object:

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

See Why HttpParams doesn't work in multiple line in angular 4.3 to understand why you need to store the reference to the returned value.

It's the same thing for headers:

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;
  }

To learn more about mechanics behind interceptors read:

Insider’s guide into interceptors and HttpClient mechanics in Angular

score 11 · Answer 4 · answered Mar 19 '18 at 23:58

To append to the existing header of a cloned request (like in an HTTP Interceptor), the code below works (using Angular 5.x). In the case below, it appends to the existing header (which in my case includes the XSRF-TOKEN cookie automatically included by Angular) with a JWT Authorization token stored in 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);
    }
}

Since I work with Angular 9, ensure this format `const cloneReq = request.clone({ headers : headers });` — Ram, Feb 17 '20 at 10:36
@Ram you can write headers just once, if the object has the same name of the parameter — funder7, Apr 03 '20 at 18:14

Interceptor Angular 4.3 - Set multiple headers on the cloned request

4 Answers4

Linked

Related