Što su route guardovi?

Question

Accepted Answer

**Route guardovi** su funkcije koje kontroliraju **da li je navigacija do/od rute dozvoljeno**. Izvršavaju se prije nego što se ruta aktivira (ili prije nego što je napustite), omogućavajući provjere autentičnosti, kontrolu dozvola i upozorenja o "neusprješenim izmjenama". ## Tipovi guardova ```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 ``` ## Funkcionalni CanActivate guard (moderni 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 vraća `true` (dozvoli), `false` (blokiraj) ili `UrlTree` (preusmjeri). Moderni Angular koristi **funkcionalne guardove** (obične funkcije s `inject()`) umjesto starijih guard-a baziranih na klasama. ## Primjena guardova na 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 — spriječavanje slučajnog gubitka podataka ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` Ovaj klasični guard upozoravauje korisnike prije nego što napuste formu s nesprješenim izmjenama. ## Guardovi mogu biti asinkroni ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## Zašto je važno Guardovi su standardan, centraliziran način za provedbu kontrole pristupa i navigacijskih pravila u Angular-u — zaštita autentificiranih ruta, ograničenje prema ulogama/dozvolama, sprječavanje gubitka podataka pri izlasku, i prethodno učitavanje podataka (resolvers). Stavljanje tih provjera u guardove (umjesto da budu razbacane po komponentama) održava sigurnost i logiku navigacije dosljednom i deklarativnom; `authGuard` na zaštićenim rutama je nešto što praktički svaka prova Angular aplikacija implementira.