Menene route guards?

Question

Accepted Answer

**Route guards** ayyuka ne da ke kontrol **ko ba'a samun izini na yawo zuwa/daga waje ba**. Suna takari kafin alamar haɗa (ko kafin ki bar ɗaya), yana baiwa ikon bincikewa na gida, kontrol izini, da amanar "sauyi da ba a ajiye ba". ## Nau'ikan tsaro ```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 guard na aiki (Angular na zamani) ```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 }; ``` Tsaro yana komawa `true` (ba da izini), `false` (katse) ko `UrlTree` (dawo). Angular na zamani yana amfani da **fassarar aiki na tsaro** (ayyuka mai sauƙi tare da `inject()`) maimakon tsofaffin nau'ikan aiki. ## Amfani da tsaro zuwa abubuwa ```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 — kauce wa sakatar da data ba tare da yama ba ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` Bu classic guard da ke gargaje masu amfani kafin su tafi daga nuni da canja fuskantar ba a ajiye ba. ## Tsaro na iya zama asameyu ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## Me yasa yake mahimmanci Tsaro shine tsarin zaki-zaki, na tsakiya don aiwatarwa kontrolin kulacinki da ka'idodin yawo a Angular — kare bugun gida na ba da izini, toshe ta hanyar rola/izini, kauce wa sakatar da data a waje, da gaida data (resolvers). Sanya waɗannan karaye a cikin tsaro (wajen jajirwa a cikin abubuwa) yana kiyaye tsaro da loohika na yawo zama daidai da bayyanawa; tsaro na `authGuard` akan buga kargatua waje shine abin da kusan kowane tunani Angular ga gaske yana aiwatarwa.