webentwicklung-frage-antwort-db.com.de

Winkel - Setzt Header für jede Anfrage

Ich muss einige Autorisierungsheader festlegen, nachdem sich der Benutzer für jede nachfolgende Anforderung angemeldet hat.


Um Header für eine bestimmte Anfrage festzulegen, 

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

Referenz

Es ist jedoch nicht möglich, die Anforderungsheader auf diese Weise für jede Anforderung manuell festzulegen. 

Wie stelle ich die eingestellten Header ein, wenn sich der Benutzer angemeldet hat, und entferne diese Header auch beim Abmelden?

271
Avijit Gupta

Zur Beantwortung Ihrer Frage könnten Sie einen Dienst bereitstellen, der das ursprüngliche Http-Objekt von Angular umgibt. Etwas wie unten beschrieben.

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

Anstatt das Objekt Http zu injizieren, können Sie dieses (HttpClient) einfügen.

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

Ich denke auch, dass mit Multi Providern für die Http-Klasse etwas getan werden könnte, indem Sie Ihre eigene Klasse angeben, die die Http-Erweiterung erweitert ... Siehe diesen Link: http://blog.thoughtram.io/angular2/2015/11/23 /multi-providers-in-angular-2.html .

336

HTTP Interceptors sind jetzt verfügbar über das neue HttpClient ab @angular/common/http, ab Angular 4.3.x-Versionen und höher .

Es ist ziemlich einfach, jetzt einen Header für jede Anfrage hinzuzufügen:

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

Es gibt ein Prinzip der Unveränderlichkeit , das ist der Grund, warum die Anfrage geklont werden muss, bevor etwas Neues darauf gesetzt wird.

Da das Bearbeiten von Headern eine sehr häufige Aufgabe ist, gibt es tatsächlich eine Verknüpfung dafür (während die Anfrage geklont wird):

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

Nachdem Sie den Abfangjäger erstellt haben, sollten Sie ihn mit der Angabe HTTP_INTERCEPTORS Registrieren.

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

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

Das Erweitern von BaseRequestOptions kann in diesem Szenario eine große Hilfe sein. Überprüfen Sie den folgenden Code:

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

Dies sollte "My-Custom-Header" in jedem Anruf enthalten.

Update:

Um den Header jederzeit ändern zu können, anstelle des obigen Codes, können Sie auch folgenden Code verwenden, um einen neuen Header hinzuzufügen:

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

zu löschen kannst du tun

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

Es gibt auch eine andere Funktion, mit der Sie den Wert einstellen können:

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

Die obige Lösung ist im TypeScript-Kontext immer noch nicht vollständig gültig. _defaultHeaders ist geschützt und sollte nicht so verwendet werden. Ich würde die obige Lösung für eine schnelle Lösung empfehlen, aber auf lange Sicht ist es besser, einen eigenen Wrapper für http-Aufrufe zu schreiben, der auch auth behandelt. Nehmen Sie folgendes Beispiel aus auth0, das besser und sauberer ist.

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

Update - Juni 2018 Ich sehe viele Leute, die sich für diese Lösung entscheiden, aber ich würde anders raten. Wenn Sie den Header global anfügen, wird das Authentifizierungs-Token an every api-Aufruf gesendet, der von Ihrer App ausgeht. Die Aufrufe der API-Anzeigen an Drittanbieter-Plug-Ins wie Intercom, Zendesk oder eine beliebige andere API enthalten außerdem Ihren Berechtigungsheader. Dies kann zu einer großen Sicherheitslücke führen. Verwenden Sie also interceptor global, überprüfen Sie jedoch manuell, ob der abgehende Anruf auf den API-Endpunkt Ihres Servers gerichtet ist oder nicht, und fügen Sie dann den auth-Header an.

76
anit

Ich beantworte es zwar sehr spät, aber es könnte jemandem helfen. Um Header in alle Anforderungen einzufügen, wenn @NgModule verwendet wird, können Sie Folgendes tun:

(Ich habe dies in Angular 2.0.1 getestet)

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

Führen Sie nun in @NgModule Folgendes aus:

@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

In Angular 2.1.2 näherte ich mich dem Winkel 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)
  }
}

in meinen App Providers konnte ich dann eine benutzerdefinierte Factory verwenden, um "Http" bereitzustellen.

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

  }
}

jetzt muss ich nicht jede HTTP-Methode deklarieren und kann http wie gewohnt in meiner Anwendung verwenden.

15
jonnie

Erstellen Sie eine benutzerdefinierte Http-Klasse, indem Sie den Angular 2 Http-Provider erweitern, und überschreiben Sie einfach die constructor- und request-Methode in Ihrer benutzerdefinierten Http-Klasse. Im folgenden Beispiel wird in jeder http-Anforderung der Header Authorization hinzugefügt.

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

Konfigurieren Sie dann Ihren app.module.ts, um die XHRBackend als ConnectionBackend-Provider und die RequestOptions für Ihre benutzerdefinierte Http-Klasse bereitzustellen:

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

Danach können Sie jetzt Ihren benutzerdefinierten http-Anbieter in Ihren Diensten verwenden. Zum Beispiel:

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

Hier ist ein umfassender Leitfaden - http://adonespitogo.com/articles/angular-2-extending-http-provider/

12
Adones Pitogo

Besser spät als nie ... =)

Sie können das Konzept der erweiterten BaseRequestOptions (von hier https://angular.io/docs/ts/latest/guide/server-communication.html#!#override-default-request-options ) übernehmen und die Header "on the fly" (nicht nur im Konstruktor). Sie können die Getter/Setter-Eigenschaft "headers" wie folgt überschreiben:

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

Für Angular 5 und höher können wir HttpInterceptor verwenden, um die Anforderungs- und Antwortoperationen zu generalisieren. Dies hilft uns, Duplikate zu vermeiden:

1) Gemeinsame Überschriften 

2) Angabe des Antworttyps

3) Anfrage abfragen

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

Wir können diese AuthHttpInterceptor-Klasse als Provider für die HttpInterceptors verwenden:

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

Hier ist eine verbesserte Version der akzeptierten Antwort, die für Angular2 final aktualisiert wurde:

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

Natürlich sollte es für Methoden wie delete und put erweitert werden (falls ich sie an diesem Punkt in meinem Projekt noch nicht benötige).

Der Vorteil ist, dass die get/post/... -Methoden weniger duplizierten Code enthalten.

In meinem Fall verwende ich Cookies zur Authentifizierung. Ich brauchte den Header für i18n (den Accept-Language-Header), da viele von unserer API zurückgegebene Werte in die Benutzersprache übersetzt werden. In meiner App enthält der i18n-Dienst die aktuell vom Benutzer ausgewählte Sprache.

6
Pierre Henry

Nach einigen Nachforschungen fand ich die endgültige und einfachste Möglichkeit, BaseRequestOptions zu erweitern, was mir lieber ist.
.__ Die folgenden Möglichkeiten habe ich aus irgendeinem Grund aufgegeben:
1. erweitern Sie BaseRequestOptions und fügen Sie dynamische Header in constructor() hinzu. Es kann nicht funktionieren, wenn ich mich einloggen. Es wird einmal erstellt. Es ist also nicht dynamisch.
2. Http erweitern. Gleicher Grund wie oben, ich kann keine dynamischen Header in constructor() hinzufügen. Und wenn ich die request(..)-Methode umschreibe und Kopfzeilen wie folgt setze:

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

Sie müssen nur diese Methode überschreiben, aber nicht jede get/post/put-Methode. 

3.Und meine bevorzugte Lösung ist, BaseRequestOptions zu erweitern und merge() zu überschreiben:

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

diese merge()-Funktion wird für jede Anforderung aufgerufen.

5
Mavlarn

Wie wäre es mit einem separaten Service wie folgt

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

und wenn Sie dies von einem anderen Ort aus aufrufen, verwenden Sie this.httpClientService.addHeader("Authorization", "Bearer " + this.tok);

und Sie sehen die hinzugefügte Kopfzeile zB: - Authorization wie folgt

 enter image description here

5
co2f2e

Ich beantworte das zwar sehr spät, aber wenn jemand eine einfachere Lösung sucht. 

Wir können angle2-jwt verwenden. Das Anhängen eines JSON-Web-Token (JWT) als Autorisierungsheader ist beim Anhängen von HTTP-Anforderungen von einer Angular 2-App hilfreich.

Wir können globale Header mit erweiterten Konfigurationsoptionen setzen

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

Und per Anfrage-Token wie senden 

    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
KNimhan

So habe ich mit jeder Anfrage ein Token gesetzt.

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

Und registrieren Sie sich in app.module.ts

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

Ich mag die Idee, Standardoptionen zu überschreiben. Dies scheint eine gute Lösung zu sein.

Wenn Sie jedoch die Http-Klasse erweitern möchten. Lesen Sie dies bitte durch!

Einige Antworten hier zeigen tatsächlich eine fehlerhafte Überladung der request()-Methode, was zu schwer zu fangenden Fehlern und merkwürdigem Verhalten führen kann. Ich bin selbst darüber gestolpert.

Diese Lösung basiert auf der Implementierung der request()-Methode in Angular 4.2.x, sollte jedoch zukunftsfähig sein:

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;

  }

}

Beachten Sie, dass ich die ursprüngliche Klasse import { Http as NgHttp } from '@angular/http'; importiere, um Namenskollisionen zu verhindern.

Das Problem, das hier angesprochen wird, ist, dass die request()-Methode zwei verschiedene Anrufsignaturen hat. Wenn das Request-Objekt anstelle der URL string übergeben wird, wird das options-Argument von Angular ignoriert. Daher müssen beide Fälle richtig behandelt werden.

Und hier ist das Beispiel, wie diese überschriebene Klasse mit DI-Container registriert wird:

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

Mit einem solchen Ansatz können Sie Http-Klasse normal injizieren, stattdessen wird Ihre überschriebene Klasse auf magische Weise injiziert. So können Sie Ihre Lösung problemlos integrieren, ohne andere Teile der Anwendung zu ändern (Polymorphismus in Aktion).

Fügen Sie einfach httpProvider zur providers-Eigenschaft Ihrer Modul-Metadaten hinzu.

4
Slava Fomin II

Der einfachste von allen

Erstellen Sie eine config.ts-Datei

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

Dann importieren Sie einfach die config.ts-Datei in Ihre service

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

Ich denke, es war das einfachste und sicherste.

0
Joshua Fabillar

Ich kann eine einfachere Lösung auswählen> Neue Header hinzufügen, um die Standardeinstellungen zusammenzuführen oder durch Ihre API-Funktion (oder andere Funktionen) zu laden. 

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

Natürlich können Sie diese Header in Standardoptionen oder was auch immer in Ihrer Klasse externisiert werden. Dies ist in der von Ionic generierten api.ts @Injectable () - Exportklasse API {}

Es ist sehr schnell und es funktioniert für mich. Ich wollte kein Json/ld-Format.

0
Paul Leclerc

Es gab einige Änderungen für den Winkel 2.0.1 und höher:

    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
Carlos Casallas