title: Angular 4 JWT Http Interceptor doesn't work on chain requests
body: <p>I've implemented http interceptor for new HttpClient and everything works fine, token is refreshed for single request, but if I try to access the route which lazy load data from two api's I received an error and my JWT token is blacklisted.</p>
  
  <p><strong>Laravel Backend Token Refresh Method:</strong></p>
  
  <pre><code>public function refreshToken() {
  
          $token = \JWTAuth::getToken();
  
          if (! $token) {
              return response()-&gt;json(["error" =&gt; 'Token is invalid'], 401);
          }
  
          try {
  
              $refreshedToken = \JWTAuth::refresh($token);
              $user = \JWTAuth::setToken($refreshedToken)-&gt;toUser();
  
          } catch (JWTException $e) {
  
              return response()-&gt;json(["error" =&gt; $e-&gt;getMessage()], 400);
          }
  
          return response()-&gt;json(["token" =&gt; $refreshedToken, "user" =&gt; $user], 200);
      }
  </code></pre>
  
  <p><strong>Angular Http Interceptor:</strong></p>
  
  <pre><code>@Injectable()
  export class RefreshTokenInterceptor implements HttpInterceptor {
  
      constructor(private injector: Injector) { }
  
      intercept(request: HttpRequest&lt;any&gt;, next: HttpHandler) : Observable&lt;HttpEvent&lt;any&gt;&gt; {
  
          return next.handle(request).catch((errorResponse: HttpErrorResponse) =&gt; {
  
              const error = (typeof errorResponse.error !== 'object') ? JSON.parse(errorResponse.error) : errorResponse;
  
              if(errorResponse.status === 401 &amp;&amp; error.error === 'token_expired') {
  
                  const http = this.injector.get(HttpClient);
  
                  let token = localStorage.getItem('token');
  
                  return http.post&lt;any&gt;(`${environment.apiBaseUrl}token/refresh`, {},
                      {headers: new HttpHeaders().set('Authorization', `Bearer ${token}`)})
                      .flatMap(data =&gt; {
  
                          localStorage.setItem('currentUser', JSON.stringify(data));
                          localStorage.setItem('token', data.token);
  
                          const cloneRequest = request.clone({setHeaders: {'Authorization': `Bearer ${data.token}`}});
                          return next.handle(cloneRequest);
                      });
              }
  
              return Observable.throw(errorResponse);
          });
      }
  }
  </code></pre>
  
  <p>My Route which use resolvers:</p>
  
  <pre><code>{
          path: '',
          children: [ {
              path: 'create',
              component: CreateCarComponent,
              resolve: {
                  subcategories: SubCategoriesResolver,
                  companies: CompaniesResolver
              }
          }]
      }
  </code></pre>
  
  <p><strong>Companies Resolver:</strong> (Car resolver is simmilar to this)</p>
  
  <pre><code>@Injectable()
  export class CompaniesResolver implements Resolve&lt;any&gt; {
  
      constructor(private _userService: UserService) {}
  
      resolve(route: ActivatedRouteSnapshot) {
          return this._userService.getCompaniesList();
      }
  }
  </code></pre>
  
  <p><strong>User Service Method Example:</strong></p>
  
  <pre><code>getUserCardsApi: string = "user/cars/all";
  
      getCardsList() :  Observable&lt;any[]&gt; {
  
          return this._http.get(environment.apiBaseUrl + this.getUserCardsApi, this.jwtHeaders())
              .catch(error =&gt; {
  
                  return Observable.throw(error);
              });
      }
  </code></pre>
  
  <p><strong>Headers:</strong></p>
  
  <pre><code>private jwtHeaders() {
  
          let currentUser = JSON.parse(localStorage.getItem('currentUser'));
  
          return {headers: new HttpHeaders().set('Authorization', 'Bearer ' + currentUser.token)}
          }
      }
  </code></pre>
  
  <p>Whenever I hit routes with more than 2 resolvers, first response I receive is correct and returns a refreshed token with user object and the next one after that right away returns token blacklisted. Could you please suggest what can be the issue, I've spent too much time on solving this (</p>
  
  <p>Update 1: </p>
  
  <p>What I noticed is that second refresh request is passing an old token rather than a new one thats why Laravel blacklisting a token</p>