Angular Academy · Lektion

Funktionale Routeng Guards

Routen mit funktionalen Guards schützen

Funktionale Routeng Guards ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was sind Routenguards

Guards entscheiden, ob die Navigation fortgesetzt werden darf: Sie schützen Routen durch Authentifizierung, bestätigen das Verlassen eines Formulars oder beschränken den Zugriff nach Rolle. Modernes Angular verwendet funktionale Guards – einfache Funktionen ohne Klassen.

CanActivateFn

Eine CanActivateFn gibt true zurück, um die Navigation zu erlauben, false, um sie zu blockieren, einen UrlTree zur Weiterleitung oder ein Observable bzw. Promise mit einem dieser Werte.

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

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

Einen Guard mit einer Route verbinden

Verknüpfen Sie Guards mit canActivate (einem Array, sodass Sie mehrere aneinanderreihen können).

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

Mit UrlTree umleiten

Die Rückgabe eines UrlTree (aus router.createUrlTree oder parseUrl) blockiert und leitet in einem Schritt um.

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

Asynchrone Guards

Guards können ein Observable zurückgeben – der Router wartet auf den ersten Wert und schließt es anschließend ab.

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

Routeninformationen in einem Guard abrufen

Eine CanActivateFn erhält den ActivatedRouteSnapshot und den RouterStateSnapshot. Dadurch können Sie Parameter, Daten und die versuchte URL auslesen.

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

canMatch-Guards

CanMatchFn entscheidet, ob eine Routendefinition überhaupt übereinstimmt – nützlich, um Routen anhand eines Feature-Flags auszutauschen oder nur bei entsprechender Berechtigung lazy zu laden.

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

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

canDeactivate-Guards

CanDeactivateFn wird beim Verlassen einer Route ausgeführt – ideal für Bestätigungen bei ungespeicherten Änderungen. Die Funktion erhält die Component-Instanz.

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

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

Mehrere Guards aneinanderreihen

Alle Guards im Array müssen die Navigation erlauben. Sie werden gemeinsam ausgeführt; wenn einer false oder einen UrlTree zurückgibt, wird die Navigation blockiert oder umgeleitet.

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

Warum funktionale Guards besser sind als klassenbasierte

Funktionale Guards sind einfacher: kein @Injectable-Boilerplate, einfache Verwendung von inject(), kombinierbar und tree-shakable. Klassenbasierte CanActivate-Interfaces sind veraltet.

Guards und untergeordnete Routen

canActivateChild schützt alle untergeordneten Routen eines übergeordneten Elements an einer zentralen Stelle. Dadurch müssen Sie den Guard nicht bei jedem untergeordneten Element wiederholen.

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

Kurzer Check

Testen Sie Ihr Verständnis funktionaler Guards.

Zusammenfassung: Funktionale Route-Guards

Funktionale Guards steuern die Navigation mit einfachen Funktionen.

CanActivateFn: erlauben, blockieren oder umleiten (UrlTree).
CanMatchFn: prüft, ob eine Route überhaupt übereinstimmt.
CanDeactivateFn: bestätigt das Verlassen.
Verwenden Sie inject() für Services und reihen Sie Guards in Arrays aneinander.

Als Nächstes: Router-Ereignisse und Navigation.

Häufig gestellte Fragen

Ist die Lektion „Funktionale Routeng Guards“ kostenlos?

Ja — der vollständige Text von „Funktionale Routeng Guards“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Funktionale Routeng Guards“?

Routen mit funktionalen Guards schützen Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Funktionale Routeng Guards“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy