Interceptors in Angular2

Question

I am trying to build a demo app on Angular2.beta.0 which would have login mechanism and then all the other API calls would have the acquired session token sent via the headers.

In angular 1x, I could write an Interceptor which would add the token to the http header in a separate code, I would like to know if angular2 has such kind of mechanism or any other recommended way to do this.

Have you seen [JWT for Angular2](https://auth0.com/blog/2015/11/10/introducing-angular2-jwt-a-library-for-angular2-authentication/)? — Eric Martinez, Dec 18 '15 at 18:44

score 11 · Accepted Answer · edited Dec 01 '16 at 10:09

Has to be HTTP header of the requests? Cookies seems to be a good choice: https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage/

By looking at HTTP documentation we have:

get(url: string, options?: RequestOptionsArgs) : Observable<Response>

Performs a request with get http method.

Going to RequestOptionsArgs we have:

headers : Headers

Not Yet Documented

Finally landing at Headers.

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

So it 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 BaseRequestOptions documentation this is a way to attach this header to each request in automatic way.

BaseRequestOptions is what I was looking for, Need to make it work now. Thanks! — hussainb, Dec 19 '15 at 11:36
the link for BaseRequestOptions is not working. here is the latest working link - https://angular.io/docs/ts/latest/api/http/index/BaseRequestOptions-class.html — saurabh, Aug 12 '16 at 01:54

Yoav Schniederman · Answer 2 · 2017-01-25T12:07:11.853

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

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

Create 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) => {
            });
        }
    }

the `catch` will execute twice, but the there is just one request. — Lin Du, Aug 08 '17 at 06:15

score 0 · Answer 3 · answered Feb 26 '17 at 14:28

There's an example of how to do this for intercepting 401 responses from authenticated APIs here.

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

The post above shows how to add a standard Authorzation header to all outgoing HTTP requests and also automatically refresh any JWT like token.

Interceptors in Angular2

3 Answers3

Linked