javascript / intermediate
Snippet
Funktionale Routenabsicherung mit Authentifizierungsstatus-Prüfung
Funktionale Route-Guards in Angular nutzen `inject()` innerhalb von Closure-Funktionen, um clientseitige Zugriffskontrollen durchzusetzen und unbefugte Navigation auf sichere Routen umzuleiten.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { inject } from '@angular/core';import { CanActivateFn, Router } from '@angular/router';import { AuthService } from './auth.service';export const requireRoleGuard = (requiredRole: string): CanActivateFn => {return (route, state) => {const authService = inject(AuthService);const router = inject(Router);if (authService.hasRole(requiredRole)) {return true;}return router.createUrlTree(['/unauthorized'], { queryParams: { returnUrl: state.url } });};};
angular
Erklärung
1
export const requireRoleGuard = (requiredRole: string): CanActivateFn => {
Erstellt eine parametrisierte Factory-Funktion, die einen funktionalen CanActivateFn-Guard zurückgibt.
2
const authService = inject(AuthService);
Bezieht Dependency-Injection-Tokens direkt innerhalb des Ausführungskontexts des Guards.
3
return router.createUrlTree(['/unauthorized'], { queryParams: { returnUrl: state.url } });
Leitet unautorisierte Anfragen sicher um, indem ein navigierbarer UrlTree zurückgegeben wird.