javascript / expert
Snippet
Funktionale Berechtigungs-Guards mit Redirect-Logik
Moderne Angular-Anwendungen verwenden funktionale Guards anstelle von klassenbasierten. Dieses Snippet zeigt, wie man 'inject' nutzt, um innerhalb einer Funktion auf Services zuzugreifen und ein 'UrlTree' für eine nahtlose Umleitung zurückgibt, wenn Berechtigungen fehlen.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
import { inject } from '@angular/core';import { CanActivateFn, Router } from '@angular/router';import { AuthService } from './auth.service';export const roleGuard: CanActivateFn = (route) => {const authService = inject(AuthService);const router = inject(Router);const expectedRole = route.data['role'];return authService.hasRole(expectedRole)|| router.createUrlTree(['/unauthorized']);};
angular
Erklärung
1
CanActivateFn
Der funktionale Interface-Typ für moderne Angular Route Guards.
2
inject(AuthService)
Verwendet funktionale Dependency Injection, um Instanzen ohne Konstruktor abzurufen.
3
router.createUrlTree(...)
Gibt eine Navigationsanweisung zurück, die der Angular-Router verwendet, um den Benutzer umzuleiten, wenn der Guard fehlschlägt.