HTTP Interceptors

Requests/Responses Intercept Karna

💡 Interceptor ek AIRPORT SECURITY CHECKPOINT jaisa hai — HAR request (passenger) is checkpoint se GUZARTA hai, chahe destination kuch bhi ho — auth token add karna (boarding pass check), logging (passport scan), error handling (security issue flag) — SAB requests ke liye CENTRALIZED.

Interceptor ek FUNCTION hai jo HAR HTTP request/response ko "intercept" karता hai — modify kar sakta hai (jaise auth header add karna), log kar sakta hai, ya errors handle kar sakta hai — CENTRALIZED, taaki HAR service mein REPEAT na karna pade.

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

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const authToken = localStorage.getItem('token');

  const clonedRequest = req.clone({
    headers: req.headers.set('Authorization', 'Bearer ' + authToken)
  });

  return next(clonedRequest);   // modified request AAGE bhejo
};

// app.config.ts mein register karna:
// provideHttpClient(withInterceptors([authInterceptor]))

🚧

Interceptor ek AIRPORT SECURITY CHECKPOINT jaisa hai — HAR request (passenger) is checkpoint se GUZARTA hai, chahe destination kuch bhi ho — auth token add karna (boarding pass check), logging (passport scan), error handling (security issue flag) — SAB requests ke liye CENTRALIZED.

1 / 2

⚡ झट से Recap

Interceptor = HAR HTTP request/response ko intercept karta hai
Auth tokens, logging, error handling — centralized concerns ke liye
req.clone() = immutable request ki modified copy banaओ

इस page में (2 subtopics)

Multiple interceptors REGISTER kiye ja sakte hain — SEQUENCE mein chalते hain (array order mein, request ke liye; REVERSE order mein, response ke liye) — jaise ek "middleware chain".

// provideHttpClient(withInterceptors([
//   authInterceptor,      // pehle chalता hai (request ke liye)
//   loggingInterceptor,   // phir ye
//   errorInterceptor      // phir ye
// ]))

// Request flow: authInterceptor → loggingInterceptor → errorInterceptor → SERVER
// Response flow: SERVER → errorInterceptor → loggingInterceptor → authInterceptor

💡Tip: Interceptor ORDER matter karta hai — jaise authInterceptor (jo token ADD karta hai) HAMESHA errorInterceptor se PEHLE hona chahiye, taaki error handling ko pata ho ki request PROPERLY authenticated thi.

Kabhi-kabhi EK SPECIFIC request ko INTERCEPTOR se SKIP karवाना hota hai (jaise login request ko auth token NAHI chahiye) — HttpContext se conditionally interceptors ko bypass kar sakte hain.

import { HttpContext, HttpContextToken } from '@angular/common/http';

export const SKIP_AUTH = new HttpContextToken<boolean>(() => false);

// Request mein:
this.http.get('/api/public-data', {
  context: new HttpContext().set(SKIP_AUTH, true)
}).subscribe(...);

// Interceptor mein check karna:
// if (req.context.get(SKIP_AUTH)) { return next(req); }   — skip auth logic

💡Tip: HttpContext modern (Angular 14+) approach hai per-request configuration ke liye — purane Angular versions mein custom headers ya URL patterns se ye achieve karna padta tha, jo zyada hacky tha.

← पिछला🌐 HttpClient अगला →🚨 Error Handling

Code10x

HTTP Interceptors

Multiple Interceptors — Execution Order

Skipping Interceptors for Specific Requests