Hva er rutevakter?

Question

Hva er rutevakter?

Accepted Answer

**Rutevakter** er funksjoner som kontrollerer **hvorvidt navigering til/fra en rute er tillatt**. De kjøres før en rute aktiveres (eller før du forlater en), noe som gjør det mulig med autentiseringskontroller, tilgangskontroll og "ulagrede endringer"-oppfordringer. ## Vakttyper ```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 ``` ## En funksjonell CanActivate-vakt (moderne 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 }; ``` En vakt returnerer `true` (tillat), `false` (blokker) eller en `UrlTree` (omdirigering). Moderne Angular bruker **funksjonelle vakter** (vanlige funksjoner med `inject()`) i stedet for de eldre klassebaserte variantene. ## Bruke vakter på ruter ```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 — forhindre utilsiktet datatap ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` Denne klassiske vakten advarer brukere før de navigerer bort fra et skjema med ulagrede endringer. ## Vakter kan være asynkrone ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## Hvorfor det er viktig Vakter er den standard, sentraliserte måten å håndheve tilgangskontroll og navigasjonsregler på i Angular — beskytte autentiserte ruter, begrense etter rolle/tillatelse, forhindre datatap ved utgang og forhåndslaste data (resolvers). Å plassere disse kontrollene i vakter (i stedet for spredt i komponenter) holder sikkerhet og navigasjonslogikk konsistent og deklarativ; `authGuard` på beskyttede ruter er noe som praktisk talt alle virkelige Angular-apper implementerer.