ما هي Route Guards؟

Question

ما هي Route Guards؟

Accepted Answer

**Route guards** هي دوال تتحكم في **ما إذا كان التنقل إلى/من مسار معين مسموحاً به أم لا**. يتم تنفيذها قبل تفعيل مسار (أو قبل مغادرتك لأحدها)، مما يتيح فحوصات المصادقة والتحكم في الأذونات ونوافذ "التغييرات غير المحفوظة". ## أنواع الحماة ```text CanActivate → can the user enter this route? (auth/permission check) CanActivateChild → same, for child routes CanDeactivate → can the user LEAVE? ("you have unsaved changes") CanMatch → should this route even be matched? (feature flags, role-based) resolve → pre-fetch data BEFORE the route activates ``` ## دالة CanActivate حديثة (Angular حديث) ```ts import { CanActivateFn, Router } from "@angular/router"; import { inject } from "@angular/core"; export const authGuard: CanActivateFn = (route, state) => { const auth = inject(AuthService); const router = inject(Router); if (auth.isLoggedIn()) { return true; // allow navigation } return router.createUrlTree(["/login"]); // redirect to login }; ``` تعيد الحامي `true` (السماح) أو `false` (الحجب) أو `UrlTree` (إعادة التوجيه). يستخدم Angular الحديث **حماة وظيفية** (دوال عادية مع `inject()`) بدلاً من القديمة القائمة على الفئات. ## تطبيق الحماة على المسارات ```ts export const routes: Routes = [ { path: "dashboard", component: DashboardComponent, canActivate: [authGuard], // protect this route }, { path: "admin", component: AdminComponent, canMatch: [roleGuard], // only match for admins }, ]; ``` ## CanDeactivate — منع فقدان البيانات العرضي ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` هذه الحامي الكلاسيكية تحذر المستخدمين قبل التنقل بعيداً عن نموذج يحتوي على تعديلات غير محفوظة. ## يمكن للحماة أن تكون غير متزامنة ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## لماذا يأتي هذا في المقام الأول الحماة هي الطريقة القياسية والمركزية لفرض التحكم في الوصول وقواعد التنقل في Angular — حماية المسارات المصادق عليها وحصر الوصول حسب الدور/الإذن ومنع فقدان البيانات عند المغادرة وتحميل البيانات مسبقاً (resolvers). يحافظ وضع هذه الفحوصات في الحماة (بدلاً من تشتتها في المكونات) على منطق الأمان والتنقل متسقاً وتصريحياً؛ `authGuard` على المسارات المحمية هو شيء تطبق كل تطبيقات Angular الحقيقية تقريباً.