Winkel 4.3x dynamisch http Abfangjäger

Question

Ich folgte this article von Medium, das ein http-Interceptor zu schaffen, die mich Header zu jedem HTTP-Aufruf

@Injectable() 
export class TokenInterceptor implements HttpInterceptor { 
    constructor(public auth: AuthService) {} 
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 

    request = request.clone({ 
     setHeaders: { 
     Authorization: `Bearer ${this.auth.getToken()}` 
     } 
    }); 
    return next.handle(request); 
    } 
} 

Der Artikel verwendet die authService dynamisch ein Token zu bekommen hinzufügen können. Sobald ich jedoch HttpClient in den AuthService injiziere, bekomme ich einen zirkulären Injektionsfehler.

Gibt es andere Möglichkeiten, den Interzeptor dynamisch anzupassen?

Answer 1

Eine herkömmliche Art und Weise zirkuläre Abhängigkeiten in beiden AngularJS und Eckige zu vermeiden, ist eine andere Anbieter Instanz an Ort und Stelle und nicht auf Anbieter Instanzierung zu erhalten:

export class TokenInterceptor implements HttpInterceptor { 
    constructor(public auth: AuthService, public injector: Injector) {} 
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    const httpClient = injector.get(HttpClient); 
    ... 
    } 
} 

Beachten Sie, dass, wenn die Abfangjäger gilt für alle HttpClient Anfragen, es wird auf denjenigen angewendet, der innerhalb des Interzeptors selbst durchgeführt wird und wahrscheinlich zu einer unendlichen Rekursion führt. Um dies zu vermeiden, kann die Anforderung markiert werden, um den Interzeptor zu überspringen (z. B. über einen benutzerdefinierten Header).

Answer 2

Vom article heißt es:

Es sollte beachtet werden, dass Angular Der neue Httpclient von @ Winkel/common/http wird hier verwendet wird und nicht die Http Klasse von @ Winkel/http. Wenn wir versuchen, Anfragen zu machen mit der traditionellen Httpclass wird der Abfangjäger nicht

getroffen wird Bitte stellen Sie sicher, dass Sie import { HttpClient } from '@angular/common/http'; im Import Abschnitt verwenden.

und dann der Konstruktor verwenden es: constructor(public http: HttpClient) {}