TokenInterceptor - Async HTTP Interceptors with Angular 4

token.interceptor.ts

import { Injectable } from '@angular/core';
import { HttpErrorResponse, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/mergeMap';

import { AuthService } from './auth.service';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

    constructor (private auth: AuthService) {}
    
    intercept (request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return this.auth.getUser()
            .mergeMap((user: User) => {

                if (user) {
                    // clone and modify the request
                    request = request.clone({
                        setHeaders: {
                            Authorization: `Bearer ${user.access_token}`
                        }
                    });
                }

                return next.handle(request)
                    // new
                    .do(() => {
                        // success
                    }, (err: any) => {
                        // error
                        if (err instanceof HttpErrorResponse) {
                            if (err.status === 401) {
                                // redirect user to login
                                this.auth.login();
                            }
                        }
                    });
            });
    }
}

thank you for sharing this. awesome :)

Thanks for the great guide!

Just a little detail - it's missing this import
import 'rxjs/add/operator/do';

Exactly what I was looking for!! This should be more available to Googlers it really saved me! 😄

Also it should be updated for ng 6.X and rxjs 6.X. Not a huge difference but the operators might be a little gotcha.
Might be able to FORK and update when I have a moment.

Edit: Updated gist for ng 6.x and rxjs 6.x

Somehow, this approach has an interesting side effect. The toPromise() on the http call does not work anymore.

        // That works
        this.http.get<any>("./assets/json/mock.json").subscribe(
            result => { console.log('************ dummy is back'); },
            error => { console.error('************ dummy is back', error); }
        );

        // That does not work anymore ?!
        this.http.get<any>("./assets/json/mock.json").toPromise()
            .then(result => { console.log('************ dummy is back'); })
            .catch(error => { console.error('************ dummy is back', error); });

Has anyone an idea why?

In this way, I always get below errors. I am frustrated and don't know what should I do.... Any help is very appreciated.
Observable.js:54 RangeError: Maximum call stack size exceeded at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:56) at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/OuterSubscriber.js.OuterSubscriber.notifyError (OuterSubscriber.js:13) at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._error (InnerSubscriber.js:18) at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:59) at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79) at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:59) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:59) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:59)

My package.json:
"@angular/common": "^6.0.1",
"@angular/compiler": "^6.0.1",
"@angular/core": "^6.0.1",
"rxjs": "^6.4.0",
"rxjs-compat": "^6.4.0",

Thank you! This has helped me a lot.