How to Implement Dynamic Menu Permissions in Vue with Router and Vuex

Technologies Used

mall-admin-web

implements dynamic menu permission control with two main technologies: Vue Router and Vuex.

Vue Router

Vue Router is the official routing manager for Vue.js. Routes are defined in

src/router/index.js

. For example, the product list page route is defined there, and accessing

http://localhost:8090/#/pms/product

navigates to the product list.

The left-side menu is generated from the router table, so dynamic menu display is achieved by making the router table dynamic.

Vuex

Vuex is a state management pattern for Vue.js applications, providing a centralized store for all component states. Core concepts include:

Store: container for most application state.

State: the single source of truth stored in the store.

Getter: derived state, similar to computed properties.

Mutation: the only way to change state.

Action: dispatches mutations, can contain async logic.

Module: splits the store into modular sections.

Dynamic Menu Permission Control

To implement dynamic menu permissions, modify

src/router/index.js

to split the route table into static routes (always shown) and dynamic routes (shown based on permissions).

Add

src/store/modules/permission.js

to the Vuex store, defining permission-related state such as the routes bound to the left-side menu.

The core

GenerateRoutes

method generates routes accessible to the current user based on menu data, filters, sorts, and commits the resulting routes to Vuex.

Menu and backend route matching is based on route names and the front‑end names stored in the

ums_menu

table.

Update

src/store/index.js

to register the permission module, and modify

src/store/getters.js

to expose convenient aliases for the permission state.

Bind the left‑side menu component (

src/views/layout/components/Sidebar/index.vue

) to the Vuex route state using

mapGetters

, so changes in Vuex automatically update the menu.

After a successful login, dispatch

store.dispatch('GenerateRoutes', { menus, username })

to update Vuex with the routes the user can access.

Permission Management Demo

See the demo at the linked article: Permission Management Feature .

Project Source Code

https://github.com/macrozheng/mall-admin-web

Recommended Reading

IDEA Live Templates for Code Generation

Spring Security Dynamic API Permission Control

Permission Management Feature Overview

What Is Blockchain? Quick Overview

IntelliJ IDEA Debugging Tool Review

Outsourced Developers: Second-Class Citizens?

EasyCode Plugin for IDEA

Lombok: Why It’s So Useful

My Open‑Source Journey on GitHub 2019

Spring Cloud Tutorial Covering Core Components

Spring Cloud Comprehensive Guide

My GitHub Project Reaching 20k Stars