navigationend - title angular 6

Angular: establezca encabezados para cada solicitud

Question

Necesito configurar algunos encabezados de autorización después de que el usuario haya iniciado sesión, para cada solicitud posterior.

Para configurar encabezados para una solicitud particular,

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

Reference

Pero no sería factible establecer manualmente encabezados de solicitud para cada solicitud de esta manera.

¿Cómo configuro los encabezados una vez que el usuario ha iniciado sesión y también elimino esos encabezados al cerrar sesión?

Answer 1

Hubo algunos cambios para angular 2.0.1 y superior:

    import {RequestOptions, RequestMethod, Headers} from ''@angular/http'';
    import { BrowserModule } from ''@angular/platform-browser'';
    import { HttpModule }     from ''@angular/http'';
    import { AppRoutingModule } from ''./app.routing.module'';   
    import { AppComponent }  from ''./app.component'';

    //you can move this class to a better place
    class GlobalHttpOptions extends RequestOptions {
        constructor() { 
          super({ 
            method: RequestMethod.Get,
            headers: new Headers({
              ''MyHeader'': ''MyHeaderValue'',
            })
          });
        }
      }

    @NgModule({

      imports:      [ BrowserModule, HttpModule, AppRoutingModule ],
      declarations: [ AppComponent],
      bootstrap:    [ AppComponent ],
      providers:    [ { provide: RequestOptions, useClass: GlobalHttpOptions} ]
    })

    export class AppModule { }

Answer 2

Puedes usar canActive en tus rutas, así:

import { Injectable } from ''@angular/core'';
import { Router } from ''@angular/router'';
import { CanActivate } from ''@angular/router'';
import { AuthService } from ''./auth.service'';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private auth: AuthService, private router: Router) {}

  canActivate() {
    // If user is not logged in we''ll send them to the homepage 
    if (!this.auth.loggedIn()) {
      this.router.navigate(['''']);
      return false;
    }
    return true;
  }

}

const appRoutes: Routes = [
  {
    path: '''', redirectTo: ''/deals'', pathMatch: ''full''
  },
  {
    path: ''special'',
    component: PrivateDealsComponent,
    /* We''ll use the canActivate API and pass in our AuthGuard.
       Now any time the /special route is hit, the AuthGuard will run
       first to make sure the user is logged in before activating and
       loading this route. */
    canActivate: [AuthGuard]
  }
];

Tomado de: https://auth0.com/blog/angular-2-authentication

Answer 3

Puedo elegir una solución más simple> Agregar nuevos encabezados a las opciones predeterminadas fusionar o cargar mediante su función api get (u otra).

get(endpoint: string, params?: any, options?: RequestOptions) {
  if (!options) {
    options = new RequestOptions();
    options.headers = new Headers( { "Accept": "application/json" } ); <<<<
  }
  // [...] 
}

Por supuesto, puede externalizar estos encabezados en las opciones predeterminadas o lo que sea en su clase. Esto está en la API de clase de exportación api.ts @Injectable () generada por Ionic {}

Es muy rápido y funciona para mí. No quería el formato json / ld.

Answer 4

¿Qué tal mantener un servicio separado como sigue?

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


            @Injectable()
            export class HttpClientService extends RequestOptions {

                constructor(private requestOptionArgs:RequestOptions) {
                    super();     
                }

                addHeader(headerName: string, headerValue: string ){
                    (this.requestOptionArgs.headers as Headers).set(headerName, headerValue);
                }
            }

y cuando llame desde otro lugar, use this.httpClientService.addHeader("Authorization", "Bearer " + this.tok);

y verá el encabezado agregado, por ejemplo: - Autorización de la siguiente manera

Answer 5

Ampliar BaseRequestOptions podría ser de gran ayuda en este escenario. Mira el siguiente código:

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

import {AppCmp} from ''./components/app/app'';


class MyRequestOptions extends BaseRequestOptions {
  constructor () {
    super();
    this.headers.append(''My-Custom-Header'',''MyCustomHeaderValue'');
  }
} 

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

Esto debería incluir ''Mi encabezado personalizado'' en cada llamada.

Actualizar:

Para poder cambiar el encabezado en cualquier momento que desee en lugar del código anterior, también puede usar el siguiente código para agregar un nuevo encabezado:

this.http._defaultOptions.headers.append(''Authorization'', ''token'');

para eliminar puedes hacer

this.http._defaultOptions.headers.delete(''Authorization'');

También hay otra función que puede usar para establecer el valor:

this.http._defaultOptions.headers.set(''Authorization'', ''token'');

La solución anterior aún no es completamente válida en el contexto mecanografiado. _defaultHeaders está protegido y no se debe usar de esta manera. Recomendaría la solución anterior para una solución rápida, pero a largo plazo es mejor escribir su propio contenedor alrededor de las llamadas http que también maneja la autenticación. Tome el siguiente ejemplo de auth0 que es mejor y limpio.

https://github.com/auth0/angular2-jwt/blob/master/angular2-jwt.ts

Actualización: junio de 2018 , veo que muchas personas optan por esta solución, pero recomendaría lo contrario. Al agregar un encabezado global, se enviará un token de autenticación a cada llamada de API que salga de su aplicación. Por lo tanto, las llamadas de la API que se dirigen a complementos de terceros como intercom o zendesk o cualquier otra API también llevarán su encabezado de autorización. Esto podría resultar en una gran falla de seguridad. Por lo tanto, use el interceptor globalmente, pero verifique manualmente si la llamada saliente se dirige hacia el punto final de la API de su servidor o no y luego adjunte el encabezado de autenticación.

Answer 6

Aquí hay una versión mejorada de la respuesta aceptada, actualizada para Angular2 final:

import {Injectable} from "@angular/core";
import {Http, Headers, Response, Request, BaseRequestOptions, RequestMethod} from "@angular/http";
import {I18nService} from "../lang-picker/i18n.service";
import {Observable} from "rxjs";
@Injectable()
export class HttpClient {

    constructor(private http: Http, private i18n: I18nService ) {}

    get(url:string):Observable<Response> {
        return this.request(url, RequestMethod.Get);
    }

    post(url:string, body:any) {   
        return this.request(url, RequestMethod.Post, body);
    }

    private request(url:string, method:RequestMethod, body?:any):Observable<Response>{

        let headers = new Headers();
        this.createAcceptLanguageHeader(headers);

        let options = new BaseRequestOptions();
        options.headers = headers;
        options.url = url;
        options.method = method;
        options.body = body;
        options.withCredentials = true;

        let request = new Request(options);

        return this.http.request(request);
    }

    // set the accept-language header using the value from i18n service that holds the language currently selected by the user
    private createAcceptLanguageHeader(headers:Headers) {

        headers.append(''Accept-Language'', this.i18n.getCurrentLang());
    }
}

Por supuesto, debe extenderse para métodos como delete y put si es necesario (todavía no los necesito en este momento en mi proyecto).

La ventaja es que hay menos código duplicado en los métodos get / post / ...

Tenga en cuenta que en mi caso uso cookies para la autenticación. Necesitaba el encabezado para i18n (el encabezado Accept-Language ) porque muchos valores devueltos por nuestra API se traducen al idioma del usuario. En mi aplicación, el servicio i18n contiene el idioma seleccionado actualmente por el usuario.

Answer 7

Así es como lo hice para configurar el token con cada solicitud.

import { RequestOptions, BaseRequestOptions, RequestOptionsArgs } from ''@angular/http'';

export class CustomRequestOptions extends BaseRequestOptions {

    constructor() {
        super();
        this.headers.set(''Content-Type'', ''application/json'');
    }
    merge(options?: RequestOptionsArgs): RequestOptions {
        const token = localStorage.getItem(''token'');
        const newOptions = super.merge(options);
        if (token) {
            newOptions.headers.set(''Authorization'', `Bearer ${token}`);
        }

        return newOptions;
    }
}

Y regístrese en app.module.ts

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule
    ],
    providers: [
        { provide: RequestOptions, useClass: CustomRequestOptions }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Answer 8

Aunque estoy respondiendo esto muy tarde, pero si alguien está buscando una solución más fácil.

Podemos usar angular2-jwt. angular2-jwt es útil para adjuntar automáticamente un token web JSON (JWT) como encabezado de autorización cuando se realizan solicitudes HTTP desde una aplicación Angular 2.

Podemos establecer encabezados globales con la opción de configuración avanzada

export function authHttpServiceFactory(http: Http, options: RequestOptions) {
  return new AuthHttp(new AuthConfig({
    tokenName: ''token'',
        tokenGetter: (() => sessionStorage.getItem(''token'')),
        globalHeaders: [{''Content-Type'':''application/json''}],
    }), http, options);
}

Y enviando por solicitud token como

    getThing() {
  let myHeader = new Headers();
  myHeader.append(''Content-Type'', ''application/json'');

  this.authHttp.get(''http://example.com/api/thing'', { headers: myHeader })
    .subscribe(
      data => this.thing = data,
      err => console.log(error),
      () => console.log(''Request Complete'')
    );

  // Pass it after the body in a POST request
  this.authHttp.post(''http://example.com/api/thing'', ''post body'', { headers: myHeader })
    .subscribe(
      data => this.thing = data,
      err => console.log(error),
      () => console.log(''Request Complete'')
    );
}

Answer 9

Aunque estoy respondiendo muy tarde, podría ayudar a alguien más. Para inyectar encabezados a todas las solicitudes cuando se utiliza @NgModule , se puede hacer lo siguiente:

(Probé esto en Angular 2.0.1)

/**
 * Extending BaseRequestOptions to inject common headers to all requests.
 */
class CustomRequestOptions extends BaseRequestOptions {
    constructor() {
        super();
        this.headers.append(''Authorization'', ''my-token'');
        this.headers.append(''foo'', ''bar'');
    }
}

Ahora en @NgModule haga lo siguiente:

@NgModule({
    declarations: [FooComponent],
    imports     : [

        // Angular modules
        BrowserModule,
        HttpModule,         // This is required

        /* other modules */
    ],
    providers   : [
        {provide: LocationStrategy, useClass: HashLocationStrategy},
        // This is the main part. We are telling Angular to provide an instance of
        // CustomRequestOptions whenever someone injects RequestOptions
        {provide: RequestOptions, useClass: CustomRequestOptions}
    ],
    bootstrap   : [AppComponent]
})

Answer 10

Cree una clase Http personalizada extendiendo Angular 2 Http Provider y simplemente anule el constructor y el método de request en su clase Http personalizada. El siguiente ejemplo agrega el encabezado de Authorization en cada solicitud http.

import {Injectable} from ''@angular/core'';
import {Http, XHRBackend, RequestOptions, Request, RequestOptionsArgs, Response, Headers} from ''@angular/http'';
import {Observable} from ''rxjs/Observable'';
import ''rxjs/add/operator/map'';
import ''rxjs/add/operator/catch'';

@Injectable()
export class HttpService extends Http {

  constructor (backend: XHRBackend, options: RequestOptions) {
    let token = localStorage.getItem(''auth_token''); // your custom token getter function here
    options.headers.set(''Authorization'', `Bearer ${token}`);
    super(backend, options);
  }

  request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
    let token = localStorage.getItem(''auth_token'');
    if (typeof url === ''string'') { // meaning we have to add the token to the options, not in url
      if (!options) {
        // let''s make option object
        options = {headers: new Headers()};
      }
      options.headers.set(''Authorization'', `Bearer ${token}`);
    } else {
    // we have to add the token to the url object
      url.headers.set(''Authorization'', `Bearer ${token}`);
    }
    return super.request(url, options).catch(this.catchAuthError(this));
  }

  private catchAuthError (self: HttpService) {
    // we have to pass HttpService''s own instance here as `self`
    return (res: Response) => {
      console.log(res);
      if (res.status === 401 || res.status === 403) {
        // if not authenticated
        console.log(res);
      }
      return Observable.throw(res);
    };
  }
}

Luego configure su app.module.ts principal para proporcionar XHRBackend como el proveedor de ConnectionBackend y RequestOptions a su clase Http personalizada:

import { HttpModule, RequestOptions, XHRBackend } from ''@angular/http'';
import { HttpService } from ''./services/http.service'';
...
@NgModule({
  imports: [..],
  providers: [
    {
      provide: HttpService,
      useFactory: (backend: XHRBackend, options: RequestOptions) => {
        return new HttpService(backend, options);
      },
      deps: [XHRBackend, RequestOptions]
    }
  ],
  bootstrap: [ AppComponent ]
})

Después de eso, ahora puede usar su proveedor http personalizado en sus servicios. Por ejemplo:

import { Injectable }     from ''@angular/core'';
import {HttpService} from ''./http.service'';

@Injectable()
class UserService {
  constructor (private http: HttpService) {}

  // token will added automatically to get request header
  getUser (id: number) {
    return this.http.get(`/users/${id}`).map((res) => {
      return res.json();
    } );
  }
}

Aquí hay una guía completa: http://adonespitogo.com/articles/angular-2-extending-http-provider/

Answer 11

Después de un poco de investigación, encontré la forma final y más fácil es extender BaseRequestOptions que prefiero.
Las siguientes son las formas en que intenté y renuncié por alguna razón:
1. extienda BaseRequestOptions y agregue encabezados dinámicos en constructor() . No puede funcionar si inicio sesión. Se creará una vez. Entonces no es dinámico.
2. extender Http . La misma razón que la anterior, no puedo agregar encabezados dinámicos en constructor() . Y si reescribo el método request(..) y establezco encabezados, así:

request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
 let token = localStorage.getItem(AppConstants.tokenName);
 if (typeof url === ''string'') { // meaning we have to add the token to the options, not in url
  if (!options) {
    options = new RequestOptions({});
  }
  options.headers.set(''Authorization'', ''token_value'');
 } else {
  url.headers.set(''Authorization'', ''token_value'');
 }
 return super.request(url, options).catch(this.catchAuthError(this));
}

Solo necesita sobrescribir este método, pero no todos los métodos get / post / put.

3.Y mi solución preferida es extender BaseRequestOptions y sobrescribir merge() :

@Injectable()
export class AuthRequestOptions extends BaseRequestOptions {

 merge(options?: RequestOptionsArgs): RequestOptions {
  var newOptions = super.merge(options);
  let token = localStorage.getItem(AppConstants.tokenName);
  newOptions.headers.set(AppConstants.authHeaderName, token);
  return newOptions;
 }
}

Se llamará a esta función merge() para cada solicitud.

Answer 12

El mas simple de todos

Crear un archivo config.ts

import { HttpHeaders } from ''@angular/common/http'';

export class Config {
    url: string = ''http://localhost:3000'';
    httpOptions: any = {
        headers: new HttpHeaders({
           ''Content-Type'': ''application/json'',
           ''Authorization'': JSON.parse(localStorage.getItem(''currentUser'')).token
        })
    }
}

Luego, en su service , solo importe el archivo config.ts

import { Config } from ''../config'';
import { HttpClient } from ''@angular/common/http'';

@Injectable()
export class OrganizationService {
  config = new Config;

  constructor(
    private http: HttpClient
  ) { }

  addData(data): Observable<any> {
     let sendAddLink = `${this.config.url}/api/addData`;

     return this.http.post(sendAddLink , data, this.config.httpOptions).pipe(
       tap(snap => {
      return snap;
        })
    );
 } 

Creo que fue el más simple y el más seguro.

Answer 13

En Angular 2.1.2 me acerqué a esto extendiendo el Http angular:

import {Injectable} from "@angular/core";
import {Http, Headers, RequestOptionsArgs, Request, Response, ConnectionBackend, RequestOptions} from "@angular/http";
import {Observable} from ''rxjs/Observable'';

@Injectable()
export class HttpClient extends Http {

  constructor(protected _backend: ConnectionBackend, protected _defaultOptions: RequestOptions) {

    super(_backend, _defaultOptions);
  }

  _setCustomHeaders(options?: RequestOptionsArgs):RequestOptionsArgs{
    if(!options) {
      options = new RequestOptions({});
    }
    if(localStorage.getItem("id_token")) {

      if (!options.headers) {

        options.headers = new Headers();


      }
      options.headers.set("Authorization", localStorage.getItem("id_token"))
    }
    return options;
  }


  request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
    options = this._setCustomHeaders(options);
    return super.request(url, options)
  }
}

luego en mis proveedores de aplicaciones pude usar una fábrica personalizada para proporcionar ''Http''

import { RequestOptions, Http, XHRBackend} from ''@angular/http'';
import {HttpClient} from ''./httpClient'';
import { RequestOptions, Http, XHRBackend} from ''@angular/http'';
import {HttpClient} from ''./httpClient'';//above snippet

function httpClientFactory(xhrBackend: XHRBackend, requestOptions: RequestOptions): Http {
  return new HttpClient(xhrBackend, requestOptions);
}

@NgModule({
  imports:[
    FormsModule,
    BrowserModule,
  ],
  declarations: APP_DECLARATIONS,
  bootstrap:[AppComponent],
  providers:[
     { provide: Http, useFactory: httpClientFactory, deps: [XHRBackend, RequestOptions]}
  ],
})
export class AppModule {
  constructor(){

  }
}

ahora no necesito declarar todos los métodos Http y puedo usar http como normal en toda mi aplicación.

Answer 14

Los interceptores HTTP ahora están disponibles a través del nuevo HttpClient desde @angular/common/http , a partir de las versiones Angular 4.3.x y posteriores .

Es bastante simple agregar un encabezado para cada solicitud ahora:

import {
  HttpEvent,
  HttpInterceptor,
  HttpHandler,
  HttpRequest,
} from ''@angular/common/http'';
import { Observable } from ''rxjs'';

export class AddHeaderInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // Clone the request to add the new header
    const clonedRequest = req.clone({ headers: req.headers.set(''Authorization'', ''Bearer 123'') });

    // Pass the cloned request instead of the original request to the next handle
    return next.handle(clonedRequest);
  }
}

Hay un principio de inmutabilidad , esa es la razón por la que la solicitud debe clonarse antes de configurar algo nuevo en ella.

Como editar encabezados es una tarea muy común, en realidad hay un atajo para ello (al clonar la solicitud):

const clonedRequest = req.clone({ setHeaders: { Authorization: ''Bearer 123'' } });

Después de crear el interceptor, debe registrarlo utilizando el HTTP_INTERCEPTORS proporcionar.

import { HTTP_INTERCEPTORS } from ''@angular/common/http'';

@NgModule({
  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: AddHeaderInterceptor,
    multi: true,
  }],
})
export class AppModule {}

Answer 15

Más vale tarde que nunca ... =)

Puede tomar el concepto de BaseRequestOptions extendida (desde aquí https://angular.io/docs/ts/latest/guide/server-communication.html#!#override-default-request-options ) y actualizar los encabezados "en el volar "(no solo en constructor). Puede usar la anulación de la propiedad "encabezados" getter / setter de esta manera:

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

@Injectable()
export class DefaultRequestOptions extends BaseRequestOptions {

    private superHeaders: Headers;

    get headers() {
        // Set the default ''Content-Type'' header
        this.superHeaders.set(''Content-Type'', ''application/json'');

        const token = localStorage.getItem(''authToken'');
        if(token) {
            this.superHeaders.set(''Authorization'', `Bearer ${token}`);
        } else {
            this.superHeaders.delete(''Authorization'');
        }
        return this.superHeaders;
    }

    set headers(headers: Headers) {
        this.superHeaders = headers;
    }

    constructor() {
        super();
    }
}

export const requestOptionsProvider = { provide: RequestOptions, useClass: DefaultRequestOptions };

Answer 16

Me gusta la idea de anular las opciones predeterminadas, esto parece una buena solución.

Sin embargo, si está dispuesto a extender la clase Http . ¡Asegúrate de leer esto!

Algunas respuestas aquí en realidad muestran una sobrecarga incorrecta del método request() , lo que podría conducir a errores difíciles de detectar y un comportamiento extraño. Me he topado con esto yo mismo.

Esta solución se basa en la implementación del método request() en Angular 4.2.x , pero debe ser compatible con el futuro:

import {Observable} from ''rxjs/Observable'';
import {Injectable} from ''@angular/core'';

import {
  ConnectionBackend, Headers,
  Http as NgHttp,
  Request,
  RequestOptions,
  RequestOptionsArgs,
  Response,
  XHRBackend
} from ''@angular/http'';


import {AuthenticationStateService} from ''../authentication/authentication-state.service'';


@Injectable()
export class Http extends NgHttp {

  constructor (
    backend: ConnectionBackend,
    defaultOptions: RequestOptions,
    private authenticationStateService: AuthenticationStateService
  ) {
    super(backend, defaultOptions);
  }


  request (url: string | Request, options?: RequestOptionsArgs): Observable<Response> {

    if (''string'' === typeof url) {

      url = this.rewriteUrl(url);
      options = (options || new RequestOptions());
      options.headers = this.updateHeaders(options.headers);

      return super.request(url, options);

    } else if (url instanceof Request) {

      const request = url;
      request.url = this.rewriteUrl(request.url);
      request.headers = this.updateHeaders(request.headers);

      return super.request(request);

    } else {
      throw new Error(''First argument must be a url string or Request instance'');
    }

  }


  private rewriteUrl (url: string) {
    return environment.backendBaseUrl + url;
  }

  private updateHeaders (headers?: Headers) {

    headers = headers || new Headers();

    // Authenticating the request.
    if (this.authenticationStateService.isAuthenticated() && !headers.has(''Authorization'')) {
      headers.append(''Authorization'', ''Bearer '' + this.authenticationStateService.getToken());
    }

    return headers;

  }

}

Tenga en cuenta que estoy importando la clase original de esta manera import { Http as NgHttp } from ''@angular/http''; para evitar conflictos de nombres.

El problema abordado aquí es que el método request() tiene dos firmas de llamada diferentes. Cuando se pasa el objeto Request lugar de la string URL, Angular ignora el argumento de options . Entonces ambos casos deben ser manejados adecuadamente.

Y aquí está el ejemplo de cómo registrar esta clase anulada con el contenedor DI:

export const httpProvider = {
  provide: NgHttp,
  useFactory: httpFactory,
  deps: [XHRBackend, RequestOptions, AuthenticationStateService]
};


export function httpFactory (
  xhrBackend: XHRBackend,
  requestOptions: RequestOptions,
  authenticationStateService: AuthenticationStateService
): Http {
  return new Http(
    xhrBackend,
    requestOptions,
    authenticationStateService
  );
}

Con este enfoque, puede inyectar la clase Http normalmente, pero su clase anulada se inyectará mágicamente en su lugar. Esto le permite integrar su solución fácilmente sin cambiar otras partes de la aplicación (polimorfismo en acción).

Simplemente agregue httpProvider a la propiedad de providers de los metadatos de su módulo.

Answer 17

Para Angular 5 y superior, podemos usar HttpInterceptor para generalizar las operaciones de solicitud y respuesta. Esto nos ayuda a evitar duplicar:

1) encabezados comunes

2) Especificar el tipo de respuesta

3) Solicitud de consulta

import { Injectable } from ''@angular/core'';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpResponse,
  HttpErrorResponse
} from ''@angular/common/http'';
import { Observable } from ''rxjs/Observable'';
import ''rxjs/add/operator/do'';

@Injectable()
export class AuthHttpInterceptor implements HttpInterceptor {

  requestCounter: number = 0;
  constructor() {
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    request = request.clone({
      responseType: ''json'',
      setHeaders: {
        Authorization: `Bearer token_value`,
        ''Content-Type'': ''application/x-www-form-urlencoded; charset=UTF-8''
      }
    });

    return next.handle(request).do((event: HttpEvent<any>) => {
      if (event instanceof HttpResponse) {
        // do stuff with response if you want
      }
    }, (err: any) => {
      if (err instanceof HttpErrorResponse) {
        // do stuff with response error if you want
      }
    });
  }
}

Podemos usar esta clase AuthHttpInterceptor como proveedor de los HttpInterceptors:

import { BrowserModule } from ''@angular/platform-browser'';
import { NgModule } from ''@angular/core'';
import { AppComponent } from ''./app.component'';
import { AppRoutingModule } from ''./app.routing-module'';
import { AuthHttpInterceptor } from ''./services/auth-http.interceptor'';
import { HttpClientModule, HTTP_INTERCEPTORS } from ''@angular/common/http'';
import { BrowserAnimationsModule } from ''@angular/platform-browser/animations'';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthHttpInterceptor,
      multi: true
    }
  ],
  exports: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Answer 18

Para responder, pregunta si podría proporcionar un servicio que envuelva el objeto Http original de Angular. Algo como se describe a continuación.

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
    });
  }
}

Y en lugar de inyectar el objeto Http , podría inyectar este ( 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 );
    });
  }
}

También creo que se podría hacer algo usando múltiples proveedores para la clase Http proporcionando su propia clase extendiendo la Http ... Vea este enlace: http://blog.thoughtram.io/angular2/2015/11/23/multi-providers-in-angular-2.html .