Menu
I'm trying to learn how to use HttpInterceptor to add a couple of headers to each HTTP request the app do to the API. I've got this interceptor:
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); } } Apart of the 'Content-Type' header I need to add an 'Authorization' but I don't how to do it (the documentation of Angular HttpHeaders is just the list of the methods, without any explanation).
How can I do it? Thanks!
568
So how can I add multiple interceptors? Http doesn't allow to have more than one custom implementation. But as @estus mentioned the Angular team has added a new HttpClient service recently (release 4.3) which supports multiple interceptors concept. You don't need to extend the HttpClient as you do with the old Http .
After providing HTTP_INTERCEPTORS we need to inform the class we are going to implement our interceptor into by using useClass. Setting multi to true, makes sure that you can have multiple interceptors in your project.
There are two ways by which we can add the headers. One, we add the HTTP Headers while making a request. The second way is to use the HTTP interceptor to intercept all the Requests and add the Headers. In both cases, we use the httpHeaders configuration option provided by angular HttpClient to add the headers.
Since the set method returns headers object every time, you can do this. This way, original headers from the intercepted request will also be retained.
const authReq = req.clone({ headers: req.headers.set('Content-Type', 'application/json') .set('header2', 'header 2 value') .set('header3', 'header 3 value') }); Edit: Following suggestions in comments I have unified both answers
Overwriting all headers
@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); } Adding more headers without overwriting (credits to Ketan Patil - see answer in this post)
const authReq = req.clone({ headers: req.headers.set('Content-Type', 'application/json') .set('header2', 'header 2 value') .set('header3', 'header 3 value') }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
