Designing a Dynamic Permission Management System for Frontend‑Backend Separated Applications

With the rise of frontend frameworks like React, Angular, and Vue, frontend‑backend separation has become common, but it introduces challenges in permission control, especially when users, roles, and permissions are dynamic.

The proposed solution uses a user‑role‑page permission model for a backend management system, allowing flexible creation, deletion, and adjustment of users, roles, and page permissions.

Pages are defined as frontend routes, while menus are stored in the database and rendered based on the user's permissions, ensuring only authorized menus and pages are displayed.

Fine‑grained function permissions are introduced to control specific actions (e.g., creating a user) beyond page-level access, with each function assigned a unique identifier.

Roles aggregate multiple page and function permissions, and users can be assigned one or more roles, inheriting all associated permissions.

The frontend fetches the complete menu and page structure from the database, filters it according to the logged‑in user's permissions, and uses route guards to prevent unauthorized access.

Backend permission control follows the same hierarchy: user → role → page/function → API, checking the user's permission list before allowing API calls.

An example database schema illustrates the entity tables (users, roles, pages, functions) and their relationship tables, forming the basis for the permission system.