HTTP Interceptors - Interview Question

1. What is an HTTP interceptor?

An HTTP interceptor is an Angular feature that intercepts outgoing HTTP requests and incoming responses. It allows centralized processing before requests reach the API or responses reach components.

2. Why do we need interceptors?

Interceptors are used for JWT authentication, global error handling, request logging, loading indicators, and custom headers. They eliminate duplicate HTTP handling code across services.

3. How do you attach a JWT token to every API request?

Use an HTTP interceptor to retrieve the JWT token and attach it to the Authorization header. Since requests are immutable, use req.clone().

const token = authService.getToken();
const authReq = req.clone({ setHeaders: { Authorization: `Bearer ${token}` } });

Key Point: Add the header only when a valid token exists and the request targets a trusted API.

4. How do you globally handle HTTP errors?

Use an interceptor with the RxJS catchError() operator to handle HTTP errors centrally, such as 400, 401, 403, and 500.

return next(req).pipe(
  catchError(err => { console.error(err.status); return throwError(() => err); })
);

5. How do you implement request logging?

Use an HTTP interceptor to log request URLs, methods, response status codes, and execution time. Avoid logging passwords, JWT tokens, or sensitive data.

console.log(req.method, req.url);
return next(req).pipe(tap(event => { if (event instanceof HttpResponse) console.log(event.status); }));

6. How do you implement a loading indicator using an interceptor?

Show a loading indicator when an HTTP request starts and hide it when the request completes, fails, or is cancelled using finalize().

loadingService.show();
return next(req).pipe(finalize(() => loadingService.hide()));

Key Point: Use a request counter when multiple API calls execute concurrently.

7. How were class-based interceptors configured using HTTP_INTERCEPTORS?

Traditionally, class-based interceptors implemented HttpInterceptor and were registered using the HTTP_INTERCEPTORS multi-provider.

{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }

8. What is a functional interceptor?

A functional interceptor is a function implementing HttpInterceptorFn. It uses inject() for dependency injection and is the recommended approach in modern Angular.

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req);
};

9. How do you configure functional interceptors using withInterceptors()?

Register functional interceptors using provideHttpClient(withInterceptors()) in app.config.ts. Interceptors execute in their configured order for outgoing requests.

providers: [
  provideHttpClient(withInterceptors([authInterceptor, errorInterceptor]))
]

10. What is the difference between class-based and functional interceptors?

Key Point: Class-based interceptors remain supported through withInterceptorsFromDi().

11. How do you handle a 401 Unauthorized response globally?

Use an HTTP interceptor to detect 401 Unauthorized responses. Attempt token refresh when supported; otherwise, clear authentication state and redirect to login.

if (err.status === 401) {
  authService.logout();
  router.navigate(['/login']);
}

Key Point: Prevent infinite refresh loops and avoid treating 403 Forbidden as an expired token.

Important Interview Revision Points

Angular + ASP.NET Core Web API — Interceptor Flow

Angular Component
       |
       v
Angular API Service
       |
       v
HTTP Interceptor
       |
       | Add JWT Bearer Token
       | Add Correlation ID
       | Enable Loading Indicator
       v
ASP.NET Core Web API
       |
       | Validate JWT
       | Execute Business Logic
       v
HTTP Response
       |
       v
HTTP Interceptor
       |
       | Handle Errors
       | Handle 401
       | Disable Loading Indicator
       v
Angular Component

Interview priority: Focus particularly on questions 1, 2, 3, 4, 6, 8, 9, 10, and 11.

For an Angular + ASP.NET Core Full Stack Developer interview, be especially prepared to explain JWT attachment, refresh token handling, global HTTP error handling, and functional interceptors.