30. استخدام المعترضات (Interceptors) لتعديل الطلبات

معترضات HTTP (HTTP Interceptors) هي ميزة قوية في Angular تسمح لك باعتراض طلبات HTTP الصادرة والاستجابات الواردة. وهي مثالية للاهتمامات الشاملة (cross-cutting concerns) مثل المصادقة، والتسجيل، والتخزين المؤقت، أو تعديل الرؤوس (headers).

1. إنشاء معترض مخصص

يجب أن تنفذ فئة المعترض المخصص واجهة HttpInterceptor وطريقتها intercept().

مثال: إضافة رمز تفويض (Authorization Token)

typescript // auth-interceptor.ts import { Injectable } from '@angular/core'; import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http'; import { Observable } from 'rxjs';

@Injectable() export class AuthInterceptor implements HttpInterceptor { intercept(req: HttpRequest, next: HttpHandler): Observable<HttpEvent> { // 1. الحصول على الرمز (على سبيل المثال، من localStorage أو UserService) const authToken = 'MY_FAKE_JWT_TOKEN';

// 2. استنساخ الطلب وإضافة رأس التفويض
const authReq = req.clone({
  headers: req.headers.set('Authorization', `Bearer ${authToken}`)
});

// 3. تمرير الطلب المستنسخ إلى المُعالج التالي
return next.handle(authReq);

} }

2. تسجيل المعترض

يجب توفير المعترضات على مستوى جذر التطبيق باستخدام تهيئة خاصة في AppModule.

typescript // app.module.ts import { HTTP_INTERCEPTORS } from '@angular/common/http'; import { AuthInterceptor } from './auth-interceptor';

@NgModule({ // ... imports and declarations providers: [ // تسجيل المعترض باستخدام العلامة multi: true { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true } ], // ... }) export class AppModule { }

يقوم Angular الآن بتشغيل AuthInterceptor لكل طلب HTTP قبل إرساله إلى الواجهة الخلفية.