Angular2 setting headers in all REST API request | Setting multiple headers in request using Angular service

Angular2 setting headers in all REST API request | Setting multiple headers in request using Angular service

Angular2 setting headers in all REST API request | Setting multiple headers in request| Headers setting in request with Angular service ... 9:01 AM

Angular2 setting headers in all REST API request | Setting multiple headers in request| Headers setting in request with Angular service

We may need to set custom headers in our all API requests for various purposes.


Ex : adding custom auth header to all requests referred to REST API.

There are many ways you can add your custom headers in the request.

Option 1.Write a service that wraps the original Http object

import {Injectable} from '@angular/core';
import {Http, Headers} from '@angular/http';

@Injectable()
export class MyHttpClient {

  constructor(private http: Http) {}

  createAuthorizationHeader(headers: Headers) {
    headers.append('auth-custom-hdrs', 'GDFDSFDFSDSD3DFDFDFD'); 
  }

  get(url) {
    let headers = new Headers();
    this.createAuthorizationHeader(headers);
    return this.http.get(url, {
      headers: headers
    });
  }

  post(url, data) {
    let headers = new Headers();
    this.createAuthorizationHeader(headers);
    return this.http.post(url, data, {
      headers: headers
    });
  }
}

And instead of injecting the Http object you could inject this one (MyHttpClient).

import { MyHttpClient } from './http-client';

export class AppComponent {
  // Injected "our" MyHttpClient 
  constructor(http: MyHttpClient) {
    this.http = httpClient;
  }

  handleSomething() {
    this.http.post(url, data).subscribe(result => {
        // console.log( result );
    });
  }
}


Option 2 : Extending BaseRequestOptions which is from from 'angular2/http'.

import {provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS, Headers, Http, BaseRequestOptions} from 'angular2/http';

import {AppComponent} from './components/index';


class MyRequestOptions extends BaseRequestOptions {
  constructor () {
    super();
    this.headers.append('auth-custom-hdrs','MyCustomHeaderValue');
  }
} 

bootstrap(AppCmp, [
  ROUTER_PROVIDERS,
  HTTP_PROVIDERS,
  provide(RequestOptions, { useClass: MyRequestOptions })
]);

This should include 'auth-custom-hdrs' in every service call.

Option 3 : Create a Service and the method in the service will returns all the headers added. Then call this service method and set it into the API request as like below,

Service

import {Injectable} from '@angular/core';
import { Http, Headers, RequestOptions, URLSearchParams, Response } from '@angular/http';

@Injectable()
export class SessionService {
  constructor () {
    console.log("New SessionService");
  }



public jsonHeaders(): Headers {
        let headers: Headers = new Headers();
        headers.append('Content-Type', 'application/json; charset=utf-8');
        headers.append("Cache-Control", "no-cache");
        headers.append("Cache-Control", "no-store");
        headers.append("If-Modified-Since", "Mon, 26 Jul 1997 05:00:00 GMT");
        headers.append( 'Authorization', this._apptoken);

        return headers;
}
}


and in Your component,

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, URLSearchParams , Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { SessionService } from '../../../_services/session.service';
......

@Injectable()
export class LoginService {
    constructor(private http: Http , private sessionService:SessionService) { }

.
.
.
login(email:string, password:string) {
   
    let params: URLSearchParams = new URLSearchParams();
    params.set('login', email);
    params.set('password', password);
    let requestOptions = new RequestOptions({
                        headers: this.sessionService.jsonHeaders(),
                        method: 'POST'
                    });
    requestOptions.search = params;
    return this.http.get('/login', requestOptions)
            .map((response: Response) => {
                console.log('response ::' + response);
                .
                .
                .
            });
}
}

Sample output :

Host: localhost:8080 Connection: keep-alive Content-Length: 0 Pragma: no-cache Cache-Control: no-cache,no-store Authorization:SDFSDF34DFGDF Origin: http://localhost:8000 User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.98.9.3029.110 Safari/537.36 Content-Type: application/json; charset=utf-8 Accept: */* Referer: http://indit-l-141:8000/ Accept-Encoding: gzip, deflate, br Accept-Language: en-US,en;q=0.8

Hope this helps.