37. حراس المسار (Route Guards): CanActivate (التفويض)

حراس المسار هي واجهات تُستخدم للتحكم في الوصول إلى التنقل بناءً على شروط محددة (على سبيل المثال، تسجيل دخول المستخدم، امتلاك المستخدم لحقوق المسؤول). يحدد CanActivate ما إذا كان يمكن للمستخدم دخول مسار ما.

1. إنشاء الحارس

الحارس هو خدمة قابلة للحقن تنفذ واجهة CanActivate.

typescript // auth.guard.ts import { Injectable } from '@angular/core'; import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; import { Observable } from 'rxjs'; import { AuthService } from './auth.service';

@Injectable({ providedIn: 'root' }) export class AuthGuard implements CanActivate {

constructor(private authService: AuthService, private router: Router) { }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | boolean { if (this.authService.isLoggedIn()) { return true; // السماح بالوصول } else { // إعادة توجيه المستخدمين غير المصرح لهم إلى صفحة تسجيل الدخول this.router.navigate(['/login']); return false; // حظر الوصول } } }

2. تطبيق الحارس على مسار

قم بتطبيق الحارس باستخدام خاصية مصفوفة canActivate في تهيئة المسار.

typescript import { AuthGuard } from './auth.guard'; import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [ { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] // يتم فحص الحارس قبل تحميل المكون }, { path: 'login', component: LoginComponent } ];

إذا أعادت طريقة AuthGuard.canActivate() القيمة true، فسيستمر التنقل. وإذا أعادت false، فسيتم إلغاء التنقل (وفي مثالنا، يتم إعادة توجيه المستخدم).