#101 UI: Permission-Based Element Visibility
Description
EditImplement permission-based UI element visibility system.
Location: api/ui/templates/components/admin_panel/admin_panel.js (or global utils)
Features:
- Check user permissions from JWT claims
- Show/hide elements based on permissions
- Disable buttons if no permission (with tooltip)
- Hide entire nav items if no access
Implementation:
- data-requires-permission='user:create' attribute
- data-requires-role='tenant_admin' attribute
- data-requires-any='["admin:tokens", "admin:api_keys"]'
JavaScript API:
- permissions.can(permissionName)
- permissions.hasRole(roleName)
- permissions.isAdmin()
- permissions.isTenantAdmin()
- permissions.isSystemAdmin()
Auto-Apply:
- On page load, scan for data-requires-* attributes
- Hide/disable elements user cannot access
- Show tooltip on disabled elements: 'You need X permission'
Security Note:
- Frontend visibility is UX only
- Backend must always verify permissions
- Never trust frontend permission checks
With ultra attention to details and correctness.
Before closing: write comment summarizing implementation with screenshot.
Comments
Loading comments...
Context
Loading context...
Audit History
View AllLoading audit history...