【Abp VNext】实战入门（五）：【14】前端管理界面 vue-element-admin —— 左侧菜单对接用户角色动态显示

---

一、前言

项目已经进展3个月，今天才来处理左侧菜单和用户角色之间的对应关系；

比如：管理员登录可以看到用户管理菜单，普通用户登录看不见这个菜单；

虽说vue-element-admin中已经带有相关角色菜单动态显示功能，但是说简单也挺复杂的，你得要先看懂代码，然后你才能动手去改，里面代码逻辑嵌套比较深，特别是在 Vuex.Store 状态数据存放类中 各种 mutations actions 还有接口调用也混在里面很蛋疼 一看代码结构完全不想动手去改；

说复杂其实也简单，只要懂了工作原理也就解决了大半问题，个人是把 Vuex.Store 状态数据中的各种业务逻辑直接砍掉了，Vuex.Store只用来存放状态数据，业务逻辑功能单独写出去了；

二、左侧菜单动态显示原理

1. 前端框架路由/router/index.js 中配置静态菜单页面：constantRoutes:[]
   固定菜单所有用户都可以看到，声明结构如下：

export const constantRoutes = [
  {
    path: '/',
    name: '监控首页',
    component: Layout,
    redirect: '/device',
    meta: { title: '监控首页', icon: 'home' },
    children: [{
      path: 'device',
      name: 'device',
      component: () => import('@/views/device/index'),
      meta: { title: '系统首页', icon: 'home' }
    },
    {
      path: 'control',
      name: 'control',
      component: () => import('@/views/device/control'),
      meta: { title: '控制页面', icon: 'form' },
      hidden: true
    }
    ]
  }
]

2. 前端框架路由/router/index.js 中配置动态菜单页面：asyncRoutes:[]
   动态菜单需要在meta节点中绑定可以访问本菜单的角色，声明结构如下：

export const asyncRoutes = [
  {
    path: '/user',
    component: Layout,
    redirect: '/user',
    name: '用户管理',
    meta: { title: '用户管理', icon: 'el-icon-s-help', roles: ['admin'] }, // 也要加权限否则 redirect: '/user', 也会当做一个路径处理
    children: [
      {
        path: 'index',
        name: 'index',
        component: () => import('@/views/user/index'),
        meta: {
          title: '用户管理',
          icon: 'usermanage',
          roles: ['admin'] // 必须添加可以访问的角色 才能保证用户在登录的时候 根据用户自身角色呈现对应的菜单
        }
      }
    ],
    hidden: false
  }
]

3. 用户登录接口调用成功后，在显示菜单页面前，提取用户角色列表，如：[“admin”,“operator”]

4. 循环检测当前用户角色可以访问的动态菜单列表；

5. 把用户可以访问的动态菜单页面 和 没有限制的静态菜单页面拼接起来就是完整的菜单了；
   vue-element-admin 中由于框架原因 静态菜单已经添加到了路由，所以只需要把第4步动态菜单获取到，然后添加到路由即可： router.addRoutes(AsyncRoutes)

三、总结

只要弄懂了原理，剩下的工作就好说很多了，不管是在vue-element-admin 现有结构上改，还是根据自己的习惯来改都是妥妥的；

由于这个环节改动比较大，涉及到的内容相对有点儿多，所以本文只放了解决问题的思路，具体代码就省略了；