Angular Academy · درس

حراس المسارات الوظيفيون

احمِ المسارات باستخدام حراس وظيفيين

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

ما هي حُرّاس المسار

يحدد الحُرّاس ما إذا كان يمكن متابعة التنقل: لحماية المسارات بالمصادقة، أو التأكيد قبل مغادرة نموذج، أو تقييد الوصول حسب الدور. يستخدم Angular الحديث حُرّاس وظيفيين — وهم دوال عادية بلا أصناف.

CanActivateFn

تعيد CanActivateFn القيمة true للسماح، أو false للحظر، أو UrlTree لإعادة التوجيه، أو observable أو promise لإحدى هذه القيم.

import { CanActivateFn } from '@angular/router';
import { inject } from '@angular/core';

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.isLoggedIn();
};

ربط حارس بمسار

اربطوا الحراس باستخدام canActivate (وهو مصفوفة، لذا يمكنكم تجميع عدة حراس).

export const routes = [
  { path: 'dashboard', component: DashboardComponent,
    canActivate: [authGuard] }
];

إعادة التوجيه باستخدام UrlTree

إرجاع UrlTree (من router.createUrlTree أو parseUrl) يمنع التنقل ويعيد التوجيه في خطوة واحدة.

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  const router = inject(Router);
  return auth.isLoggedIn() ? true : router.parseUrl('/login');
};

الحراس غير المتزامنين

يمكن للحراس إرجاع Observable — حيث ينتظر الموجّه القيمة الأولى ثم يُكمله.

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.checkSession$().pipe(
    map(ok => ok ? true : inject(Router).parseUrl('/login'))
  );
};

الوصول إلى معلومات المسار في الحارس

يتلقى CanActivateFn كلاً من ActivatedRouteSnapshot وRouterStateSnapshot، ولذلك يمكنكم قراءة المعاملات والبيانات وعنوان URL الذي تمت محاولة الوصول إليه.

export const roleGuard: CanActivateFn = (route, state) => {
  const needed = route.data['role'];
  const auth = inject(AuthService);
  return auth.hasRole(needed);
};

حراس canMatch

يحدد CanMatchFn ما إذا كان تعريف المسار ينطبق أساسًا أم لا — وهذا مفيد لتبديل المسارات باستخدام علامة ميزة، أو لتحميلها كسولًا فقط عندما يكون ذلك مسموحًا.

import { CanMatchFn } from '@angular/router';

export const featureGuard: CanMatchFn = () =>
  inject(FeatureService).enabled('beta');

حراس canDeactivate

يُشغَّل CanDeactivateFn عند مغادرة المسار — وهو مناسب جدًا لتأكيد وجود تغييرات غير محفوظة. ويتلقى مثيل المكوّن.

import { CanDeactivateFn } from '@angular/router';

export const unsavedGuard: CanDeactivateFn<FormComponent> =
  (component) => component.isPristine() || confirm('Discard changes?');

تجميع عدة حراس

يجب أن يسمح جميع الحراس الموجودين في المصفوفة بالتنقل. وهم يعملون معًا؛ فإذا أعاد أيٌّ منهم false أو UrlTree، يُمنع التنقل أو يُعاد التوجيه.

canActivate: [authGuard, roleGuard]
// both must pass

لماذا نستخدم الحراس الوظيفيين بدلًا من الحراس المعتمدين على الأصناف

الحراس الوظيفيون أبسط: فلا يحتاجون إلى التعليمات البرمجية الإضافية لـ @Injectable، كما يسهُُل استخدام inject() معهم، ويمكن تركيبهم وإزالتهم أثناء تحسين الشجرة. أما واجهات CanActivate المعتمدة على الأصناف فقد أُهملت.

الحراس والمسارات الفرعية

يحمي canActivateChild جميع المسارات الفرعية التابعة لمسار رئيسي في مكان واحد، مما يلغي الحاجة إلى تكرار الحارس في كل مسار فرعي.

{ path: 'admin', canActivateChild: [authGuard],
  children: [ /* all protected */ ] }

تحقق سريع

اختبروا مدى فهمكم للحراس الوظيفيين.

مراجعة: حراس المسارات الوظيفيون

يتحكم الحراس الوظيفيون في التنقل باستخدام دوال عادية.

CanActivateFn: السماح أو المنع أو إعادة التوجيه (UrlTree).
CanMatchFn: تحديد ما إذا كان المسار ينطبق أساسًا.
CanDeactivateFn: تأكيد المغادرة.
استخدموا inject() مع الخدمات، واجمعوا الحراس في مصفوفات.

التالي: أحداث الموجّه والتنقل.

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

هل درس «حراس المسارات الوظيفيون» مجاني؟

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

ماذا ستتعلم في «حراس المسارات الوظيفيون»؟

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

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

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

كم من الوقت يستغرق درس «حراس المسارات الوظيفيون»؟

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

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

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

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

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