RBAC for back-office systems: frontend visibility is not security

A maintainable permission system gives stable meaning to roles, resources, and actions. The frontend owns menu, route, section, and control visibility; the backend owns final authorization for data and write operations.

Permission model

User ──has──> Role ──grants──> Permission code
                              ├─ page:activity:list
                              ├─ activity:create
                              ├─ activity:publish
                              └─ activity:rollback

Permission codes should describe business capabilities rather than component names or DOM structure. A server-driven menu still needs to map to the same permission vocabulary used by pages and operations.

Frontend flow

1. Log in or restore the session.
2. Load the user, roles, and permission codes.
3. Generate or filter dynamic routes and menus.
4. Block unauthorized navigation in the route guard.
5. Use a shared component or directive for operation visibility.
6. Treat 401 as an invalid session and 403 as insufficient permission.

<PermissionGate permission="activity:publish">
  <button type="button" @click="publish">Publish</button>
</PermissionGate>

A component can express disabled reasons, placeholders, and accessible text more clearly than direct DOM removal. Neither approach replaces server authorization.

Caching and role switching

Permission caches should include user, tenant, and version dimensions. On logout or role switch, clear the old store, remove dynamic routes, terminate in-flight requests, and load permissions again. Otherwise stale pages, operations, or data can survive into the next identity.

Test matrix

• No session, expired session, and failed permission API.
• Page access without publish permission.
• Old routes removed after role switching.
• Direct navigation to an unauthorized URL.
• Frontend visibility mistakes while the backend still rejects the operation.
• Partial authorization in bulk operations.

For the routing side, see Vue Router and RBAC.