Built-in Permission System

The router includes a flexible permission system for implementing role-based access control (RBAC). Protect routes, control navigation, and conditionally show/hide UI elements based on user permissions.

Configuration

Configure the permission system once in your main.js before mounting your app:

Configure permissions 
 
 
Protecting Routes
 
Use createProtectedRoute() to protect routes with permissions - no wrap() needed!
 
ANY Permission (OR Logic)
 
User needs at least ONE of the specified permissions:
 
ANY permission requirement 
 
 
 
ALL Permissions (AND Logic)
 
User needs ALL of the specified permissions:
 
ALL permissions requirement 
 
 
 
Advanced: Using wrap() with createProtectedRouteDefinition()
 
For more control or when combining with other wrap options, use createProtectedRouteDefinition() with wrap():
 
Advanced: Manual wrapping 
 
 
 
Controlling UI Elements
 
Use hasPermission() to show/hide UI elements based on permissions:
 
Conditional UI elements 
 
 
 
Permission Requirements
 
ANY (OR Logic)
 
any: [...]
 
User needs at least ONE of these permissions.
 
ANY logic 
 
 
 
ALL (AND Logic)
 
all: [...]
 
User needs ALL of these permissions.
 
ALL logic 
 
 
 
Practical Examples
 
Complete Permission Setup
 
Complete setup 
 
 
 
Route Configuration
 
Route configuration 
 
 
 
Navigation with Permissions
 
Conditional navigation 
 
 
 
Feature Flags with Permissions
 
Feature flags 
 
 
 
Custom Permission Logic
 
You can implement complex permission checks in your checkPermissions function:
 
Custom permission logic 
 
 
 
Best Practices
 
Configure Early
 
Configure permissions in main.js before mounting your app to ensure the system
					is ready when routes are accessed.
 
Granular Permissions
 
Use specific permission names like users.read, users.write instead
					of broad permissions like admin for better control.
 
Server-Side Validation
 
Client-side permissions are for UX only! Always validate permissions on the server
					for security. Never trust client-side checks alone.
 
Unauthorized Handler
 
Always implement an onUnauthorized handler to gracefully handle
					unauthorized access attempts.
 
Integration with Authentication
 
Combine permissions with your authentication system:
 
Authentication integration 
 
 
 
Try It Live
 
See the permission system in action:
 
Check out the example-permissions/ directory in the repository for a complete
					working example with mock authentication and role-based access control.