Angular Academy · درس

إضافة ترويسات المصادقة

أرفق الرموز المميّزة بالطلبات الصادرة

إضافة ترويسات المصادقة درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.

لماذا نستخدم الاعتراض للمصادقة

تتطلب معظم واجهات API ترويسة Authorization مع كل طلب. وبدلًا من إضافتها يدويًا إلى كل استدعاء، يضيفها المعترض تلقائيًا إلى جميع الطلبات الصادرة.

استنساخ الطلب لإضافة ترويسة

بما أن الطلبات غير قابلة للتغيير، استنسخوا الطلب باستخدام setHeaders لإرفاق الرمز المميز.

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();
  const authReq = req.clone({
    setHeaders: { Authorization: 'Bearer ' + token }
  });
  return next(authReq);
};

قراءة الرمز المميز من خدمة

احقنوا خدمة مصادقة أو خدمة رموز مميزة للحصول على الرمز الحالي. ويساعد استخدام signal أو BehaviorSubject داخلها في إبقاء القيمة محدّثة.

export class AuthService {
  private token = signal<string | null>(null);
  getToken() { return this.token(); }
  setToken(t: string) { this.token.set(t); }
}

التجاوز عند عدم وجود رمز مميز

إذا لم يكن المستخدم قد سجّل الدخول، فمرّروا الطلب الأصلي من دون تغيير.

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();
  if (!token) return next(req);
  return next(req.clone({
    setHeaders: { Authorization: 'Bearer ' + token }
  }));
};

إرفاقه بواجهة API الخاصة بكم فقط

لا تسرّبوا الرمز المميز إلى عناوين URL تابعة لجهات خارجية. تحقّقوا من أن عنوان URL للطلب يخص الواجهة الخلفية الخاصة بكم.

const isApi = req.url.startsWith(environment.apiUrl);
if (!isApi || !token) return next(req);
return next(req.clone({
  setHeaders: { Authorization: 'Bearer ' + token }
}));

setHeaders مقابل headers.set

يُعد setHeaders داخل clone الطريقة المختصرة. ويمكنكم أيضًا استخدام req.headers.set(...) وتمرير النتيجة عبر { headers }. يدمج setHeaders الترويسات ولا يستبدلها كلها.

const headers = req.headers.set('Authorization', 'Bearer ' + token);
return next(req.clone({ headers }));

إضافة عدة ترويسات

أرفقوا عدة ترويسات دفعةً واحدة داخل نسخة واحدة.

return next(req.clone({
  setHeaders: {
    Authorization: 'Bearer ' + token,
    'X-Client': 'web',
    'Accept-Language': lang
  }
}));

withCredentials مع ملفات تعريف الارتباط

إذا كانت المصادقة تستخدم ملفات تعريف ارتباط HttpOnly بدلًا من الرموز المميزة، فعيّنوا withCredentials لكي يرسلها المتصفح عبر النطاقات المختلفة.

return next(req.clone({ withCredentials: true }));

تحديث رمز مميز منتهي الصلاحية

لتحديث الرمز المميز، يمكن للمعترض التقاط الخطأ 401، وطلب رمز جديد، ثم إعادة محاولة الطلب الأصلي — وهو نمط أكثر تقدمًا ستتناولونه مع معالجة الأخطاء.

الحفاظ على نقاء المعترض

ينبغي أن يقرأ المعترض الرمز المميز وينسخ الطلب فقط — تجنبوا تشغيل التنقل أو المنطق الثقيل هنا. حافظوا على تركيز المسؤوليات ليظل خط معالجة الطلبات قابلًا للتنبؤ.

تسجيل معترض المصادقة

ضعوه في موضع مبكر من السلسلة حتى تكون الترويسة موجودة قبل تشغيل التسجيل أو المعترضات الأخرى.

provideHttpClient(
  withInterceptors([authInterceptor, loggingInterceptor])
)

تحقق سريع

اختبروا مدى فهمكم لإضافة ترويسات المصادقة.

مراجعة: إضافة ترويسات المصادقة

يُرفق معترض المصادقة الرمز المميز بالطلبات الصادرة.

استنسخوا الطلب باستخدام setHeaders: { Authorization: ... }.
تجاوزوا الطلب عند عدم وجود رمز مميز، وقيدوا استخدامه بعنوان URL الخاص بواجهة API.
استخدموا withCredentials مع مصادقة ملفات تعريف الارتباط.

التالي: معالجة الأخطاء على مستوى التطبيق.

الأسئلة الشائعة

هل درس «إضافة ترويسات المصادقة» مجاني؟

نعم — نص درس «إضافة ترويسات المصادقة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.

ماذا ستتعلم في «إضافة ترويسات المصادقة»؟

أرفق الرموز المميّزة بالطلبات الصادرة تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟

لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «إضافة ترويسات المصادقة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟

نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Angular Academy