Angular Academy · leksjon

Funksjonelle rutevakter

Beskytt ruter med funksjonelle rutevakter.

Leksjon 3 av 413 trinn

Funksjonelle rutevakter er en gratis leksjon i Angular Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Angular Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Hva er rutebeskyttere

Beskyttere avgjør om navigeringen kan fortsette: beskytt ruter med autentisering, be om bekreftelse før et skjema forlates, eller begrens tilgang basert på rolle. Moderne Angular bruker funksjonelle beskyttere – vanlige funksjoner, ikke klasser.

CanActivateFn

En CanActivateFn returnerer true for å tillate navigering, false for å blokkere, et UrlTree for å omdirigere, eller en observable/promise med én av disse verdiene.

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

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

Koble en guard til en rute

Koble til guards med canActivate (en array, slik at De kan sette sammen flere).

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

Omdirigering med UrlTree

Ved å returnere en UrlTree (fra router.createUrlTree eller parseUrl) blokkeres og omdirigeres navigasjonen i ett trinn.

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 verdien og fullfører deretter.

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

Hente ruteinformasjon i en guard

En CanActivateFn mottar ActivatedRouteSnapshot og RouterStateSnapshot, slik at De kan lese parametere, data og URL-en det ble forsøkt å navigere til.

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

canMatch-guards

CanMatchFn avgjør om en rutedefinisjon i det hele tatt samsvarer – nyttig for å bytte ruter med et feature flag eller lazy-loade bare når det er tillatt.

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

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

canDeactivate-guards

CanDeactivateFn kjører når De forlater en rute – perfekt for bekreftelser ved ulagrede endringer. Den mottar komponentinstansen.

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

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

Sette sammen flere guards

Alle guards i arrayen må tillate navigasjonen. De kjører sammen; hvis en av dem returnerer false eller en UrlTree, blokkeres eller omdirigeres navigasjonen.

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

Hvorfor funksjonelle guards fremfor klassebaserte guards

Funksjonelle guards er enklere: ingen @Injectable-standardkode, enkel bruk av inject(), de kan settes sammen og kan fjernes av tree-shaking. Klassebaserte CanActivate-grensesnitt er foreldet.

Guards og underordnede ruter

canActivateChild beskytter alle underordnede ruter til en overordnet rute på ett sted, slik at De slipper å gjenta guarden for hvert barn.

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

Hurtigsjekk

Test forståelsen Deres av funksjonelle guards.

Besvar den i den interaktive leksjonen

Oppsummering: Funksjonelle route guards

Funksjonelle guards styrer navigasjonen med vanlige funksjoner.

CanActivateFn: tillat/blokker/omdiriger (UrlTree).
CanMatchFn: avgjør om en rute i det hele tatt samsvarer.
CanDeactivateFn: bekreft at De vil forlate ruten.
Bruk inject() for tjenester, og sett sammen guards i arrayer.

Neste: router-hendelser og navigasjon.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 38
Leksjoner: 144

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Funksjonelle rutevakter» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Angular Academy, inkludert «Funksjonelle rutevakter», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Funksjonelle rutevakter»?

Beskytt ruter med funksjonelle rutevakter. Du øver på Angular Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Angular Academy?

Ingen tidligere erfaring er nødvendig. Angular Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Funksjonelle rutevakter»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Angular Academy-leksjonen?

Ja. Alle Angular Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Angular Academy