Interceptors in Angular2

Question

I am trying to create a demo application on Angular2.beta.0 that will have a login mechanism, and then all other API calls will have an acquired session token sent through the headers.

In angular 1x, I can write an Interceptor that will add a token to the http header in separate code, I would like to know if angular2 has such a mechanism or some other recommended way to do this.

Answer 1

Should there be an HTTP request header? Cookies seem like a good choice: https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage/

Having looked at HTTP , we have:

get(url: string, options?: RequestOptionsArgs) : Observable<Response> Performs a request with get http method. 

Going to RequestOptionsArgs :

 headers : Headers Not Yet Documented 

Finally, landing on the Headers .

 import {Headers} from 'angular2/http'; var secondHeaders = new Headers({ 'X-My-Custom-Header': 'Angular' }); 

So this should be something like:

 import {Response} from "angular2/http"; import {RequestOptionsArgs} from "angular2/http"; import {Headers} from "angular2/http"; let token:string = 'my-secret'; this.http.get('your/url', <RequestOptionsArgs> { headers: new Headers({ 'X-My-JWT-Header': 'sweet' }) }) 

Looking at the BaseRequestOptions Documentation , this is a way to automatically attach this header to every request.

Answer 2

first in app.module.ts add the following line to the providers array:

  {provide : Http, useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions) => new HttpInterceptor(xhrBackend, requestOptions),deps: [XHRBackend, RequestOptions]} 

Create an HttpIntreceptor file with

  import {Http, RequestOptionsArgs, RequestOptions, Response, Request, ConnectionBackend} from "@angular/http"; import {Observable} from "rxjs/Observable"; import "rxjs/add/operator/catch"; import "rxjs/add/observable/throw"; import "rxjs/add/observable/empty"; import {Router} from "@angular/router"; export class HttpInterceptor extends Http { constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private _router: Router) { super(backend, defaultOptions); } request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> { return this.intercept(super.request(url, options)); } get(url: string, options?: RequestOptionsArgs): Observable<Response> { return this.intercept(super.get(url,options)); } post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> { return this.intercept(super.post(url, body, options)); } put(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> { return this.intercept(super.put(url, body, options)); } delete(url: string, options?: RequestOptionsArgs): Observable<Response> { return this.intercept(super.delete(url, options)); } intercept(observable: Observable<Response>): Observable<Response> { return observable.catch((err, source) => { }); } } 

Answer 3

Here is an example of how to do this to intercept 401 responses from authenticated APIs here.

http://www.annalytics.co.uk/angular2/javascript/typescript/ionic2/2017/02/26/Angular2-Http-Auth-Interceptor/

The message above shows how to add a standard Authorzation header to all outgoing HTTP requests, and also automatically update any token that resembles a JWT.