[Fixed] Angular – Set headers for every request


I need to set some Authorization headers after the user has logged in, for every subsequent request.

To set headers for a particular request,

import {Headers} from 'angular2/http';
var headers = new Headers();
headers.append(headerName, value);

// HTTP POST using these headers
this.http.post(url, data, {
  headers: headers
// do something with the response


But it would be not be feasible to manually set request headers for every request in this way.

How do I set the headers set once the user has logged in, and also remove those headers on logout?


To answer, you question you could provide a service that wraps the original Http object from Angular. Something like described below.

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

export class HttpClient {

  constructor(private http: Http) {}

  createAuthorizationHeader(headers: Headers) {
    headers.append('Authorization', 'Basic ' +

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

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

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

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

export class MyComponent {
  // Notice we inject "our" HttpClient here, naming it Http so it's easier
  constructor(http: HttpClient) {
    this.http = httpClient;

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

I also think that something could be done using multi providers for the Http class by providing your own class extending the Http one… See this link: http://blog.thoughtram.io/angular2/2015/11/23/multi-providers-in-angular-2.html.

Leave a Reply

(*) Required, Your email will not be published