Expired JWT token triggers 401 in Angular HttpInterceptor without automatic redirect or refresh

Answer to the Question

Place the refresh logic in a dedicated AuthService and let the HttpInterceptor call that service. The interceptor should not perform the refresh itself; it only delegates, retries the original request, and protects against infinite loops. Route guards stay synchronous, but they can return an Observable that waits for a pending refresh to finish before allowing navigation. This keeps the UI responsive while ensuring guards see the latest token.

Why This Works

• Single source of truth – AuthService owns token storage, refresh logic, and state, making unit‑testing straightforward.
• Loop protection – the interceptor skips refresh attempts for requests to the refresh endpoint itself and limits retries to one per error chain.
• Non‑blocking navigation – guards that return an Observable pause navigation only until the refresh resolves (typically <200 ms), so the user sees a brief spinner if needed.

Implementation Sketch

@Injectable({providedIn: 'root'})
export class AuthService {
  private token$ = new BehaviorSubject(null);
  private refreshing = false;

  refreshToken(): Observable {
    if (this.refreshing) return this.token$;
    this.refreshing = true;
    return this.http.post<{token:string}>('/api/refresh', {})
      .pipe(
        tap(res => this.token$.next(res.token)),
        map(res => res.token),
        finalize(() => this.refreshing = false)
      );
  }

  isAuthenticated(): Observable {
    return this.token$.pipe(map(t => !!t));
  }
}

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private auth: AuthService) {}

  intercept(req: HttpRequest, next: HttpHandler): Observable> {
    const token = this.auth.token$.value;
    const authReq = token ? req.clone({setHeaders: {'Authorization': `Bearer ${token}`}}) : req;

    return next.handle(authReq).pipe(
      catchError(err => {
        if (err.status === 401 && !req.url.endsWith('/api/refresh')) {
          return this.auth.refreshToken().pipe(
            switchMap(newToken => {
              const retryReq = req.clone({setHeaders: {'Authorization': `Bearer ${newToken}`}});
              return next.handle(retryReq);
            })
          );
        }
        return throwError(() => err);
      })
    );
  }
}

@Injectable({providedIn: 'root'})
export class AuthGuard implements CanActivate {
  constructor(private auth: AuthService, private router: Router) {}

  canActivate(): Observable {
    return this.auth.isAuthenticated().pipe(
      switchMap(isAuth => {
        if (isAuth) return of(true);
        this.router.navigate(['/login']);
        return of(false);
      })
    );
  }
}

Verification Checklist

1. Trigger a 401 from a protected API. Confirm the interceptor makes a single refresh call, retries the original request, and navigation proceeds.
2. Simulate a 401 from the refresh endpoint. Verify the interceptor does not retry again, preventing a loop.
3. Measure guard‑induced navigation delay. It should stay under 200 ms; a small loading spinner can be shown during the wait.
4. Ensure the refresh token is never exposed to components. It should remain inside AuthService.

Missing Diagnostic Detail

To fine‑tune loop protection, could you confirm whether your refresh endpoint returns a 401 on failure or a different status code?