Angulaire - Définir des en-têtes pour chaque demande

Je dois définir des en-têtes d'autorisation après la connexion de l'utilisateur, pour chaque demande ultérieure.

Pour définir des en-têtes pour une demande particulière,

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

Référence

Mais il ne serait pas possible de définir manuellement les en-têtes de demande pour chaque demande de cette manière.

Comment définir les en-têtes définis une fois que l'utilisateur s'est connecté et supprimer également ces en-têtes à la déconnexion?

Pour répondre, vous vous demandez si vous pourriez fournir un service qui enveloppe l' Httpobjet d' origine d'Angular. Quelque chose comme décrit ci-dessous.

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

Et au lieu d'injecter l' Httpobjet, vous pouvez injecter celui-ci ( 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 );
    });
  }
}

Je pense aussi que quelque chose pourrait être fait en utilisant plusieurs fournisseurs pour la Httpclasse en fournissant votre propre classe en étendant celle- Httpci ... Voir ce lien: http://blog.oughttram.io/angular2/2015/11/23/multi-providers -en-angulaire-2.html .

Les intercepteurs HTTP sont désormais disponibles via le nouveau HttpClientdepuis @angular/common/http, à partir des versions Angular 4.3.x et au-delà .

Il est assez simple d'ajouter un en-tête pour chaque demande maintenant:

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

Il y a un principe d'immuabilité , c'est la raison pour laquelle la demande doit être clonée avant de mettre quelque chose de nouveau dessus.

Comme l'édition des en-têtes est une tâche très courante, il existe en fait un raccourci pour cela (lors du clonage de la demande):

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

Après avoir créé l'intercepteur, vous devez l'enregistrer à l'aide de la HTTP_INTERCEPTORSfourniture.

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

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

L'extension BaseRequestOptionspeut être très utile dans ce scénario. Découvrez le code suivant:

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

Cela devrait inclure «My-Custom-Header» dans chaque appel.

Mettre à jour:

Pour pouvoir modifier l'en-tête à tout moment au lieu du code ci-dessus, vous pouvez également utiliser le code suivant pour ajouter un nouvel en-tête:

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

pour supprimer vous pouvez faire

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

Il existe également une autre fonction que vous pouvez utiliser pour définir la valeur:

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

La solution ci-dessus n'est toujours pas complètement valide dans un contexte dactylographié. _defaultHeaders est protégé et n'est pas censé être utilisé comme ça. Je recommanderais la solution ci-dessus pour une solution rapide, mais pour longtemps, il vaut mieux écrire votre propre wrapper autour des appels http qui gère également l'auth. Prenez l'exemple suivant de auth0 qui est meilleur et propre.

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

Mise à jour - juin 2018 Je vois beaucoup de gens opter pour cette solution mais je conseillerais le contraire. L'ajout d'en-tête au niveau mondial enverra un jeton d'authentification à chaque appel d'API sortant de votre application. Ainsi, les appels api allant à des plugins tiers comme intercom ou zendesk ou tout autre api porteront également votre en-tête d'autorisation. Cela pourrait entraîner un gros défaut de sécurité. Donc, à la place, utilisez l'intercepteur globalement mais vérifiez manuellement si l'appel sortant est vers le point de terminaison api de votre serveur ou non, puis attachez l'en-tête d'authentification.

Même si je réponds très tard, cela pourrait aider quelqu'un d'autre. Pour injecter des en-têtes à toutes les requêtes quand il @NgModuleest utilisé, on peut faire ce qui suit:

(J'ai testé cela dans 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');
    }
}

Maintenant, @NgModuleprocédez comme suit:

@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]
})

Dans Angular 2.1.2j'ai approché cela en étendant le Http angulaire:

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

puis dans mes fournisseurs d'applications, j'ai pu utiliser une usine personnalisée pour fournir «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(){

  }
}

maintenant, je n'ai pas besoin de déclarer chaque méthode Http et httpje peux l'utiliser normalement dans toute mon application.

Créez une classe Http personnalisée en étendant le Httpfournisseur Angular 2 et remplacez simplement la méthode constructoret requestdans votre classe Http personnalisée. L'exemple ci-dessous ajoute un en- Authorizationtête dans chaque demande 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);
    };
  }
}

Configurez ensuite votre main app.module.tspour fournir le XHRBackendcomme ConnectionBackendfournisseur et le RequestOptionsà votre classe Http personnalisée:

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

Après cela, vous pouvez maintenant utiliser votre fournisseur http personnalisé dans vos services. Par exemple:

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

Voici un guide complet - http://adonespitogo.com/articles/angular-2-extending-http-provider/

Pour Angular 5 et supérieur, nous pouvons utiliser HttpInterceptor pour généraliser les opérations de demande et de réponse. Cela nous aide à éviter la duplication:

1) En-têtes communs

2) Spécification du type de réponse

3) Requête de requête

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

Nous pouvons utiliser cette classe AuthHttpInterceptor comme fournisseur pour les 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 {
}

Mieux vaut tard que jamais ... =)

Vous pouvez prendre le concept d'extension BaseRequestOptions(à partir d'ici https://angular.io/docs/ts/latest/guide/server-communication.html#!#override-default-request-options ) et actualiser les en-têtes "à la volée" "(pas seulement dans le constructeur). Vous pouvez utiliser le remplacement de la propriété geters / setter "headers" comme ceci:

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

C'est ainsi que je l'ai fait pour définir un jeton à chaque demande.

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

Et inscrivez-vous dans app.module.ts

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

Voici une version améliorée de la réponse acceptée, mise à jour pour 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());
    }
}

Bien sûr, il devrait être étendu pour des méthodes comme deleteet putsi nécessaire (je n'en ai pas encore besoin à ce stade de mon projet).

L'avantage est qu'il y a moins de code dupliqué dans les méthodes get/ post/ ....

Notez que dans mon cas, j'utilise des cookies pour l'authentification. J'avais besoin de l'en-tête pour i18n (l'en- Accept-Languagetête) car de nombreuses valeurs renvoyées par notre API sont traduites dans la langue de l'utilisateur. Dans mon application, le service i18n contient la langue actuellement sélectionnée par l'utilisateur.

Que diriez-vous de conserver un service distinct comme suit

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

et lorsque vous appelez cela depuis un autre endroit, utilisez this.httpClientService.addHeader("Authorization", "Bearer " + this.tok);

et vous verrez l'en-tête ajouté, par exemple: - Autorisation comme suit

Après quelques recherches, j'ai trouvé la finale et le moyen le plus simple est de prolonger BaseRequestOptionsce que je préfère.
Voici les façons dont j'ai essayé d'abandonner pour une raison quelconque:
1. étendre BaseRequestOptionset ajouter des en-têtes dynamiques constructor(). Cela ne peut pas fonctionner si je me connecte. Il sera créé une fois. Ce n'est donc pas dynamique.
2. étendre Http. Même raison que ci-dessus, je ne peux pas ajouter d'en-têtes dynamiques constructor(). Et si je réécris la request(..)méthode et que je définis des en-têtes, comme ceci:

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

Vous avez juste besoin d'écraser cette méthode, mais pas toutes les méthodes get / post / put.

3.Et ma solution préférée est d'étendre BaseRequestOptionset d'écraser 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;
 }
}

cette merge()fonction sera appelée pour chaque demande.

Bien que je réponde très tard, mais si quelqu'un cherche une solution plus simple.

Nous pouvons utiliser angular2-jwt. angular2-jwt est utile pour attacher automatiquement un jeton Web JSON (JWT) en tant qu'en-tête d'autorisation lors des requêtes HTTP à partir d'une application Angular 2.

Nous pouvons définir des en-têtes globaux avec une option de configuration avancée

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

Et l'envoi par jeton de demande comme

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

J'aime l'idée de remplacer les options par défaut, cela semble être une bonne solution.

Cependant, si vous souhaitez étendre la Http classe. Assurez-vous de lire attentivement!

Certaines réponses ici montrent en fait une surcharge incorrecte de request() méthode, ce qui pourrait entraîner des erreurs difficiles à détecter et un comportement étrange. Je suis tombé dessus moi-même.

Cette solution est basée sur l' request()implémentation d'une méthode dans Angular 4.2.x, mais devrait être compatible avec l'avenir:

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;

  }

}

Notez que j'importe la classe d'origine de cette façon import { Http as NgHttp } from '@angular/http';afin d'éviter les conflits de noms.

Le problème abordé ici est que la request()méthode a deux signatures d'appel différentes. Lorsque l' Requestobjet est passé à la place de l'URL string, l' optionsargument est ignoré par Angular. Les deux cas doivent donc être traités correctement.

Et voici l'exemple de la façon d'enregistrer cette classe substituée avec le conteneur 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
  );
}

Avec une telle approche, vous pouvez injecter la Httpclasse normalement, mais votre classe surchargée sera injectée comme par magie. Cela vous permet d'intégrer facilement votre solution sans changer d'autres parties de l'application (polymorphisme en action).

Ajoutez simplement httpProviderà la providerspropriété de vos métadonnées de module.

Le plus simple de tous

Créer un config.tsfichier

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

Ensuite service, importez simplement le config.tsfichier

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

Je pense que c'était le plus simple et le plus sûr.

Il y a eu quelques changements pour angular 2.0.1 et supérieur:

    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 { }

J'ai pu choisir une solution plus simple> Ajouter un nouvel en-tête aux options par défaut fusionner ou charger par votre fonction get (ou autre) api.

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

Bien sûr, vous pouvez externaliser ces en-têtes dans les options par défaut ou quoi que ce soit dans votre classe. C'est dans l'API de classe d'exportation api.ts @Injectable () générée par Ionic {}

C'est très rapide et ça marche pour moi. Je ne voulais pas du format json / ld.

Vous pouvez utiliser canActivedans vos itinéraires, comme ceci:

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

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