I have an interceptor that is supposed to refresh an access token if it's expired and continue the request with the new token, but its just looping a lot (not infinitely, something is stopping it after 100+ loops) and I can't seem to figure out why, this doesn't happen when token is not expired.

let auth = inject(AuthService);
if (!auth.AccessExpired()) return next(req);
return auth.refresh().pipe(
  catchError(() => next(req)),
  switchMap((res) => {
    var response = res as RefreshResponse;
    const newReq = req.clone({
      headers: req.headers.set("Authorization", `Bearer ${response.access_token}`)
    })
    return next(newReq);
  })
)

This is the refresh function:

refresh() {
  return this.http.post<RefreshResponse>(this.baseUrl + "refresh", {}, {
    headers: new HttpHeaders().set("refresh_token", this.refreshToken ?? "")
  }).pipe(
    tap(
      res => {
        console.log('responded' + res);
        this.accessToken = res.access_token
      }
    ),
    retry(2),
    catchError((err) => {
      console.log("errored", + err)
      this.logout();
      this.noti.showError("Your session expired, log in again.", 5000);
      return throwError(() => new Error(err));
    })
  )
}

I have an interceptor that is supposed to refresh an access token if it's expired and continue the request with the new token, but its just looping a lot (not infinitely, something is stopping it after 100+ loops) and I can't seem to figure out why, this doesn't happen when token is not expired.

let auth = inject(AuthService);
if (!auth.AccessExpired()) return next(req);
return auth.refresh().pipe(
  catchError(() => next(req)),
  switchMap((res) => {
    var response = res as RefreshResponse;
    const newReq = req.clone({
      headers: req.headers.set("Authorization", `Bearer ${response.access_token}`)
    })
    return next(newReq);
  })
)

This is the refresh function:

refresh() {
  return this.http.post<RefreshResponse>(this.baseUrl + "refresh", {}, {
    headers: new HttpHeaders().set("refresh_token", this.refreshToken ?? "")
  }).pipe(
    tap(
      res => {
        console.log('responded' + res);
        this.accessToken = res.access_token
      }
    ),
    retry(2),
    catchError((err) => {
      console.log("errored", + err)
      this.logout();
      this.noti.showError("Your session expired, log in again.", 5000);
      return throwError(() => new Error(err));
    })
  )
}

• angular
• angular-httpclient
• angular-http-interceptors

Share Improve this question Follow asked Mar 13 at 22:04 SymtaxSymtax 1555 bronze badges 2

• the answer is pretty simple - this.http.post(...."refresh") will trigger the very same interceptor, that recursively will call the same logic again. to fix that use HttpContext and an ignore condition to skip auth logic for some of requests – Andrei Commented Mar 13 at 22:33
• @Andrei ohh didn't think about that thank you – Symtax Commented Mar 14 at 9:44

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

As @Andrei says, the condition in the interceptor can be some like

let auth = inject(AuthService);
if (!auth.AccessExpired() || reg.Headers.has('refresh_token') return next(req);
....rest of your code..