wake-up-neo.com

Hinzufügen mehrerer Header in Angular 5 HttpInterceptor

Ich versuche zu lernen, wie man HttpInterceptor verwendet, um zu jeder HTTP-Anfrage, die die App an die API stellt, ein paar Header hinzuzufügen. Ich habe diesen Abfangjäger:

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

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

import { Observable } from 'rxjs/Observable';


@Injectable()
export class fwcAPIInterceptor implements HttpInterceptor {
  intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

  const authReq = req.clone({
    headers: req.headers.set('Content-Type', 'application/json')
  });

  console.log('Intercepted HTTP call', authReq);

  return next.handle(authReq);
}

}

Abgesehen von der Kopfzeile 'Content-Type' muss ich eine 'Autorisierung' hinzufügen, aber ich mache es nicht so (die Dokumentation von Angular HttpHeaders ist nur eine Liste der Methoden ohne Erklärung).

Wie kann ich es tun? Vielen Dank!

5
Fel
@Injectable()
export class fwcAPIInterceptor implements HttpInterceptor {
  intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

  const authReq = req.clone({
    headers: new HttpHeaders({
      'Content-Type':  'application/json',
      'Authorization': 'my-auth-token'
    })
  });

  console.log('Intercepted HTTP call', authReq);

  return next.handle(authReq);
}
11
axl-code

Da die set-Methode jedes Mal ein Header-Objekt zurückgibt, können Sie dies tun. Auf diese Weise werden auch die ursprünglichen Header der abgefangenen Anforderung beibehalten.

const authReq = req.clone({
    headers: req.headers.set('Content-Type', 'application/json')
    .set('header2', 'header 2 value')
    .set('header3', 'header 3 value')
});
9
Ketan Patil
  const modifiedReq = req.clone({
      url: this.setUrl(req.url),
      headers: this.addExtraHeaders(req.headers)
    });

Und die Methode:

private addExtraHeaders(headers: HttpHeaders): HttpHeaders {
  headers = headers.append('myHeader', 'abcd');
  return headers;
} 

Die Methode .append erstellt ein neues HttpHeaders-Objekt, fügt myHeader hinzu und gibt das neue Objekt zurück.

Wenn Sie diese Lösung verwenden, können Sie auch mehrere Interceptors verwenden, da Sie Ihre Header nicht überschreiben.

1
Mihai

Wie bereits erwähnt, überschreibt akzeptierte Methode Header, für deren Hinzufügen ich den Ansatz aus der API-Dokumentation mag :

const authReq = req.clone({ setHeaders: { Authorization: authToken } });
0
vitalii-patsai

Die obige Lösung wirkte wie charmant. Vergessen Sie nicht, den Rückruf an die Kopfzeile in Zeile 2 zuzuweisen!

1 private addExtraHeaders(headers: HttpHeaders): HttpHeaders {<br> 2 headers = headers.append('myHeader', 'abcd');<br> 3 return headers;<br> 4 } <br>

0