其他分享
首页 > 其他分享> > vue基于页面中按钮权限控制

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>

标签:vue,binding,value,buttonpermsStr,isExist,按钮,权限,页面
来源: https://www.cnblogs.com/-roc/p/11840326.html