En-têtes angulaires pour chaque demande

j'ai besoin de définir quelques en-têtes D'autorisation après que l'utilisateur s'est connecté, pour chaque requête ultérieure.


pour régler les en-têtes pour une requête 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 requête pour chaque demande de cette façon.

comment définir les en-têtes Une fois que l'utilisateur s'est connecté, et aussi enlever ces en-têtes sur la déconnexion?

249
demandé sur RobC 2015-12-25 18:33:04

18 réponses

pour répondre, vous questionnez que vous pourriez fournir un service qui enveloppe L'objet original Http D'angle. 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'objet Http vous pourriez 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 des fournisseurs multiples pour la classe Http en fournissant votre propre classe en étendant la Http ... Voir ce lien: http://blog.thoughtram.io/angular2/2015/11/23/multi-providers-in-angular-2.html .

325
répondu Thierry Templier 2017-12-17 08:31:15

les intercepteurs HTTP sont maintenant disponible via le nouveau HttpClient de @angular/common/http , à partir de l'angle 4.3.X versions et au-delà .

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

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

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 requête doit être clonée avant de fixer quelque chose de nouveau sur elle.

comme éditer des en-têtes est une tâche très courante, il y a en fait un raccourci pour cela (tout en clonant la requête):

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

après avoir créé l'intercepteur, vous devez l'enregistrer en utilisant le HTTP_INTERCEPTORS fournir.

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

@NgModule({
  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: AddHeaderInterceptor,
    multi: true,
  }],
})
export class AppModule {}
82
répondu Edmundo Rodrigues 2018-03-28 20:54:21

Extension BaseRequestOptions pourrait être d'une grande aide dans ce scénario. Vérifiez 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.

mise à jour:

pour pouvoir changer 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 y a Aussi 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 entièrement valide dans le contexte dactylographié. _defaultHeaders est protégé et ne doit pas être utilisé comme cela. Je recommande la solution ci-dessus pour une correction rapide mais pour un long terme il est préférable d'écrire votre propre wrapper autour des appels http qui gère également 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 vont pour cette solution mais je conseille le contraire. L'en-tête d'ajout globalement enverra le token auth à chaque appel d'api sortant de votre application. Ainsi, les appels api allant à des plugins tiers comme intercom ou zendesk ou toute autre api portera également votre autorisation tête. Il pourrait en résulter un gros problème de sécurité. Ainsi, utilisez interceptor globalement, mais vérifiez manuellement si l'appel sortant est vers le point final de l'api de votre serveur ou non, puis attachez l'en-tête auth.

76
répondu anit 2018-07-05 10:16:14

bien que je réponde très tard mais ça pourrait aider quelqu'un d'autre. Pour injecter des en-têtes à toutes les requêtes quand @NgModule est utilisé, on peut faire ce qui suit:

(j'ai testé ceci en angle 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 @NgModule faire ce qui 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]
})
24
répondu Shashank Agrawal 2016-10-05 05:38:48

Dans Angular 2.1.2 j'ai abordé ce problème en élargissant l'angle de Http:

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 plus besoin de déclarer toutes les méthodes Http et je peux utiliser http comme d'habitude dans toute mon application.

15
répondu jonnie 2016-12-01 14:20:34

crée une classe Http personnalisée en étendant le 2 Http Provider et remplace simplement la méthode constructor et request dans votre classe Http personnalisée. L'exemple ci-dessous ajoute un en-tête Authorization dans chaque requête 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);
    };
  }
}

puis configurer votre main app.module.ts pour fournir le XHRBackend comme le ConnectionBackend fournisseur 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 ça, vous pouvez maintenant utiliser votre http personnalisé fournisseur de 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 /

12
répondu Adones Pitogo 2016-11-07 03:04:05

Mieux vaut tard que jamais... = )

vous pouvez prendre le concept de prolongée BaseRequestOptions (d'ici https://angular.io/docs/ts/latest/guide/server-communication.html#!#override-default-request-options ) et rafraîchir les en-têtes "à la volée" (pas seulement dans le constructeur). Vous pouvez utiliser getter/setter "headers" propriété override 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 };
8
répondu Александр Ильинский 2017-05-15 13:41:48

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 delete et put si 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 le get / post /... méthode.

notez que dans mon cas j'utilise des cookies pour l'authentification. J'avais besoin d' l'en-tête pour i18n (l'en-tête Accept-Language ) car de nombreuses valeurs retourné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.

6
répondu Pierre Henry 2016-11-01 15:37:09

Que Diriez-vous de garder un Service séparé 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 si vous appelez cela d'un autre endroit utilisez this.httpClientService.addHeader("Authorization", "Bearer " + this.tok);

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

enter image description here

5
répondu Kalanamith 2016-10-07 05:03:04

Après quelques recherches, j'ai trouvé la finale et le plus simple est d'étendre BaseRequestOptions que je préfère.

Ce qui suit sont les façons dont j'ai essayé et abandonner pour une raison quelconque:

1. prolonger BaseRequestOptions , et ajouter des en-têtes dynamiques dans constructor() . Il ne peut pas fonctionner si je me connecte. Il sera créé une fois. Donc, il n'est pas dynamique.

2. prolonger Http . Même raison que ci-dessus, je ne peux pas ajouter des en-têtes dynamiques constructor() . Et si je réécris la méthode request(..) , et fixe 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 BaseRequestOptions et de remplacer 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 fonction merge() sera appelée pour chaque requête.

5
répondu Mavlarn 2017-04-05 07:15:37

bien que je réponde très tard mais si quelqu'un cherche une solution plus facile.

nous pouvons utiliser angular2-jwt. angular2-jwt est utile pour attacher automatiquement un JSON Web Token (JWT) comme en-tête D'autorisation lors de requêtes HTTP à partir d'une application Angular 2.

nous pouvons définir des en-têtes globaux avec l'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 envoi par token de requête 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')
    );
}
5
répondu KNimhan 2017-04-14 07:37:33

C'est ce que j'ai fait pour définir token avec chaque requête.

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 s'inscrire en app.module.ts

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule
    ],
    providers: [
        { provide: RequestOptions, useClass: CustomRequestOptions }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }
5
répondu Rajkeshwar Prasad 2017-10-11 09:14:45

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

cependant, si vous êtes jusqu'à l'extension de la classe Http . Assurez-vous de lire ce à travers!

certaines réponses ici montrent en fait une surcharge incorrecte de la méthode request() , ce qui pourrait conduire à des erreurs difficiles à attraper et un comportement étrange. Je suis tombé sur moi-même.

Cette solution est basé sur request() mise en œuvre de la méthode en angle 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 méthode request() a deux signatures d'appel différentes. Lorsque l'objet Request est passé à la place de L'URL string , l'argument options est ignoré par Anguleux. Les deux cas doivent donc être traités correctement.

et voici l'exemple de la façon d'enregistrer cette classe dépassée avec 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 classe Http normalement, mais votre classe dépassée sera magiquement injecté à la place. Cela vous permet d'intégrer votre solution facilement sans modifier les autres parties de l'application (polymorphisme).

il suffit d'ajouter httpProvider à la propriété providers de vos métadonnées de module.

4
répondu Slava Fomin II 2017-06-14 18:57:08

pour les angulaires 5 et plus, nous pouvons utiliser HttpInterceptor pour généraliser les opérations de requête 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 D'interrogation

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 {
}
1
répondu Prachi 2018-07-12 09:29:56

il y a eu quelques changements pour l'angle 2.0.1 et plus:

    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 { }
0
répondu Carlos Casallas 2017-02-06 17:25:45

j'ai la possibilité de choisir une solution plus simple > ajouter de nouveaux en-têtes aux options par défaut fusionner ou charger par votre fonction api get (ou autre).

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 générée par ionique.ts @Injectable() à l'exportation de la classe API {}

c'est très rapide et ça marche pour moi. Je ne voulais pas de format JSON/ld.

0
répondu Paul Leclerc 2017-07-18 19:14:07

le plus simple de tous

créer un config.ts fichier

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

puis sur votre service , il suffit d'importer le config.ts fichier

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.

0
répondu Joshua Fabillar 2018-09-12 05:04:42

vous pouvez utiliser canActive dans 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

-4
répondu A T 2016-10-25 16:02:57