Route guards ਕੀ ਹਨ?

Question

Route guards ਕੀ ਹਨ?

Accepted Answer

**Route guards** ਫੰਕਸ਼ਨਾਂ ਹਨ ਜੋ **ਕੀ ਕਿਸੇ route ਵੱਲ/ਤੋਂ navigation ਦੀ ਆਗਿਆ ਹੈ** ਇਸ ਨੂੰ ਕੰਟਰੋਲ ਕਰਦੇ ਹਨ। ਉਹ ਰੁੱਟ ਸਰਗਰਮ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਚਲਦੇ ਹਨ (ਜਾਂ ਤੁਸੀਂ ਇੱਕ ਤੋਂ ਅਲਗ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ), authentication checks, permission control, ਅਤੇ "unsaved changes" prompts ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦੇ ਹਨ। ## 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` (ਆਗਿਆ), `false` (ਰੋਕੋ), ਜਾਂ `UrlTree` (ਰੀ-ਡਾਇਰੈਕਟ) ਵਾਪਸ ਕਰਦਾ ਹੈ। ਆਧੁਨਿਕ 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 — ਅਚਾਨਕ data loss ਨੂੰ ਰੋਕੋ ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` ਇਹ ਕਲਾਸਿਕ guard ਯੂਜ਼ਰਾਂ ਨੂੰ 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 ਲਾਗੂ ਕਰਨ ਦਾ ਮਿਆਰੀ, ਕੇਂਦਰੀਕਤ ਅਪਨਾਤ ਤਰੀਕਾ ਹਨ — 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 ਹਰ ਅਸਲੀ Angular app ਲਾਗੂ ਕਰਦਾ ਹੈ।