HttpInterceptor + Angular 5 und HttpClient

Question

Ich habe ein Problem, ich möchte Token in meiner API HTTP-Anfrage hinzufügen. Um meinen Token zu bekommen, mache ich eine HTTP-Anfrage. Hier mein Code:

HttpInterceptor:

@Injectable() 
export class TokenInterceptor implements HttpInterceptor { 
constructor(private inj: Injector) { } 

getRequestWithAuthorization(request: HttpRequest<any>):any 
{ 
    let token:String ; 
    this.inj.get(CnafUserService).getTokenJWTObservable().subscribe(data => { 
     token = data ; 
     request = request.clone({ headers: request.headers.set('Authorization', `${token}`) }); 
     return request; 
    }) 
} 
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    //Ajout du header Authorization 
    if (request && request.url.match("^/api/")) 
    { 
     //Here the problem, request is null because the call is asynchronous 
     request = this.getRequestWithAuthorization(request,next); 
     return next.handle(request); 
    } 
    return next.handle(request); 
} 

}

Der Service:

getTokenJWTObservable(): Observable<any> { 
     return this.http.get(this.urlServletJwt); 
    } 

Wie rufe ich für das Token erhalten und dann die Anforderung mit Kopf zurückkehren?

Dank für Ihre Hilfe

Answer 1

ich diese Lösung nicht versucht haben, so fühlen sich frei, mich zu korrigieren, wenn ich falsch hier bin.

Das Problem scheint zu sein, dass innerhalb Ihrer getRequestWithAuthorization Funktion Sie nichts zurückgeben, obwohl Sie versuchen, etwas von dort zu bekommen.

getRequestWithAuthorization(request: HttpRequest<any>):any 
{ 
    let token:String ; 
    this.inj.get(CnafUserService).getTokenJWTObservable().subscribe(data => { 
     token = data ; 
     request = request.clone({ headers: request.headers.set('Authorization', `${token}`) }); 
     // this will only return the request to the subscribe call 
     // but not the calling function itself 
     return request; 
    }) 
    // no return value here 
} 

Sie kehren nur die Anforderung von der Funktion abonnieren, sondern als eine innere Funktion (zumindest das ist mein Verständnis davon) die Anforderung nicht weiter geführt wird. Momentan machst du nichts mit der Anfrage.

This question here ist über ein ähnliches Problem, das Sie haben. Was wir letztendlich zurückgeben wollen, ist next.handle(request), was ein Observable ist. Bevor wir das tun können, müssen wir eine Anfrage für Ihr Token durchführen, das ebenfalls beobachtbar ist. Um am Ende das korrekte Observable zurückzugeben, verwenden wir den Operator switchMap. Wir erhalten das Token, verwenden das beobachtbare Ergebnis, um die Anfrage zu ändern und geben the next.handle(request) zurück. Ich denke, es sollte so aussehen.

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    if(request && request.url.match("^/api/")) { 
     // we have to return this block which after the flatMap operator will return the next.handle(request) 
     return this.inj.get(CnafUserService).getTokenJWTObservable().switchMap((token) => { 
      // we use the output from your tokenRequest to clone the current request 
      const newRequest = request.clone({ headers: request.headers.set('Authorization', `${token}`) }); 
      return next.handle(newRequest); 
     }) 
    } 
    return next.handle(request); 
} 

Soweit ich weiß, gibt es keine Notwendigkeit, Ihre getTokenJWTObservable zu abonnieren, da sie die Quelle Operation beobachtbaren der switchMap betrachtet wird. In an angular blog post wird es so beschrieben.

, wenn wir auf das Ergebnis beobachtbar abonnieren, vermuten, dass eine Abonnement der Quelle beobachtbare

auslösen ich, dass somwhere in Ihrem Intercept fließen, wird ein Abonnement für Ihre Rückkehr beobachtbar gemacht werden und lösen Sie daher auch die get-Anfrage für den Token aus.