Angular Academy · Lektion

Funktionelle rutevagter

Beskyt ruter med funktionelle vagter.

Lektion 3 af 413 trin

Funktionelle rutevagter er en gratis Angular Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Angular Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Angular Academy-kurset indeholder 4 lektioner i alt.

Hvad er rutevagter

Vagter afgør, om navigationen må fortsætte: Beskyt ruter med godkendelse, bed om bekræftelse, før en formular forlades, eller begræns adgangen efter rolle. Moderne Angular bruger funktionelle vagter — almindelige funktioner, ikke klasser.

CanActivateFn

En CanActivateFn returnerer true for at tillade, false for at blokere, et UrlTree for at omdirigere eller en observable eller et løfte med en af disse værdier.

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

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

Knyt en guard til en rute

Tilknyt guards med canActivate (et array, så du kan kæde flere sammen).

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

Omdirigering med UrlTree

Hvis du returnerer et UrlTree (fra router.createUrlTree eller parseUrl), blokerer og omdirigerer du i ét trin.

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

Asynkrone guards

Guards kan returnere en observable — routeren venter på den første værdi og afslutter derefter.

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

Adgang til oplysninger om ruten i en guard

En CanActivateFn modtager ActivatedRouteSnapshot og RouterStateSnapshot, så du kan læse parametre, data og den forsøgte URL.

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

canMatch-guards

CanMatchFn afgør, om en rutedefinition overhovedet matcher — nyttigt til at skifte ruter ud fra et funktionsflag eller kun lazy-loade, når det er tilladt.

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

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

canDeactivate-guards

CanDeactivateFn kører, når du forlader en rute — perfekt til bekræftelser ved ændringer, der ikke er gemt. Den modtager komponentinstansen.

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

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

Kædning af flere guards

Alle guards i arrayet skal tillade navigationen. De kører sammen; hvis en af dem returnerer false eller et UrlTree, blokeres eller omdirigeres navigationen.

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

Hvorfor funktionelle guards frem for klassebaserede guards

Funktionelle guards er enklere: ingen boilerplate med @Injectable, nem brug af inject(), de kan komponeres og kan tree-shakes. Klassebaserede CanActivate-interfaces er forældede.

Guards og underordnede ruter

canActivateChild beskytter alle underordnede ruter til en overordnet rute ét sted, så du undgår at gentage guarden for hver underordnet rute.

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

Hurtig kontrol

Afprøv din forståelse af funktionelle guards.

Besvar den i den interaktive lektion

Opsummering: Funktionelle route-guards

Funktionelle guards styrer navigation med almindelige funktioner.

CanActivateFn: tillad/bloker/omdiriger (UrlTree).
CanMatchFn: afgør, om en rute overhovedet matcher.
CanDeactivateFn: bekræft, at du forlader ruten.
Brug inject() til services, og kæd guards sammen i arrays.

Næste: routerhændelser og navigation.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 38
Lektioner: 144

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Funktionelle rutevagter” gratis?

Ja — alle 3 lektioner i læringssporet Angular Academy, inklusive “Funktionelle rutevagter”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Angular Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Funktionelle rutevagter”?

Beskyt ruter med funktionelle vagter. Du øver dig i Angular Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Angular Academy?

Der kræves ingen tidligere erfaring. Angular Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Funktionelle rutevagter”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Angular Academy-lektion?

Ja. Alle Angular Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Angular Academy