Route guards के के हुन्छन्?

Question

Accepted Answer

**Route guards** functions हुन् जो **क्या navigation एक route मा/बाट allowed छ** यो control गर्छन्। तिनीहरू route activate हुनु अगाडि चल्छन् (वा तपाईं एकबाट अलग हुनु अगाडि), authentication checks, permission control, र "unsaved changes" prompts enable गर्छन्। ## Guard types ```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 ``` ## Functional CanActivate guard (आधुनिक 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 }; ``` Guard `true` (allow), `false` (block), वा `UrlTree` (redirect) return गर्छ। आधुनिक Angular ले **functional guards** (plain functions with `inject()`) पुरानो class-based वाले को बजाय प्रयोग गर्छ। ## Routes मा guards लागू गर्दै ```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 — accidentally data loss रोक्दै ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` यो classic guard users लाई unsaved edits सहित form बाट अलग हुनु अगाडि चेतावनी दिन्छ। ## Guards async हुन सक्छन् ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## किन यो महत्त्वपूर्ण छ Guards Angular मा access control र navigation rules लागू गर्नको लागि standard, centralized तरिका हुन् — authenticated routes सुरक्षित गर्दै, role/permission द्वारा gating, exit मा data loss रोक्दै, र data pre-load गर्दै (resolvers)। यी checks guards मा राख्दै (components मा scattered भन्दा) security र navigation logic consistent र declarative राख्छ; protected routes मा `authGuard` केहि virtually हरेक real Angular app ले implement गर्छ।