Angular 2, Http service wrapper to pass authorization token with each request.

AuthHttp.ts

import {Injectable, EventEmitter} from 'angular2/core';
import {Http, Headers, RequestOptions, RequestOptionsArgs, Response, RequestMethod, Request, Connection, ConnectionBackend} from 'angular2/http';
import * as Rx from 'rxjs';


export enum Action { QueryStart, QueryStop };

@Injectable()
export class AuthHttp {
  process: EventEmitter<any> = new EventEmitter<any>();
  authFailed: EventEmitter<any> = new EventEmitter<any>();

  constructor(private _http: Http) { }

  private _buildAuthHeader(): string {
    return localStorage.getItem("authToken");
  }

  public get(url: string, options?: RequestOptionsArgs): Rx.Observable<Response> {
    return this._request(RequestMethod.Get, url, null, options);
  }

  public post(url: string, body: string, options?: RequestOptionsArgs): Rx.Observable<Response> {
    return this._request(RequestMethod.Post, url, body, options);
  }

  public put(url: string, body: string, options?: RequestOptionsArgs): Rx.Observable<Response> {
    return this._request(RequestMethod.Put, url, body, options);
  }

  public delete(url: string, options?: RequestOptionsArgs): Rx.Observable<Response> {
    return this._request(RequestMethod.Delete, url, null, options);
  }

  public patch(url: string, body: string, options?: RequestOptionsArgs): Rx.Observable<Response> {
    return this._request(RequestMethod.Patch, url, body, options);
  }

  public head(url: string, options?: RequestOptionsArgs): Rx.Observable<Response> {
    return this._request(RequestMethod.Head, url, null, options);
  }

  private _request(method: RequestMethod, url: string, body?: string, options?: RequestOptionsArgs): Rx.Observable<Response> {
    let requestOptions = new RequestOptions(Object.assign({
      method: method,
      url: url,
      body: body
    }, options));

    if (!requestOptions.headers) {
      requestOptions.headers = new Headers();
    }

    requestOptions.headers.set("Authorization", this._buildAuthHeader())

    return Rx.Observable.create((observer) => {
      this.process.next(Action.QueryStart);
      this._http.request(new Request(requestOptions))
        .map(res=> res.json())
        .finally(() => {
        this.process.next(Action.QueryStop);
      })
        .subscribe(
        (res) => {
          observer.next(res);
          observer.complete();
        },
        (err) => {
          switch (err.status) {
            case 401:
              //intercept 401
              this.authFailed.next(err);
              observer.error(err);
              break;
            default:
              observer.error(err);
              break;
          }
        })
    })
  }
}

Thank you! thank you! You just saved me after hours of bashing my head against this, trying to figure out how to update my headers with an extension of Http

how can i use this wrapper inside a component? i mean just in place of http.get should i use AuthHttp.get and it will work?

@chandermani @jkunz How can i use this?

How to use it?

Hi thanks for sharing it with us, but how we will write logic to update/refresh expired token when we get 401 error.

Hi,
Thank you for sharing this code. I suggest you not to import the entire Rxjs library (import * as Rx from 'rxjs';) This will download about 200 scripts, instead download only those parts that you need.

Ex: import { Observable } from 'rxjs/Observable'; :)

Please how to use it?

Thanks a lot :) I am new to angular and was implementing login. Saved a lot of effort.

Why would you have to override all the http methods (get, post, delete..) when you can just override the request method ...