Co jsou Route Guards?

Question

IT Interview Practice · Accepted Answer

**Route guards** jsou funkce, které řídí, **zda je povolena navigace na trasu/ze trasy**. Spouštějí se před aktivací trasy (nebo předtím, než ji opustíte), což umožňuje ověření autentizace, kontrolu oprávnění a výzvy "neuložených změn". ## Typy strážců ```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 ``` ## Funkční strážce CanActivate (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 }; ``` Strážce vrací `true` (povolit), `false` (blokovat) nebo `UrlTree` (přesměrovat). Moderní Angular používá **funkční strážce** (jednoduché funkce s `inject()`) místo starších tříd-based verzí. ## Aplikace strážců na trasy ```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 — zabránit nechtěné ztrátě dat ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` Tento klasický strážce upozorní uživatele, než se navigují pryč z formuláře s neuloženými úpravami. ## Strážci mohou být asynchronní ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## Proč na tom záleží Strážci jsou standardním a centralizovaným způsobem, jak vynucovat kontrolu přístupu a pravidla navigace v Angular — ochrana ověřených tras, omezení podle role/oprávnění, zabránění ztrátě dat při výstupu a předběžné načítání dat (resolvers). Umístění těchto kontrol do strážců (místo jejich rozptýlení v komponentách) udržuje logiku zabezpečení a navigace konzistentní a deklarativní; `authGuard` na chráněných trasách je něco, co implementuje prakticky každá skutečná Angular aplikace.

Typy strážců

Funkční strážce CanActivate (moderní Angular)

Aplikace strážců na trasy

CanDeactivate — zabránit nechtěné ztrátě dat

Strážci mohou být asynchronní

Proč na tom záleží

Související otázky