wake-up-neo.net

So legen Sie den HTTP-Anforderungsheader in Angular 2 richtig fest

Ich habe eine Ionic 2-Anwendung, die Angular 2 verwendet, die eine HTTP-PUT an einen ASP.NET Core-API-Server sendet. Hier ist die Methode, die ich zum Senden der Anfrage verwende:

public update(student: Student): Promise<Student>
{
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('authentication', `${student.token}`);

    const url = `${this.studentsUrl}`;

    return this.http
        .put(url, JSON.stringify(student), { headers: headers })
        .toPromise()
        .then(() => student)
        .catch(this.handleError);
}

Ich setze einen Authentifizierungsschlüssel wert für das Header-Objekt.

Wenn ich jedoch diese Anfrage auf dem Server erhalte, kann ich den Authentifizierungsschlüssel nicht im Header finden:

/ - enter image description here

Wie Sie im Bild sehen können, befinden sich im Header viele Schlüssel, nicht jedoch die Inhalte und Authentifizierungsschlüssel, die ich manuell in der Clientanwendung zum Header hinzugefügt habe.

Was mache ich falsch?

33
RBasniak

Ihr Parameter für die Anforderungsoptionen in http.put () sollte tatsächlich vom Typ RequestOptions sein. Versuchen Sie etwas so:

let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('authentication', `${student.token}`);

let options = new RequestOptions({ headers: headers });
return this.http
    .put(url, JSON.stringify(student), options)
58

Winkel 4>

Sie können die Header entweder manuell festlegen oder einen HTTP-Interceptor erstellen. 

Voraussetzungen für Winkel <4.3:

Bitte stellen Sie sicher, dass Sie in Ihrer gesamten Anwendung @angular/common/http verwenden (dies wurde in Angular 4.3 geändert).


Manuell

Die HttpHeaders-Klasse ist unveränderlich, sodass jedes set () eine neue Instanz zurückgibt und die Änderungen anwendet.

Aus dem Angular docs .

Setzen eines Headers:

http
  .post('/api/items/add', body, {
    headers: new HttpHeaders().set('Authorization', 'my-auth-token'),
  })
  .subscribe();

Mehrere Header setzen:

this.http
.post('api/items/add', body, {
  headers: new HttpHeaders({
    'Authorization': 'my-auth-token',
    'x-header': 'x-value'
  })
}).subscribe()

Lokale Variable (wieder unveränderliche Instanz)

let headers = new HttpHeaders().set('header-name', 'header-value');
headers = headers.set('header-name-2', 'header-value-2');

this.http
  .post('api/items/add', body, { headers: headers })
  .subscribe()

HTTP-Interceptor

Ein Hauptmerkmal von @ angle/common/http ist Interception, die Möglichkeit, Interceptors zu deklarieren, die zwischen Ihrer Anwendung und dem Backend liegen. Wenn Ihre Anwendung eine Anforderung stellt, transformieren Interceptors diese vor dem Senden an den Server, und die Interceptors können die Antwort auf dem Rückweg transformieren, bevor Ihre Anwendung sie erkennt. Dies ist nützlich für alles, von der Authentifizierung bis zur Protokollierung. 

Aus dem Angular docs .

Stellen Sie sicher, dass Sie @angular/common/http in Ihrer gesamten Anwendung verwenden. Auf diese Weise werden Ihre Anforderungen vom Interceptor abgefangen.

Schritt 1, Dienst erstellen:

import * as lskeys from './../localstorage.items';
import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpHeaders } from '@angular/common/http';

@Injectable()
export class HeaderInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if (true) { // e.g. if token exists, otherwise use incomming request.
            return next.handle(req.clone({
                setHeaders: {
                    'AuthenticationToken': localStorage.getItem('TOKEN'),
                    'Tenant': localStorage.getItem('TENANT')
                }
            }));
        }
        else {
            return next.handle(req);
        }
    }
}

Schritt 2, fügen Sie es Ihrem Modul hinzu:

providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HeaderInterceptor,
      multi: true // Add this line when using multiple interceptors.
    },
    // ...
  ]

Nützliche Links:

27
Brampage

Wir können das mit Interceptors gut machen. Sie müssen nicht .__ einstellen. Optionen in all Ihren Diensten verwalten auch nicht alle Ihre Fehlerantworten Definieren Sie einfach zwei Interceptors (einer, der etwas unternimmt, bevor Sie die -Anforderung an den Server senden, und einer, der vor dem Senden der Antwort des Servers an Ihren Dienst etwas unternimmt.

  1. Definieren Sie eine AuthInterceptor -Klasse, die etwas ausführt, bevor Sie die Anforderung an den Server senden. Sie können das API-Token (Abrufen von localStorage, siehe Schritt 4) und andere Optionen in dieser Klasse festlegen.
  2. Definieren Sie eine responseInterceptor -Klasse, um etwas zu tun, bevor Sie die Serverantwort an Ihren Dienst senden (httpClient). Sie können Ihre Serverantwort verwalten. Die häufigste Verwendung besteht darin, zu prüfen, ob das Token des Benutzers gültig ist (wenn das Token nicht von localStorage gelöscht und zur Anmeldung umgeleitet wird).
  3. Importieren Sie in Ihrem app.module HTTP_INTERCEPTORS von '@ angle/common/http'. Fügen Sie dann zu Ihren Providern die Interceptors (AuthInterceptor und ResponseInterceptor) hinzu. Wenn Sie dies tun, berücksichtigt Ihre App die Interceptors in allen unseren httpClient-Aufrufen.

  4. Speichern Sie das Token bei der Anmeldung der http-Antwort (verwenden Sie den Dienst http) unter LocalStorage.

  5. Verwenden Sie dann httpClient für alle Ihre apirest-Dienste.

Sie können einige gute Praktiken auf meinem Github-Projekt überprüfen hier

 enter image description here

Dies sollte leicht durch das Importieren von Headern aus Angular behoben werden:

import { Http, Headers } from "@angular/http";
2
Isto Barton

Für uns haben wir eine Lösung wie diese verwendet:

this.http.get(this.urls.order + '&list', {
        headers: {
            'Cache-Control': 'no-cache',
        }
    }).subscribe((response) => { ...

Referenz hier

1
cjohansson

Du hast einen Tippfehler.

Änderung:headers.append('authentication', ${student.token});

An:headers.append('Authentication', student.token);

HINWEIS: Die Zeichenfolge Authentifizierung wird in Großbuchstaben geschrieben

0
theCrab