Angular 5 的拦截器：发出第二个请求并 return 它的结果而不是第一个请求的结果

Question

我刚刚将我的 Angular 应用程序从 v4 迁移到 v5，我必须重写我的拦截器（通过扩展 Http 并覆盖 request 方法）以使用 HttpInterceptor 界面。

我想做的是用 201 响应代码拦截请求，用响应的 header 更新请求的 header，执行更新的请求和 return新的回应。

我的代码目前看起来像这样：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const handled = next.handle(req);
    return handled.mergeMap(event => {
        // I only work when the response is arrived
        if (event.type === HttpEventType.Response) {
            // The 201 status code tells me I have to update my headers
            if (event.status === 201 && event.url.split('/').pop().toLowerCase() !== 'check') {
                this.authService.updateAuthentication(event.headers.get('new_token')); // update the cookie containing the token
                // I create the updated request
                const requestWithUpdatedHeaders = req.clone({ headers: this.appService.getHeaders() });
                // With this solution, the new request doesn't seem to be performed at all
                return next.handle(requestWithUpdatedHeaders);
                // With this one the request is performed but the result get in my components is null
                return this.http.request(requestWithUpdatedHeaders);               
            } else {
                return handled;
            }
        } else {
            return handled;
        }
    });
}

我怎样才能完成这项工作？

Answer 1

我终于让它工作了。

我的最终代码是：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next
        .handle(req)
        .mergeMap(event => {
            if (event instanceof HttpResponse && event.status === 201 && event.url.split('/').pop().toLowerCase() !== 'check') {
                if (event.body instanceof Blob) {
                    return this.userService.check()
                        .mergeMap(res => {
                            // update the cookie containing the token
                            this.authService.updateAuthentication(res.headers.get('new_token'));

                            const newReq = req.clone({ headers: this.appService.getHeaders() });
                            return next.handle(newReq);
                        });
                } else {
                    this.authService.updateAuthentication(event.headers.get('new_token'));

                    const newReq = req.clone({ headers: this.appService.getHeaders() });
                    return next.handle(newReq);
                }
            }
            return Observable.of(event);
        });
}

似乎将 next.handle(req) 存储在变量中并在没有工作可做时返回它是一个糟糕的主意。

希望我的痛苦至少能帮助别人:)

Angular 5 的拦截器：发出第二个请求并 return 它的结果而不是第一个请求的结果

Angular 5's interceptor: make a second request and return its result instead of the first request's result

http

interceptor

angular

angular5