39. حماية المسارات الفرعية (CanActivateChild)

عند استخدام التوجيه المتداخل (nested routing)، غالباً ما نرغب في حماية جميع المسارات الفرعية تحت مسار أب (على سبيل المثال، جميع المسارات تحت /admin). يسمح لنا CanActivateChild بتطبيق حارس واحد على قسم كامل من التطبيق.

المسارات المتداخلة

نقوم بتعريف المسارات الفرعية داخل مصفوفة children لتعريف مسار أب. يجب أن يحتوي المكون الأب (AdminComponent) على وسم <router-outlet> ليتم عرض الأبناء داخله.

typescript const routes: Routes = [ { path: 'admin', component: AdminComponent, // هذا المكون يعمل كحاوية canActivate: [AdminGuard], // يحمي الوصول إلى AdminComponent نفسه canActivateChild: [AdminGuard], // يحمي الوصول إلى جميع الأبناء children: [ { path: 'users', component: UserManagementComponent }, { path: 'settings', component: SettingsComponent } ] } ];

تنفيذ CanActivateChild

ينفذ الحارس CanActivateChild (بالإضافة إلى أو بدلاً من CanActivate). المنطق عادة ما يكون هو نفسه: فحص التفويض.

typescript // admin.guard.ts import { CanActivate, CanActivateChild, ... }

@Injectable({ providedIn: 'root' }) export class AdminGuard implements CanActivate, CanActivateChild {

// فحص الوصول للمسار الأب canActivate(...) { /* check logic here */ return true; }

// فحص الوصول لأي مسار فرعي (على سبيل المثال، /admin/users أو /admin/settings) canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { // يمكننا استخدام لقطة المسار لفحص أذونات محددة إذا لزم الأمر console.log(Checking child route: ${childRoute.url}); return this.authService.isAdmin(); } }

يضمن هذا أنه إذا لم يكن لدى المستخدم الامتيازات الإدارية اللازمة، فلن يتمكن من الوصول إلى /admin أو /admin/users أو /admin/settings.