HttpInterceptor + Angular 5およびHttpClient

Question

問題があります。私はAPI HTTPリクエストにTokenを追加したいと思います。私のトークンを取得するために、私はhttpを要求します。 ここに私のコード：

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

}

サービス：

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

私が求める方法は、トークンを取得し、ヘッダーとリクエストを返しますか？あなたの助け

Answer 1

ため

感謝私は、このソリューションを試してみましたので、私はここで間違っているなら、私を修正すること自由に感じていません。

問題は、getRequestWithAuthorizationの機能の中に、何かを返すことがないようですが、そこから何かを取得しようとしています。

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 
} 

あなただけの購読機能からの要求を戻ってきているが、内部機能（少なくとも、それはそれの私の理解です）として、要求は、任意のさらなる渡されていません。現在、あなたはそのリクエストで何もしていません。

This question hereとほぼ同じ問題が発生しています。私たちが最終的に返したいのは、観測可能なnext.handle(request)です。これを行うには、トークンの要求を実行しなければなりません。最後に正しい観測値を返すには、switchMap演算子を使用します。トークンを取得し、観測可能な結果を​​使用して要求を変更し、the next.handle(request)を返します。私はそれがこのように見えるべきだと思う。

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

は、私の知る限りでは、それはswitchMap操作の観察可能なソースと見なされているので、あなたのgetTokenJWTObservableに加入する必要はありません。 In an angular blog postこのように記述されています。

我々は

観察可能なソースに サブスクリプションをトリガすること、観察可能な結果を​​購読する場合、私はsomwhereあなたのインターセプト流れで、サブスクリプションは、あなたの帰国観測可能と意志に行われることを推測しますしたがって、トークンの取得リクエストも起動します。