mediumFrontend

What is an HTTP interceptor?

Q: What is an HTTP interceptor?

**Core concept.** An HTTP interceptor sits in HttpClient 's pipeline and can inspect or modify **every** outgoing request and incoming response. It's the central place for cross-cutting HTTP concerns: attaching auth tokens, logging, setting headers, handling errors, retrying, caching, and showing loading indicators. HttpClient Interceptor <text

314 views

Understand the problem

Explain interceptors and use cases.

httpinterceptor

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

A functional auth interceptor

import { HttpInterceptorFn } from '@angular/common/http';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = localStorage.getItem('token');
  // requests are immutable → clone with the extra header
  const authReq = token
    ? req.clone({ setHeaders: { Authorization: 'Bearer ' + token } })
    : req;
  return next(authReq);
};

// register:  provideHttpClient(withInterceptors([authInterceptor]))

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do you handle internationalization (i18n) in Angular?

What are pipes in Angular?