HTTP & Communication
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
⚡ Quick 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ओ
On this 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 → authInterceptorTip: 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 logicTip: 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.