Wat zijn route guards?

Question

Accepted Answer

**Route guards** zijn functies die bepalen **of navigatie naar/van een route is toegestaan**. Ze worden uitgevoerd voordat een route activeert (of voordat je er één verlaat), waardoor authenticatiechecks, machtigingscontrole en "unsaved changes"-prompts mogelijk zijn. ## Waarom het belangrijk is ```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 ``` ## A functional CanActivate guard (modern 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 }; ``` Een guard retourneert `true` (toestaan), `false` (blokkeren) of een `UrlTree` (omleiding). Modern Angular gebruikt **functional guards** (normale functies met `inject()`) in plaats van de oudere class-gebaseerde variant. ## Guards toepassen op routes ```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 — prevent accidental data loss ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` Deze klassieke guard waarschuwt gebruikers voordat zij wegnavigeren van een formulier met onopgeslagen wijzigingen. ## Guards kunnen asynchroon zijn ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## Waarom het belangrijk is Guards zijn de standaard, gecentraliseerde manier om toegangscontrole en navigatieregels in Angular af te dwingen — geverifieerde routes beschermen, toegang beperken op basis van rol/machtiging, gegevensverlies bij afsluiting voorkomen en gegevens vooraf laden (resolvers). Het plaatsen van deze controles in guards (in plaats van verspreid over componenten) houdt beveiligings- en navigatielogica consistent en declaratief; de `authGuard` op beveiligde routes is iets wat vrijwel elke echte Angular-app implementeert.