javascript / expert
Snippet
Proxy-Basierte Dynamische Zweigauswertung für Reaktive Navigations-Guards im Next.js App-Router
Dieses Muster nutzt JavaScript Proxy-Objekte, um die Kontrollflussauswertung in der Next.js-Middleware dynamisch abzufangen. Anstatt geschachtelte Bedingungen oder statische Maps zu bauen, werten Property-Getter Berechtigungsprüfungen (z. B. guard.canAccessAdmin) dynamisch über Traps aus.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
export function createPermissionGuard(userRoles) {return new Proxy({}, {get(target, prop) {if (typeof prop !== 'string') return false;const requiredRole = prop.toLowerCase().replace(/^canaccess/, '');return userRoles.includes(requiredRole);}});}export async function middleware(req) {const roles = req.headers.get('x-user-roles')?.split(',') || [];const guard = createPermissionGuard(roles);if (!guard.canAccessAdmin && req.nextUrl.pathname.startsWith('/admin')) {return NextResponse.redirect(new URL('/unauthorized', req.url));}return NextResponse.next();}
nextjs
Erklärung
1
return new Proxy({}, {
Erstellt einen Objekt-Proxy mit Handler zur Überwachung beliebiger Eigenschaftszugriffe.
2
get(target, prop) {
Fängt dynamische Eigenschaftsabfragen auf der Proxy-Instanz ab.
3
if (!guard.canAccessAdmin && req.nextUrl.pathname.startsWith('/admin')) {
Wertet dynamische Berechtigungszweige aus, um den Routenfluss zu steuern.