| نمط الاعتراض (`Interceptor Pattern`) | طريقة التعريف والبناء | طريقة التسجيل في إعدادات التطبيق |
|---|---|---|
| الاعتراضات التقليدية (Class-based) | بناء كلاس ينفذ واجهة `HttpInterceptor` | عبر مصفوفة مزودات معقدة باستخدام `HTTP_INTERCEPTORS` |
| الاعتراضات الوظيفية الحديثة (Functional) | دالة بسيطة من نوع `HttpInterceptorFn` | عبر تمرير الدالة مباشرة داخل `withInterceptors([authInterceptor])` |
تم استبدال Classes الـ Interceptors القديمة بمعترضات وظيفية نظيفة ومباشرة تُعرف بـ HttpInterceptorFn. تتيح لك هذه الاعتراضات اعتراض أي طلب صادر أو استجابة واردة على مستوى التطبيق بالكامل، لتطبيق مهام مركزية مثل حقن رموز المصادقة (Tokens) أو مراقبة الأداء دون تكرار الشفرة البرمجية.
تعمل الاعتراضات كحلقة وصل تمر من خلالها جميع طلبات التطبيق لتعديلها أو مراقبتها دون الحاجة لتكرار الشفرة في كل مكون منفصل.
تعتمد الفكرة على استقبال الطلب (req) ومعالجته ثم تمريره للمرحلة التالية عبر استدعاء دالة next(req) بكل سهولة.
| 1 | import { HttpInterceptorFn } from '@angular/common/http'; |
| 2 | |
| 3 | export const authInterceptor: HttpInterceptorFn = (req, next) => { |
| 4 | // حقن رمز المصادقة تلقائياً في رأس كل طلب صادر للخادم |
| 5 | const authToken = 'secure-angular-22-token-xyz'; |
| 6 | |
| 7 | const clonedRequest = req.clone({ |
| 8 | setHeaders: { |
| 9 | Authorization: `Bearer ${authToken}` |
| 10 | } |
| 11 | }); |
| 12 | |
| 13 | console.log('[Auth Interceptor] تم اعتراض الطلب وإضافة الترويسة الأمنية بنجاح:', req.url); |
| 14 | |
| 15 | // تمرير الطلب المُعدل للمرحلة التالية في السلسلة |
| 16 | return next(clonedRequest); |
| 17 | }; |
⚠️ تحذير
تذكر أن نسيان استدعاء next(req) أو النسخة المعدلة داخل الاعتراض سيؤدي إلى توقف الطلب وعدم وصوله للخادم نهائياً! يجب دائماً ضمان إعادة تدفق الطلب عبر دالة next لكي تستمر دورة الحياة الشبكية بصورة سليمّة.
| 1 | provideHttpClient( |
| 2 | withFetch(), |
| 3 | withInterceptors([authInterceptor]) |
| 4 | ) |