Vue后台管理系统路由权限和按钮级权限

路由权限

通过后台返回菜单，前端进行处理（递归？）即可

按钮级权限

• 后台返回菜单的同时一起返回按钮权限的数组 如:[1,2,3,4] //对应增、删、查、改
• 前端处理数据把按钮权限放入路由的 meta 中。
• 创建自定指令v-permission，进行判断对比。

栗子如下：

  {
    path: '/test3',
    component: Layout,
    name: 'test',
    children: [{
      path: 'index',
      component: () => import('@/views/test3/index'),
      name: 'PagePermission',
      meta: {
        title: '测试3',
        btnPermissions:[1,2,3]
      }
    }]
  }

import Vue from 'vue'
Vue.directive('permission', {
  inserted(el, binding, vnode) {
    const {value} = binding
    const roles = vnode.context.$route.meta.btnPermissions || [] //获取mate中的权限
    if (value && value instanceof Array && value.length > 0) {
      const permissionRoles = value
      const hasPermission = roles.some(role => {
        return permissionRoles.includes(role)
      })
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`需要的权限， v-permission="['1','2','3','4']"`)
    }
  },

})

import permission from '@/directive/permission.js' //指令权限

.vue中使用

  <el-button v-permission="[1]">删除 </el-button>
  <el-button v-permission="[2]">新增</el-button>
  <el-button v-permission="[3]">修改</el-button>
  <el-button v-permission="[4]">查询</el-button>