title: Angular 8 Intercept call to refresh token
body: <p>I am trying to refresh access token if current access token is expired.</p>
  
  <p>I am sending multiple requests at one time and I want to make a kind of a queue, so other requests won't request refreshing token route.</p>
  
  <p>I've googled some best practises and examples and found out the following solution for Angular 6 and rxjs v6, which is using BehaviourSubject and switchMaps. (please see attached code)</p>
  
  <p>However I am using Angular 8 (8.1) and rxjs v6.4 and this solution does not work for me.</p>
  
  <p>It simply does not reach <code>switchMap</code> in <code>this.authService.requestAccessToken().pipe</code>. (Tested using console.log)</p>
  
  <p>However if I comment <code>return this.refreshTokenSubject.pipe</code> and return <code>next.handle(request)</code> it reaches that switchMap, but my other requests are failed.</p>
  
  <p>Do you know if anything has been changed or should I try doing this in another way?</p>
  
  <ul>
  <li><strong>TokenInterceptor</strong></li>
  </ul>
  
  <pre><code>    import { Injectable } from '@angular/core';
      import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
      import { AuthService } from './auth.service';
      import { Observable, BehaviorSubject, Subject } from 'rxjs';
      import { switchMap, take, filter } from 'rxjs/operators';
      @Injectable()
      export class TokenInterceptor implements HttpInterceptor {
          private refreshTokenInProgress = false;
          private refreshTokenSubject: Subject&lt;any&gt; = new BehaviorSubject&lt;any&gt;(null);
  
          constructor(public authService: AuthService) { }
          intercept(request: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
  
              const accessExpired = this.authService.isAccessTokenExpired();
              const refreshExpired = this.authService.isRefreshTokenExpired();
  
              if (accessExpired &amp;&amp; refreshExpired) {
                  return next.handle(request);
              }
              if (accessExpired &amp;&amp; !refreshExpired) {
                  if (!this.refreshTokenInProgress) {
                      this.refreshTokenInProgress = true;
                      this.refreshTokenSubject.next(null);
                      return this.authService.requestAccessToken().pipe(
                          switchMap((authResponse) =&gt; {
                              this.authService.saveToken(AuthService.TOKEN_NAME, authResponse.accessToken);
                              this.authService.saveToken(AuthService.REFRESH_TOKEN_NAME, authResponse.refreshToken);
                              this.refreshTokenInProgress = false;
                              this.refreshTokenSubject.next(authResponse.refreshToken);
                              return next.handle(this.injectToken(request));
                          }),
                      );
                  } else {
                      return this.refreshTokenSubject.pipe(
                          filter(result =&gt; result !== null),
                          take(1),
                          switchMap((res) =&gt; {
                              return next.handle(this.injectToken(request))
                          })
                      );
                  }
              }
  
              if (!accessExpired) {
                  return next.handle(this.injectToken(request));
              }
          }
  
          injectToken(request: HttpRequest&lt;any&gt;) {
              const token = this.authService.getToken(AuthService.TOKEN_NAME);
              return request.clone({
                  setHeaders: {
                      Authorization: `Bearer ${token}`
                  }
              });
          }
      }
  </code></pre>
  
  <ul>
  <li><strong>requestAccessToken</strong></li>
  </ul>
  
  <pre><code>    requestAccessToken(): Observable&lt;any&gt; {
          const refreshToken = this.getToken(AuthService.REFRESH_TOKEN_NAME);
          return this.http.post(`${this.basePath}/auth/refresh`, { refreshToken });
      }
  </code></pre>
  
  <hr>
  
  <h2>UPD 1</h2>
  
  <p>So I used these sources to write my interceptor:</p>
  
  <ul>
  <li><p><a href="https://itnext.io/angular-tutorial-implement-refresh-token-with-httpinterceptor-bfa27b966f57" rel="noreferrer">https://itnext.io/angular-tutorial-implement-refresh-token-with-httpinterceptor-bfa27b966f57</a> (Angular 4 solution, I believe it edpends on rxjs version)</p></li>
  <li><p><a href="https://github.com/melcor76/interceptors/blob/master/src/app/interceptors/auth.interceptor.ts" rel="noreferrer">https://github.com/melcor76/interceptors/blob/master/src/app/interceptors/auth.interceptor.ts</a></p></li>
  </ul>
  
  <h2>UPD 2</h2>
  
  <p>I've excluded <code>refresh</code> request from interceptor scope and now it's working
  Thanks to @JBNizet</p>