Apa iku route guard?

Question

Accepted Answer

**Route guard** minangka fungsi sing ngontrol **apa navigasi menyang/saka rute iku diidini**. Dhéwé dijalankan sadurungé rute aktif (utawa sadurungé sampeyan ninggal), ngaktifake pamrikse autentikasi, kontrol ijin, lan prompt "owah-owahaning unsaved". ## Jenis-jenis guard ```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 ``` ## Guard CanActivate fungsional (Angular modern) ```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 }; ``` Satiya guard ngmbalekaken `true` (padha), `false` (blok), utawa `UrlTree` (alih). Angular modern nganggo **functional guard** (fungsi prasaja karo `inject()`) tinimbang sing liyane adhedhasar kelas. ## Aplikasi guard ing rute ```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 — nyegah mandheg data kanthi kacelakan ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` Guard klasik iki ngelingake para pangguna sadurungé navigasi adoh saka formulir karo besik sing ora ingsun. ## Guard bisa uga async ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## Mengapa iku penting Guard minangka cara standar, terpusat kanggo neksekusi kontrol akses lan aturan navigasi ing Angular — nglindhungi rute sing diautentikasi, gating dening peran/ijin, nyegah mandheg data ing metu, lan preloading data (resolver). Nggeneake pamrikse iki ing guard (tinimbang kasebar ing komponen) nggawe logika keamanan lan navigasi konsisten lan deklaratif; `authGuard` ing rute sing dilindungi minangka apa-apa sing tinimbang saben app Angular nyata nglekseni.