1.后台缓存按钮

后台封装结构形式

role : [ "role_search", "role_add", "role_edit", "role_delete", "role_flow" ]

在main.js中添加指令

/** 权限指令**/
Vue.directive('has', {
  inserted(el, binding) {
  //获取缓存的按钮数组
    const data = sessionStorage.getItem('button')
    var array = JSON.parse(data)
    const str = binding.value.split('_')
    // 不存在则隐藏
    if (array === null || array[str[0]] === undefined || array[str[0]].indexOf(binding.value) === -1) {
      // el.parentNode.removeChild(el);
      el.style.display = 'none'
    }
  }
})

页面处理

<el-button
            v-has="'role_add'"  //指令实现  
            size="mini"
            icon="el-icon-plus"
            type="primary"
            @click="handleShow"
          >添加</el-button>

按钮权限实现完成