Was sind Route Guards?

Question

Accepted Answer

**Route guards** sind Funktionen, die steuern, **ob die Navigation zu/von einer Route zulässig ist**. Sie laufen ab, bevor eine Route aktiviert wird (oder bevor Sie diese verlassen), und ermöglichen Authentifizierungsprüfungen, Berechtigungskontrolle und "Ungespeicherte Änderungen"-Aufforderungen. ## Die Guard-Typen ```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 ``` ## Ein funktionaler CanActivate Guard (modernes 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 }; ``` Ein Guard gibt `true` (erlauben), `false` (blockieren) oder einen `UrlTree` (umleiten) zurück. Modernes Angular verwendet **funktionale Guards** (reine Funktionen mit `inject()`) statt der älteren klassenbasierten Varianten. ## Guards auf Routen anwenden ```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 — versehentlichen Datenverlust verhindern ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` Dieser klassische Guard warnt Benutzer, bevor sie sich von einem Formular mit ungespeicherten Änderungen entfernen. ## Guards können asynchron sein ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## Warum es wichtig ist Guards sind die Standard- und zentralisierte Methode, um Zugriffskontrolle und Navigationregeln in Angular durchzusetzen — Schutz authentifizierter Routen, Gating nach Rolle/Berechtigung, Verhinderung von Datenverlust beim Beenden und Vorausladen von Daten (Resolvers). Das Platzieren dieser Prüfungen in Guards (statt verteilt in Komponenten) hält Sicherheits- und Navigationlogik konsistent und deklarativ; der `authGuard` auf geschützten Routen ist etwas, das praktisch jede echte Angular-App implementiert.