Implementing Page and Button Permission Control in Vue.js Using RBAC

The guide starts by distinguishing two common permission models: ACL (user → permission) and RBAC (user → role → permission), highlighting why RBAC is preferred for frontend projects.

It then describes the overall implementation plan, which consists of two parts: page‑level permission control and button‑level permission control.

Page permission control is achieved by fetching a user‑specific route table from the backend, dynamically creating Vue Router routes, and rendering them through a layout consisting of Sidebar.vue , AppMain.vue , and a root layout component. The steps include:

Creating a Vue project with npm install -g @vue/cli and vue create vue-router-demo .

Setting up the basic folder structure ( home.vue , menu.vue , user.vue ) and writing a static route module ( remaining.ts ).

Defining TypeScript declaration files ( router.d.ts ) for custom route types.

Creating the router instance ( router/index.ts ) with createRouter and createWebHashHistory , then exporting a setupRouter function.

Initializing the app in main.ts and mounting it.

Building the layout: Sidebar.vue renders a menu using Element Plus, AppMain.vue displays routed components with <router-view> , and the root layout combines them.

To simulate backend data, a Pinia store ( store/auth.ts ) provides a menus array and a permissions list. A utility formatRoutes converts the backend payload into proper Vue Router objects, and permission.ts adds a router.beforeEach hook that injects these routes at runtime.

Button permission control uses a custom directive v‑hasPermi . The directive checks the current user's permissions array and removes the element if the required permission is missing. Example usage in user.vue shows three authorized buttons and one hidden button.

When the directive cannot hide complex components (e.g., Element Plus tabs), the article proposes an alternative: a helper function checkPermi that returns a boolean, allowing developers to conditionally render elements with v‑if .

Finally, the article summarizes that page permissions are driven by backend‑provided routes, while button permissions rely on custom directives or v‑if checks, offering a flexible RBAC solution for Vue.js admin panels.