vue后台管理系统的菜单和按钮权限控制

实现后台管理系统的实现逻辑：后台登录，由后台开发返回动态路由，然后前端更具返回的动态路由实现侧边栏

直接上代码，首先登录返回后台路由形式如下

 一级菜单，二级菜单，三级菜单，在child遍历

动态路由实现代码

export function getDeepRoute(data){
  data.forEach((item) => {
    if (!item.url) {
      item.url = ''
    }
    if (item.url.indexOf("/**") != -1) {
      item.url = item.url.substring(0, item.url.indexOf("/**"))
    }
    if (item.type == 21){
      let newarr = item.child.filter((currentValue, index, arr) => {
        return currentValue.type == 22
      })
      if (newarr.length == 0){
        item.child.unshift({
          bind: item.bind,
          name: item.name,
          child: [],
          type: 22,
          url: item.url,
          addItem:true
        })
      }

    }
    if (item.child && item.child.length > 0) {
      getDeepRoute(item.child)
    }
  });
  return data;
}


export function getMenuRoute(routes) {
  const res = []
  const keys = ['path', 'name', 'children', 'redirect', 'alwaysShow', 'meta', 'hidden']
  routes.forEach(item => {
    if (item.bind){   //过滤没有权限的bind
      const newItem = {}
      if (item.type == 21) { //这是一级菜单
        newItem.component = Layout
        newItem.redirect = 'noRedirect'
      }

      //这是二级菜单，二级菜单如果有子菜单，必须设置一个index.vue
      if (item.type == 22) {
        if (item.child.length > 0) {
          newItem.component = (resolve) => require([`@/views${item.url.replace('team-', '')}/index`], resolve)
        } else {
          newItem.component = (resolve) => require([`@/views${item.url.replace('team-', '')}/index`], resolve)
          //newItem.component = (resolve) => require([`@/views/security/realMonitoring/hazardousProcess`], resolve)
        }
      }

      //这是三级菜单，
      if (item.type == 23) {
        //newItem.component = (resolve) => require([`@/views/security/realMonitoring/hazardousProcess`], resolve)
        newItem.component = (resolve) => require([`@/views${item.url.replace('team-', '')}/index`], resolve)
      }
      if (item.type == 21 || item.type == 22 || item.type == 23) { //1模块,11栏目，21一级菜单，22二级菜单，23三级菜单，41接口权限，42，按钮权限，99大屏接口
        newItem.hidden = false
      } else {
        newItem.hidden = true
      }
      newItem.children = item.child
      newItem.path = item.url
      newItem.type = item.type

      if(item.addItem && item.type == 22){
        newItem.meta = { title: item.name, btnPermissions:[],breadcrumb:false }
      }else{
        newItem.meta = { title: item.name, btnPermissions:[],redirect:'noRedirect'}
      }
      
      if (newItem.children.length == 0){
        delete newItem.children
      }
      if (newItem.children && newItem.children.length > 0) {
        newItem.children = getMenuRoute(item.child)
      }
      res.push(newItem)
    }

  })
  return res
}

然后这样就实现了菜单级别的权限控制，这样权限在刷新之后，由于我的菜单路由都是存放在vuex当中的，所以，我在刷新之后，通过同步请求重新请求，解决刷新之后无菜单的问题

最后，按钮级别的权限控制，通过全局的自定义指令实现的

主要代码如下

import Vue from 'vue'
import router from '@/router'
import store from '@/store'
const has = Vue.directive('has', {
  // inserted: function (el, binding, vnode) {
  //   let btnPermissions = getBtnPermissions()
  //   let btnName = vnode.data.attrs.btnName
  //   if (!(btnName in btnPermissions)){ //权限false 移除按钮
  //     //el.style.display = 'none'
  //     el.parentNode.removeChild(el)
  //   }
  // },
  bind: function (el, binding, vnode) {
    // 获取按钮权限
    let key = sessionStorage.getItem('routerKey')
    let path = router.currentRoute.path
    el.style.display = 'inline-block'
    if(key == 'hx-security'){return}
    if(key == 'hx-storage'&&(path == '/hx-storage/depot/workshopManage'||path == '/hx-storage/depot/setup'||path == '/hx-storage/hardwareWarehouse/purchase')){
      return
    }
    if(key == 'hx-device'&&(path == '/hx-device/repair/workTime'||path == '/hx-device/monitor/pointInfo'||path == '/hx-device/equipment/template'||path == '/hx-device/equipment/special/stay'||path == '/hx-device/equipment/special/set'||path == '/hx-device/equipment/special/record'||path == '/hx-device/repair/person')){
      return
    }
    if(key == 'hx-quality' && path == '/hx-quality/qc/qualityStandard'){
      return
    }
    let btnPermissions = getBtnPermissions()
    let btnName = vnode.data.attrs.btnName
    if(btnName == '导出'||btnName == '详情'||btnName == '导出模板'){return}
    if(btnName == '批量录入' && path == '/hx-quality/qc/qualityControl'){
      btnName = '录入'
    }
    console.log(btnPermissions)
    if (!(btnName in btnPermissions)) { //权限false 移除按钮
      el.style.display = 'none'
    }
  },
})

控制的隐藏和显示