Viganya vya njia ni nini?

Question

Accepted Answer

**Viganya vya njia** ni kazi zinazosikiliza **kama ujifunzaji kwa/kutoka kwa njia unakubali**. Zinafanya kazi kabla ya njia kuamkwa (au kabla ya kuondoka nayo), kuwezesha ukaguzi wa ushahidi, udhibiti wa ruhusa, na onyo za "mabadiliko yasioyohifadhiwa". ## Aina za viganya ```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 ``` ## Kinga ya CanActivate ya uzamili (Angular ya kisasa) ```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 }; ``` Kinga inarudisha `true` (ruhusu), `false` (zuia) au `UrlTree` (badilisha). Angular ya kisasa inatumia **viganya vya uzamili** (kazi rahisi na `inject()`) badala ya zile za zamani zinazotegemeza darasa. ## Kutumia viganya kwenye njia ```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 — kukamatia uharibifu wa data bila kasd ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` Kinga hii ya kawaida inaonekeza watumiaji kabla ya kuondoka kwenye fomu yenye marekebisho yasioyohifadhiwa. ## Viganya vinaweza kuwa vya asynkrona ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## Kwa nini inastahili Viganya ni njia ya kawaida, iliyomwongozo ya kumfanya kazi udhibiti wa kufikia na sheria za ujifunzaji katika Angular — kulinda njia zilizothibitishwa, kukamatia kwa kuzingatiwa/ruhusa, kukamatia uharibifu wa data wakati wa kutoka, na kupakua data mapema (resolvers). Kuweka ukaguzi huu katika viganya (badala ya kusambazwa katika sehemu) inahifadhi usalama na mantiki ya ujifunzaji kuwa thabiti na inayofahamika; `authGuard` kwenye njia zilizolindwa ni kitu ambacho kila programu ya Angular inayofanya kazi nzuri inaendeleza.