Angular Academy · Les

Functionele routeguards

Bescherm routes met functionele guards

Les 3 van 413 stappen

Functionele routeguards is een gratis Angular Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Angular Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Angular Academy bevat in totaal 4 lessen.

Wat zijn routebewakers

Bewakers bepalen of navigatie mag doorgaan: beveilig routes met authenticatie, vraag om bevestiging voordat je een formulier verlaat of beperk toegang op basis van een rol. Modern Angular gebruikt functionele bewakers — gewone functies, geen classes.

CanActivateFn

Een CanActivateFn retourneert true om toegang toe te staan, false om te blokkeren, een UrlTree om door te sturen, of een observable of promise daarvan.

import { CanActivateFn } from '@angular/router';
import { inject } from '@angular/core';

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.isLoggedIn();
};

Een guard aan een route koppelen

Koppel guards met canActivate (een array, zodat je er meerdere kunt combineren).

export const routes = [
  { path: 'dashboard', component: DashboardComponent,
    canActivate: [authGuard] }
];

Omleiden met UrlTree

Een UrlTree retourneren (van router.createUrlTree of parseUrl) blokkeert en leidt in één stap om.

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  const router = inject(Router);
  return auth.isLoggedIn() ? true : router.parseUrl('/login');
};

Asynchrone guards

Guards kunnen een observable retourneren — de router wacht op de eerste waarde en voltooit daarna.

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.checkSession$().pipe(
    map(ok => ok ? true : inject(Router).parseUrl('/login'))
  );
};

Routegegevens in een guard openen

Een CanActivateFn ontvangt de ActivatedRouteSnapshot en RouterStateSnapshot, zodat je parameters, gegevens en de geprobeerde URL kunt lezen.

export const roleGuard: CanActivateFn = (route, state) => {
  const needed = route.data['role'];
  const auth = inject(AuthService);
  return auth.hasRole(needed);
};

canMatch-guards

CanMatchFn bepaalt of een routedefinitie überhaupt overeenkomt — handig om routes te wisselen op basis van een featureflag of alleen te laden wanneer dat is toegestaan.

import { CanMatchFn } from '@angular/router';

export const featureGuard: CanMatchFn = () =>
  inject(FeatureService).enabled('beta');

canDeactivate-guards

CanDeactivateFn wordt uitgevoerd wanneer je een route verlaat — ideaal voor bevestigingen bij niet-opgeslagen wijzigingen. De functie ontvangt de componentinstantie.

import { CanDeactivateFn } from '@angular/router';

export const unsavedGuard: CanDeactivateFn<FormComponent> =
  (component) => component.isPristine() || confirm('Discard changes?');

Meerdere guards combineren

Alle guards in de array moeten navigatie toestaan. Ze worden samen uitgevoerd; als een ervan false of een UrlTree retourneert, wordt navigatie geblokkeerd of omgeleid.

canActivate: [authGuard, roleGuard]
// both must pass

Waarom functionele guards beter zijn dan class-based guards

Functionele guards zijn eenvoudiger: geen overbodige @Injectable-code, eenvoudig gebruik van inject(), samenstelbaar en tree-shakable. Class-based CanActivate-interfaces zijn verouderd.

Guards en childroutes

canActivateChild beschermt alle childroutes van een parent op één plek, zodat je de guard niet op elke child hoeft te herhalen.

{ path: 'admin', canActivateChild: [authGuard],
  children: [ /* all protected */ ] }

Korte controle

Test je begrip van functionele guards.

Beantwoord dit in de interactieve les

Samenvatting: functionele routeguards

Functionele guards regelen navigatie met gewone functies.

CanActivateFn: toestaan/blokkeren/omleiden (UrlTree).
CanMatchFn: bepalen of een route überhaupt overeenkomt.
CanDeactivateFn: het verlaten bevestigen.
Gebruik inject() voor services en combineer guards in arrays.

Hierna: routergebeurtenissen en navigatie.

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 38
Lessen: 144

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Functionele routeguards” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “Functionele routeguards”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Angular Academy bevat in totaal 4 lessen.

Wat leer ik in “Functionele routeguards”?

Bescherm routes met functionele guards Je oefent met Angular Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Angular Academy te beginnen?

Ervaring vooraf is niet nodig. Angular Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “Functionele routeguards”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Angular Academy?

Ja. Elke les over Angular Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Angular Academy