Vue - Visualize user roles, menu permissions, and button permission configurations (dynamically obtain menu routing)

GitHub Demo address

online preview

Preface

Regarding the dynamic acquisition of routes, the scheme Vue - vue-admin-template template project modification has been given here : Dynamic acquisition of menu routes
. On this basis, a system management module has been added, including user management, role management, menu management, and dictionary management. It contains button permission configuration, data and network requests are implemented through mock
具体代码请看demo!!!

Local permission control, specifically by querying user information to obtain user roles, filtering locally configured routes through roles in the route guard, and generating a route array for routes that comply with role permissions.

The idea of ​​dynamically obtaining menu routing is actually the same, except that the routing array is obtained from the server, by querying the menu list of a certain role, and then converting the obtained menu array into a routing array in the routing guard.

The dynamic routing implementation is written with reference to the issues of vue-element-admin . Related issues:
vue-element-admin/issues/167
vue-element-admin/issues/293
vue-element-admin/issues/3326#issuecomment-832852647

key point

Mainly in the interface menu list, change the parent componentto Layoutthe string 'Layout',
childrenthe component: () => import('@/views/table/index'), change to the string 'table/index', and then get to the data and then transfer it back
!!!!!!!!!!!! 接口格式可以根据项目需要自定义，不一定非得按照这里的来

Actual route:

  {
    
    
    path: '/system',
    name: 'system',
    // component: Layout,
    component: 'Layout',
    meta: {
    
     title: 'System Settings', icon: 'table', roles: ['admin'] },
    children: [
      {
    
    
        path: 'user',
        name: 'user',
        // component: () => import('@/views/system/user'),
        component: 'system/user',
        meta: {
    
    
          title: 'User Management',
          roles: ['admin'],
          buttons: ['user-add', 'user-edit', 'user-look', 'user-export', 'user-delete', 'user-assign', 'user-resetPwd']
        }
      }
    ]
  },

Route format returned by the interface:

  {
    
    
    id: '22',
    code: '/system',
    title: '系统设置',
    parentId: '',
    parentTitle: '',
    menuType: 'catalog', // catalog | menu | button
    component: 'Layout', // "Layout" | "system/menu" (文件路径: src/views/) | ""
    // component: Layout,
    icon: 'el-icon-setting',
    sort: 1,
    hidden: false,
    level: 1,
    children: [
      {
    
    
        id: '22-1',
        code: 'user',
        title: '用户管理',
        parentId: '22',
        parentTitle: '系统设置',
        menuType: 'menu',
        component: 'system/user',
        // component: () => import('@/views/system/user'),
        icon: '',
        sort: 2,
        hidden: false,
        level: 2,
        children: [],
        buttons: ['user-add', 'user-edit', 'user-look', 'user-export', 'user-delete', 'user-assign', 'user-resetPwd']
      },
      {
    
    
        id: '22-2',
        code: 'role',
        title: '角色管理',
        parentId: '22',
        parentTitle: '系统设置',
        menuType: 'menu',
        component: 'system/role',
        icon: '',
        sort: 3,
        hidden: false,
        level: 2,
        children: [],
        buttons: ['role-add', 'role-edit', 'role-look', 'role-delete', 'role-setting']
      },
      {
    
    
        id: '22-3',
        code: 'menu',
        title: '菜单管理',
        parentId: '22',
        parentTitle: '系统设置',
        menuType: 'menu',
        component: 'system/menu',
        icon: '',
        sort: 4,
        hidden: false,
        level: 2,
        children: [],
        buttons: ['menu-add', 'menu-edit', 'menu-look', 'menu-delete']
      },
      {
    
    
        id: '22-4',
        code: 'dict',
        title: '字典管理',
        parentId: '22',
        parentTitle: '系统设置',
        menuType: 'menu',
        component: 'system/dict',
        icon: '',
        sort: 5,
        hidden: false,
        level: 2,
        children: [],
        buttons: ['dict-type-add', 'dict-type-edit', 'dict-type-delete', 'dict-item-add', 'dict-item-edit', 'dict-item-delete']
      }
    ]
  }

2. About button permissions

// Use action
// v-permission="{action:'menu-add'}"
Vue.directive('permission', {
    
    
  inserted: function(el, binding) {
    
    
    const action = binding.value.action
    const currentRight = router.currentRoute.meta.buttons
    if (currentRight) {
    
    
      if (currentRight.indexOf(action) === -1) {
    
    
        // no permission
        const type = binding.value.effect
        if (type === 'disabled') {
    
    
          el.disabled = true
          el.classList.add('is-disabled')
        } else {
    
    
          el.parentNode.removeChild(el)
        }
      }
    }
  }
})

use

<el-button v-permission="{action:'menu-add'}" size="small" type="primary" @click="onAdd"><i class="el-icon-plus" />新增 </el-button>

renderings

• User Management
  
• User Management - Role Assignment
  
• role management
  
• Role Management-Permission Assignment
  
• Menu management
  
• Dictionary management