Angular – Set headers for every request

by

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';

@Injectable()
export class HttpClient {

  constructor(private http: Http) {}

  createAuthorizationHeader(headers: Headers) {
    headers.append('Authorization', 'Basic ' +
      btoa('username:password')); 
  }

  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 (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.

More Related Contents:

  1. Angular HTTP GET with TypeScript error http.get(…).map is not a function in [null]
  2. How to detect a route change in Angular?
  3. Avoiding nesting subscriptions in Angular 2+?
  4. How to determine previous page URL in Angular?
  5. Angular 2 external inputs
  6. Read response headers from API response – Angular 5 + TypeScript
  7. Load external CSS into component
  8. Repeat HTML element multiple times using ngFor based on a number
  9. How to dynamically add a directive?
  10. Default and specific request timeout
  11. Router Navigate does not call ngOnInit when same page
  12. Set focus on element
  13. Connect method DataSource is not emitting all paginated rows for MatTable
  14. Getting instance of service without constructor injection
  15. Angular2: Insert a dynamic component as child of a container in the DOM
  16. Angular2: How is ngfor expanded
  17. Angular 2: Iterate over reactive form controls
  18. Can’t reload/refresh active route
  19. Angular – What is the meanings of module.id in component?
  20. Error trying to diff ‘[object Object]’ in Angular
  21. Error: supportsScrollBehavior is not declared configurable
  22. Differences between value and ngValue in Angular 5
  23. Reactive Forms: How to add new FormGroup or FormArray into an existing FormGroup at a later point in time in Angular till v14
  24. Angular: selected on option of select doesn’t work as excepted while using along with ngModel
  25. NX MFE angular module federation not able to access remote micro front end
  26. @HostBinding and @HostListener: what do they do and what are they for?
  27. @angular/material/index.d.ts’ is not a module
  28. What is pipe for in RxJS?
  29. How to use reportProgress in HttpClient in Angular? [duplicate]
  30. How to generate components in a specific folder with Angular CLI?

Leave a Comment