title: Angular 5 HttpClient Interceptor JWT refresh token unable to Catch 401 and Retry my request
body: <p>I am trying to implement a catch for 401 responses and tried obtaining a refresh token based on  <a href="https://stackoverflow.com/questions/45202208/angular-4-interceptor-retry-requests-after-token-refresh">Angular 4 Interceptor retry requests after token refresh</a>. I was trying to implement the same thing, but I never was able to Retry that request, and I am really not sure if that is the best approach to apply the refresh token strategy.
  Here is my code:</p>
  
  <pre><code>@Injectable()
  export class AuthInterceptorService implements HttpInterceptor {
   public authService;
   refreshTokenInProgress = false;
   tokenRefreshedSource = new Subject();
   tokenRefreshed$ = this.tokenRefreshedSource.asObservable();
   constructor(private router: Router, private injector: Injector) { }
   authenticateRequest(req: HttpRequest&lt;any&gt;) {
   const token = this.authService.getToken();
   if (token != null) {
   return req.clone({
   headers: req.headers.set('Authorization', `Bearer ${token.access_token}`)
   });
   }
   else {
   return null;
   }
   }
   refreshToken() {
   if (this.refreshTokenInProgress) {
   return new Observable(observer =&gt; {
   this.tokenRefreshed$.subscribe(() =&gt; {
   observer.next();
   observer.complete();
   });
   });
   } else {
   this.refreshTokenInProgress = true;
  
   return this.authService.refreshToken()
   .do(() =&gt; {
   this.refreshTokenInProgress = false;
   this.tokenRefreshedSource.next();
   }).catch(
   (error) =&gt; {
   console.log(error);
   }
   );
   }
   }
   intercept(request: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
   this.authService = this.injector.get(AuthenticationService);
   request = this.authenticateRequest(request);
   return next.handle(request).do((event: HttpEvent&lt;any&gt;) =&gt; {
   if (event instanceof HttpResponse) {
   // do stuff with response if you want
   }
   }, (err: any) =&gt; {
   if (err instanceof HttpErrorResponse) {
   if (err.status === 401) {
   return this.refreshToken()
   .switchMap(() =&gt; {
   request = this.authenticateRequest(request);
   console.log('*Repeating httpRequest*', request);
   return next.handle(request);
   })
   .catch(() =&gt; {
   return Observable.empty();
   });
   }
   }
   });
   }
  }
  </code></pre>
  
  <p>The issue is that SwitchMap is never reached in... </p>
  
  <pre><code>if (err.status === 401) {
   return this.refreshToken()
   .switchMap(() =&gt; {
  </code></pre>
  
  <p>and the do operator as well...</p>
  
  <pre><code>return this.authService.refreshToken()
   .do(() =&gt; {
  </code></pre>
  
  <p>so that took me to my authService refreshToken method...</p>
  
  <pre><code>refreshToken() {
   let refreshToken = this.getToken();
  
   refreshToken.grant_type = 'refresh_token';
   refreshToken.clientId = environment.appSettings.clientId;
   return this.apiHelper.httpPost(url, refreshToken, null)
   .map
   (
   response =&gt; {
   this.setToken(response.data, refreshToken.email);
   return this.getToken();
   }
   ).catch(error =&gt; {
  
   return Observable.throw('Please insert credentials');
   });
   }
   }
  </code></pre>
  
  <p>It returns a mapped observable, and I know it needs a subscription if I replaced the do in...</p>
  
  <pre><code>return this.authService.refreshToken()
   .do(() =&gt; {
  </code></pre>
  
  <p><strong>With subscribe I'll break the observable chain I guess. I am lost and I've playing with this for a long time without a solution. :D</strong></p>