HttpInterceptor + Angular 5 和 HttpClient答案

【问题标题】：HttpInterceptor + Angular 5 and HttpClientHttpInterceptor + Angular 5 和 HttpClient
【发布时间】：2018-05-14 07:38:15
【问题描述】：

我有一个问题，我想在我的 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);
    }

如何，我要求获取令牌，然后返回带有标头的请求？

感谢您的帮助

【问题讨论】：

标签： angular

【解决方案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
}

您只是从 subscribe 函数返回请求，但作为内部函数（至少这是我对它的理解），请求不会进一步传递。目前你没有对请求做任何事情。

This question here 与您遇到的类似问题有关。我们最终想要返回的是next.handle(request)，这是一个可观察的。在我们这样做之前，我们必须对你的令牌执行一个请求，这也是一个可观察的。最后，为了返回正确的 observable，我们使用 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);
}

据我所知，没有必要订阅您的getTokenJWTObservable，因为它被认为是 switchMap 操作的源 observable。 In an angular blog post是这样描述的。

如果我们订阅结果 observable，那将触发一个订阅源 Observable

我猜在你的拦截流中的某个地方，将会订阅你返回的 observable，因此也会触发对令牌的获取请求。

【讨论】：