Designing Dynamic Role‑Based Permission Management for Frontend and Backend Systems

Overview

The rapid rise of front‑end frameworks such as React, Angular and Vue has popularized front‑back separation, but traditional permission solutions focus only on static front‑end role checks and cannot handle dynamic user and role scenarios.

Problem Statement

Typical implementations tie menu visibility to the front‑end router, making it difficult to adjust permissions when routes change, when a route can represent both a menu and a page, or when roles and users are dynamic.

Proposed Architecture

A backend‑driven approach stores menu structures, page definitions, and permission metadata in a database. The front‑end fetches this data after login, renders only the menus the user is allowed to see, and uses route guards to prevent unauthorized navigation.

Key Concepts

Menu vs. Page: Menus are visual containers; pages are actual route components.

Permission Metadata: Each menu/page record includes title, name, path, parent, type, visibility flag, and a flag indicating whether permission validation is required.

Fine‑grained Function Permissions: Beyond page access, individual functions (e.g., "create user") receive unique identifiers that can be independently granted to roles.

Role Assignment: Users can be assigned multiple roles; a user's effective permissions are the union of all role permissions.

Front‑End Implementation

After login, the client retrieves the full menu/permission tree, filters it according to the user's permission list stored in Vuex, and renders the resulting navigation. Route guards check the required permission before allowing navigation to a page.

Back‑End Enforcement

When an API request arrives, the server determines the user's roles, resolves the associated page/function permissions, and verifies that the requested endpoint is permitted. Unauthorized requests receive a failure response, which the front‑end can handle globally.

Database Schema Example

The schema consists of entity tables (users, roles, pages, functions) and association tables linking them, forming a chain: user → role → page/function → API endpoint.

Conclusion

By centralizing permission data in the database and linking pages, functions, and APIs, the system supports dynamic role changes, fine‑grained access control, and consistent security checks across both front‑end and back‑end layers.