حراس المسارات في Angular

يشرح هذا الدرس كيفية تأمين المسارات في تطبيقات Angular باستخدام حراس المسارات.

ما حراس المسارات؟

يتحكم حراس المسارات في الوصول إلى المسارات في Angular. وهم مفيدون لحماية المسارات الحساسة أو المقيّدة.

أنواع الحراس

• CanActivate: يحدّد ما إذا كان يمكن تفعيل المسار.
• CanActivateChild: يحمي المسارات الابنة.
• CanDeactivate - يتحقّق قبل مغادرة المسار.
• Resolve - يجلب البيانات مسبقًا قبل تفعيل المسار.

إنشاء حارس

أنشئوا حارسًا باستخدام Angular CLI:

ng generate guard auth

تنفيذ canActivate()

تتحكم الدالة canActivate() في الوصول إلى المسار:

canActivate(): boolean {
  return true; // or false to block navigation
}

استخدام الحراس في المسارات

أضيفوا الحراس إلى المسارات في وحدة التوجيه:

{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }

حارس CanDeactivate

يمنع CanDeactivate مغادرة المسار إذا لم تتحقق شروط معينة، ولذلك فهو مفيد للنماذج:

canDeactivate(): boolean {
  return confirm('Do you really want to leave?');
}

حارس Resolve

يجلب حارس Resolve البيانات قبل تحميل المسار:

resolve(route: ActivatedRouteSnapshot) {
  return this.dataService.getData(route.params.id);
}

الملخص

لقد تعلّمتم كيفية تأمين التنقّل وتحسينه في تطبيقات Angular باستخدام حراس المسارات. واصلوا التقدّم!