Skip to content

Instantly share code, notes, and snippets.

@danielcrisp
Last active April 5, 2021 20:15
Show Gist options
  • Save danielcrisp/ced7d092b07efa609285ba5f0823ca60 to your computer and use it in GitHub Desktop.
Save danielcrisp/ced7d092b07efa609285ba5f0823ca60 to your computer and use it in GitHub Desktop.
TokenInterceptor - Async HTTP Interceptors with Angular 4
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();
}
}
});
});
}
}
Copy link

ghost commented Oct 15, 2017

thank you for sharing this. awesome :)

@matejminar
Copy link

Thanks for the great guide!

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

@mikecabana
Copy link

mikecabana commented Aug 7, 2018

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

@gretalee
Copy link

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?

@ziye201810
Copy link

ziye201810 commented Apr 11, 2019

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",

@bipoza
Copy link

bipoza commented Jul 28, 2020

Thank you! This has helped me a lot.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment