CODEWITHSUNDEEP
angularhttpinterceptorangular5
Cédric Rémond
Cédric Rémond

Reputation: 1054

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

I just migrated my Angular app from v4 to v5 and I have to rewrite my interceptor (made by extending Http and overriding the request method) to use the HttpInterceptor interface.

What I want to do is intercept requests with a 201 response code, update the header of the request with the header of the response, perform the updated request and return the new response.

My code currently looks like that:

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

How could I make this work ?

Upvotes: 4

Views: 1737

Answers (1)

C&#233;dric R&#233;mond
C&#233;dric R&#233;mond

Reputation: 1054

I finally get it working.

My final code is:

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

It seems that storing next.handle(req) in a variable and returning it if there was no work to do was a terrible idea.

Hoping my pain will at least help someone :)

Upvotes: 4

Related Questions