@Injectable() export class WebApiInterceptor implements HttpInterceptor { constructor(private tokenService: TokenService) { } intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { console.log('*An intercepted httpRequest*', req, this.tokenService.accessToken); const authReq = this.authenticateRequest(req); console.log('*Updated httpRequest*', authReq); return next.handle(authReq) .map((event: HttpEvent<any>) => { if (event instanceof HttpResponse) { console.log('*An intercepted httpResponse*', event); return event; } }) .catch((error: any) => { if (error instanceof HttpErrorResponse) { if (error.status === 403 && error.url !== environment.authEndpoint) { return this.tokenService .obtainAccessToken() .flatMap((token) => { const authReqRepeat = this.authenticateRequest(req); console.log('*Repeating httpRequest*', authReqRepeat); return next.handle(authReqRepeat); }); } } else { return Observable.throw(error); } }) } } 

@Injectable() export class WebApiInterceptor implements HttpInterceptor { constructor(private tokenService: TokenService) { } intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { console.log('*An intercepted httpRequest*', req, this.tokenService.accessToken); const authReq = this.authenticateRequest(req); console.log('*Updated httpRequest*', authReq); return next.handle(authReq) .map((event: HttpEvent<any>) => { if (event instanceof HttpResponse) { console.log('*An intercepted httpResponse*', event); return event; } }) .catch((error: any) => { if (error instanceof HttpErrorResponse) { if (error.status === 403 && error.url !== environment.authEndpoint) { return this.tokenService .obtainAccessToken() .flatMap((token) => { const authReqRepeat = this.authenticateRequest(req); console.log('*Repeating httpRequest*', authReqRepeat); return next.handle(authReqRepeat); }); } } else { return Observable.throw(error); } }) } } 

My final solution to this problem:

@Injectable() export class WebApiInterceptor implements HttpInterceptor { constructor(private tokenService: TokenService) { } intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { console.log('*An intercepted httpRequest*', req, this.tokenService.accessToken); const authReq = this.authenticateRequest(req); console.log('*Updated httpRequest*', authReq); return next.handle(authReq) .map((event: HttpEvent<any>) => { if (event instanceof HttpResponse) { console.log('*An intercepted httpResponse*', event); return event; } }) .catch((error: any) => { if (error instanceof HttpErrorResponse) { if (error.status === 403 && error.url !== environment.authEndpoint) { return this.tokenService .obtainAccessToken() .flatMap((token) => { const authReqRepeat = this.authenticateRequest(req); console.log('*Repeating httpRequest*', authReqRepeat); return next.handle(authReqRepeat); }); } } else { return Observable.throw(error); } }) } } 

Function

authenticateRequest(req) 

just add headers Authorization header to the copy of original request

Function

obtainAccessToken() 

get fresh token form authorization server and store it

My final solution to this problem:

@Injectable() export class WebApiInterceptor implements HttpInterceptor { constructor(private tokenService: TokenService) { } intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { console.log('*An intercepted httpRequest*', req, this.tokenService.accessToken); const authReq = this.authenticateRequest(req); console.log('*Updated httpRequest*', authReq); return next.handle(authReq) .map((event: HttpEvent<any>) => { if (event instanceof HttpResponse) { console.log('*An intercepted httpResponse*', event); return event; } }) .catch((error: any) => { if (error instanceof HttpErrorResponse) { if (error.status === 403 && error.url !== environment.authEndpoint) { return this.tokenService .obtainAccessToken() .flatMap((token) => { const authReqRepeat = this.authenticateRequest(req); console.log('*Repeating httpRequest*', authReqRepeat); return next.handle(authReqRepeat); }); } } else { return Observable.throw(error); } }) } } 

Function

authenticateRequest(req) 

just adds Authorization header to the copy of original request

Function

obtainAccessToken() 

get fresh token form authorization server and stores it