Angular Interceptor: Http request is not being called

Question

I'm trying to get RefreshToken before each request and if it has expired I need to refresh it. The interceptor calls the service's function but I never get the API call. Please help

my interceptor code

public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (!this.authService.isAccessTokenExpired()) {
      return next.handle(this.addCookiesToRequest(request));
    }
    if (this.refreshTokenInProgress) {
      return this.refreshTokenSubject.pipe(
        filter(result => result !== null),
        take(1),
        switchMap(() => next.handle(this.addCookiesToRequest(request)))
      );
    } else {
      this.refreshTokenInProgress = true;
      this.refreshTokenSubject.next(null);
      return this.authService.refreshExpiredToken().pipe(
        switchMap((token: any) => {
          this.refreshTokenInProgress = false;
          this.refreshTokenSubject.next(token);
          return next.handle(this.addCookiesToRequest(request));
        }),
        catchError((error: any) => {
          this.refreshTokenInProgress = false;
          return Observable.throw(error);
        })
      );
    }
  }
}

  public addCookiesToRequest(request: HttpRequest<any>): HttpRequest<any> {
    return request.clone({
      withCredentials: true
    });
  }

authService refreshToken code

refreshExpiredToken() {
    return this.http.get(`${api_url}/token/refresh`, {
      withCredentials: true,
      observe: 'response'
    }).pipe(
      tap((res) => {
        if (res.status >= 300 && res.status < 400) {
          window.location.href = res.url;
        }
      }),
      catchError((error) => {
        if (error.status === 401) {
          this.router.navigate(['/login']);
        }
        return of(error);
      })
    );
  }

I even tried to add somewhere .subscribe(), but still nothing

Answer 1

So the problem was that I didn't exclude the refreshToken URL from interceptor, that is why it was intercepting itself in an infinite loop, that is why it was never actually called.

Answer 2

I think that the underlying problem is that you want to handle the referesh token state clent-side.

Aside from that, in your code your second if statement relies on the else statement: when refreshTokenInProgress is true the interceptor returns refreshTokenSubject, which will emit some value only in the else statement. In this way

 switchMap(() => next.handle(this.addCookiesToRequest(request)))

will never be triggered.