ما هي HTTP interceptors؟

Question

Accepted Answer

**HTTP interceptors** تقف في منتصف كل طلب/استجابة `HttpClient`، مما يتيح لك فحصها وتحويلها عالميًا. إنها المكان المثالي لـ **cross-cutting concerns** التي تنطبق على جميع الطلبات — رموز المصادقة، والتسجيل، ومعالجة الأخطاء، ومؤشرات التحميل.

## Functional interceptor (Angular حديث)

```ts
import { HttpInterceptorFn } from "@angular/common/http";
import { inject } from "@angular/core";

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();

// requests are immutable — CLONE to modify
  const authReq = req.clone({
    setHeaders: { Authorization: `Bearer ${token}` }, // attach token to EVERY request
  });

return next(authReq); // pass the (modified) request along the chain
};
```

يستقبل المقسم الطلب ودالة `next` (المعالج التالي). بشكل حاسم، الطلبات **immutable**، لذا تقوم بـ `.clone()` مع التغييرات بدلاً من تحويرها. يعني تسجيل هذا مرة واحدة أن كل طلب صادر يحمل تلقائيًا رأس المصادقة — لا حاجة لتكراره في كل خدمة.

## تسجيل المقسمات

```ts
bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(withInterceptors([authInterceptor, errorInterceptor, loggingInterceptor])),
  ],
});
```

تشكل المقسمات المتعددة **chain**، حيث يمرر كل واحد إلى التالي — الترتيب مهم.

## التعامل مع الاستجابات والأخطاء عالميًا

```ts
import { catchError } from "rxjs/operators";
import { throwError } from "rxjs";

export const errorInterceptor: HttpInterceptorFn = (req, next) =>
  next(req).pipe(
    catchError((err) => {
      if (err.status === 401) inject(Router).navigate(["/login"]); // global 401 handling
      inject(NotificationService).showError(err.message);
      return throwError(() => err);
    })
  );
```

بما أن المقسمات تلف Observable للاستجابة أيضًا، يمكنك معالجة الأخطاء (مثل إعادة التوجيه عند 401، أو عرض إشعار) في **مكان واحد** للتطبيق بأكمله.

## استخدامات المقسم الشائعة

```text
✓ Attach auth tokens to requests
✓ Global error handling (401 → login, show notifications)
✓ Logging / analytics of all HTTP traffic
✓ Show/hide a global loading spinner
✓ Add common headers, retry logic, caching
```

## لماذا يهم

تجمع المقسمات المنطق الذي قد يتم تكراره وفقًا لكل استدعاء HTTP — والأهم من ذلك إرفاق رموز المصادقة ومعالجة الأخطاء عالميًا.

هذا يحافظ على نظافة الخدمات (فهي تقوم ببساطة بإجراء الطلبات) ويضمن سلوكًا متسقًا في جميع أنحاء التطبيق.

مقسمات رموز المصادقة والخطأ العام قريبة من العالمية في تطبيقات Angular الإنتاجية؛ معرفة قاعدة clone-to-modify ونموذج chain أمر أساسي لكتابتها بشكل صحيح.