Hvad er Route Guards?

Question

Accepted Answer

**Route guards** er funktioner, der styrer, **om navigation til/fra en rute er tilladt**. De køres før en rute aktiveres (eller før du forlader en), hvilket muliggør autentiseringsbekræftelser, tilladelseskontrol og "ugemte ændringer"-prompter. ## Guard-typerne ```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 funktionel CanActivate guard (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 guard returnerer `true` (tillad), `false` (blokér) eller en `UrlTree` (omdiriger). Moderne Angular bruger **funktionelle guards** (rene funktioner med `inject()`) i stedet for de ældre klasse-baserede versioner. ## Anvendelse af guards til 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 utilsigtet datatab ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` Denne klassiske guard advarer brugere, før de navigerer væk fra en formular med ugemte ændringer. ## Guards 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 betyder noget Guards er standardmåden og den centraliserede måde at håndhæve adgangskontrol og navigationregler i Angular — beskytter autentificerede ruter, gates efter rolle/tilladelse, forhindrer datatab ved exit og pre-loading af data (resolvers). At placere disse checks i guards (i stedet for spredt rundt i komponenter) holder sikkerhed og navigationlogik konsistent og deklarativ; `authGuard` på beskyttede ruter er noget, som praktisk talt enhver rigtig Angular-app implementerer.