Asked  7 Months ago    Answers:  5   Viewed   19 times

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, 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, 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() {, 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:

Tuesday, June 1, 2021
answered 7 Months ago


problem is with directives: ''

as its an array it should be directives: [ ]

Update: In RC6 OR later version, you have @NgModule. In RC6 OR later version, you have to declare pipes and directives that you are gonna use within @NgModule as shown...

import { PeopleListComponent } from './people-list/people-list.component';

  imports:      [ BrowserModule],
  declarations: [ AppComponent,PeopleListComponent ],  //<<===here
  providers:    [],      
  bootstrap:    [ AppComponent ]

You can remove directives:'' from @Component of AppComponent

Thursday, July 29, 2021
answered 5 Months ago

To set all FormGroup values use, setValue:

  formControlName1: myValue1, 
  formControlName2: myValue2

To set only some values, use patchValue:

  formControlName1: myValue1, 
  // formControlName2: myValue2 (can be omitted)

With this second technique, not all values need to be supplied and fields whos values were not set will not be affected.

Saturday, July 31, 2021
answered 5 Months ago

I think that you need the Accept header rather because of the 406 status code...

let authToken = localStorage.getItem('auth_token');
let headers = new Headers({ 'Accept': 'application/json' });
headers.append('Authorization', `Bearer ${authToken}`);

let options = new RequestOptions({ headers: headers });
return this._http
  .map(res => console.log(res));

This allows you to tell the server which content type you expect in the response...

The Content-Type header is rather to specify the type of the content you sent in the request. In your case, there is no content...

Sunday, September 19, 2021
answered 3 Months ago

Instead of just passing the function reference use arrow functions to retain this

.map((res) => this.extractData(res))
Tuesday, November 2, 2021
answered 1 Month ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :