Route Guards in Angular

In dieser Lektion erfahren Sie, wie Sie Routen in Angular-Anwendungen mithilfe von Route Guards absichern.

Was sind Route Guards?

Route Guards steuern den Zugriff auf Routen in Angular. Sie eignen sich, um sensible oder eingeschränkte Routen zu schützen.

Arten von Guards

• CanActivate: Bestimmt, ob eine Route aktiviert werden kann.
• CanActivateChild: Sichert untergeordnete Routen.
• CanDeactivate – Prüft vor dem Verlassen einer Route.
• Resolve – Ruft Daten vor der Aktivierung einer Route ab.

Einen Guard erstellen

Erstellen Sie einen Guard mit Angular CLI:

ng generate guard auth

canActivate() implementieren

Die Methode canActivate() steuert den Zugriff auf eine Route:

canActivate(): boolean {
  return true; // or false to block navigation
}

Guards in Routen verwenden

Fügen Sie Ihrem Routing-Modul Guards zu den Routen hinzu:

{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }

CanDeactivate-Guard

CanDeactivate verhindert das Verlassen einer Route, wenn bestimmte Bedingungen nicht erfüllt sind, und eignet sich beispielsweise für Formulare:

canDeactivate(): boolean {
  return confirm('Do you really want to leave?');
}

Resolve-Guard

Der Resolve-Guard ruft Daten ab, bevor eine Route geladen wird:

resolve(route: ActivatedRouteSnapshot) {
  return this.dataService.getData(route.params.id);
}

Zusammenfassung

Sie haben gelernt, wie Sie die Navigation in Ihren Angular-Apps mit Route Guards absichern und erweitern. Machen Sie weiter!