vue基于页面中按钮权限控制

main.js

// 权限
/** 权限指令,对按钮权限的控制 **/
Vue.directive('allow', {
  bind: function(el, binding) {
    // 通过当前按钮，获取所在权限组的组名
    let permissGropName = binding.value.split("_")[0]; 
    // 通过登录成功后获取所有权限列表，如下permissGroup类型，存到vuex，其中所有名字必须均独一无二
    let permissGroup = {
      "proj":["proj_edit","proj_del"],
      "menu":["menu_look","menu_edit"], // 等
    }
    // 按组名获取权限列表，
    if( permissGroup[permissGropName].indexOf(binding.value) == -1){
      el.style.display = "none"
    }
  }
})

// 以下可根据实际情况使用

// 权限检查方法（且把该方法添加到vue原型中） 
// Vue.prototype.$_has = function(value) {
//   let isExist = false
//   // 从浏览器缓存中获取权限数组（该数组在登入成功后拉取用户的权限信息时保存在浏览器的缓存中）
//   var buttonpermsStr = sessionStorage.getItem('powerHandle')
//   if (buttonpermsStr === undefined || buttonpermsStr == null) {
//     return false
//   }
//   if (buttonpermsStr.indexOf(value) >= 0) {
//     // 若在按钮中定义的权限字段能在后端返回的权限数组中能找到，则该按钮可显示
//     isExist = true
//   }
//   return isExist
// }

 

具体页面

<!-- 具体页面中的按钮 -->
        <div>
            <button v-allow="'proj_edit'">项目编辑</button> 
            <!-- 改为proj_del，即可查看权限操作demo -->
            <button v-allow="'proj_del1'">项目删除</button>
        </div>