javascript / intermediate
Snippet
Routen-Absicherung mit RedirectCommand bei unberechtigtem Zugriff
Funktionale Route-Guards können ein RedirectCommand zurückgeben, um unberechtigte Navigationen sicher zu stoppen und Benutzer zu bestimmten URL-Bäumen umzuleiten. Das Einbetten von Authentifizierungsprüfungen in try-catch-Blöcke stellt sicher, dass unerwartete Fehler beim Parsen von Zugangsdaten kontrolliert auf eine Fehlerroute umgeleitet werden, anstatt den Router zu blockieren.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { inject } from '@angular/core';import { CanActivateFn, Router, RedirectCommand } from '@angular/router';import { AuthService } from './auth.service';export const authGuard: CanActivateFn = (route, state) => {const authService = inject(AuthService);const router = inject(Router);try {if (authService.isAuthenticated()) {return true;}const loginTree = router.parseUrl('/auth/login?redirect=' + encodeURIComponent(state.url));return new RedirectCommand(loginTree, { skipLocationChange: false });} catch (error) {const errorTree = router.parseUrl('/error/session-expired');return new RedirectCommand(errorTree);}};
angular
Erklärung
1
export const authGuard: CanActivateFn = (route, state) => {
Definiert einen funktionalen CanActivateFn-Route-Guard, der den Zielrouten-Snapshot und den Navigationsstatus entgegennimmt.
2
return new RedirectCommand(loginTree, { skipLocationChange: false });
Stoppt die aktuelle Navigation sauber und führt eine Weiterleitung zum analysierten Login-UrlTree aus.
3
catch (error) {
Fängt unvorhergesehene Fehler bei der Authentifizierungsprüfung ab und fängt diese durch Weiterleitung zu einer Session-Ablauf-Route ab.