Vad är routeguards?

Question

Vad är routeguards?

IT Interview Practice · Accepted Answer

**Routeguards** är funktioner som styr **om navigering till/från en route är tillåten**. De körs innan en route aktiveras (eller innan du lämnar den), vilket möjliggör autentiseringskontroller, behörighetskontroll och "osparade ändringar"-prompter. ## Typerna av guards ```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 funktionell CanActivate guard (moderna 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 returnerar `true` (tillåt), `false` (blockera) eller en `UrlTree` (omdirigera). Moderna Angular använder **funktionella guards** (enkla funktioner med `inject()`) istället för de äldre klassbaserade. ## Applicera guards på 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 — förhindra oavsiktlig dataförlust ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` Denna klassiska guard varnar användare innan de navigerar bort från ett formulär med osparade ändringar. ## Guards kan vara asynkrona ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## Varför det spelar roll Guards är det standard, centraliserade sättet att genomdriva åtkomstkontroll och navigeringsregler i Angular — skydda autentiserade routes, begränsa efter roll/behörighet, förhindra dataförlust vid avslutning och förhämta data (resolvers). Att placera dessa kontroller i guards (istället för utspridda i komponenter) håller säkerhet och navigeringslogik konsekvent och deklarativ; `authGuard` på skyddade routes är något som praktiskt taget alla riktiga Angular-appar implementerar.

Typerna av guards

En funktionell CanActivate guard (moderna Angular)

Applicera guards på routes

CanDeactivate — förhindra oavsiktlig dataförlust

Guards kan vara asynkrona

Varför det spelar roll

Relaterade frågor