后台管理系统,vue自定义权限控制指令v-has

147 阅读1分钟
//用户权限列表PERMISSION_FUNCTIONS,登录时存放到sessionStorage,结构:['0001','0002','0003','0004']
hasPermission = function(permission) {
  let data = sessionStorage.getItem('PERMISSION_FUNCTIONS');
  data = JSON.parse(data);
  if (data) {
    let obj = util.findIndex(data, permission);
    if (obj) return true;
  }
  return false;
};

//定义权限控制指令
Vue.directive('has', {
  bind: function(el, binding) {
    //没有权限,直接移除元素
    if (!hasPermission(binding.value)) {
      if (el && el.parentNode && typeof el.parentNode.removeChild === 'function'){
        el.parentNode.removeChild(el);
      }
      else if(el){
        el.style.display = 'none';
      }
    }
  }
});

//在页面中使用指令,用户有添加或修改用户的权限,才会显示相依功能的操作按钮
<Button v-has="0001" @click="addUser">添加用户</Button>
<Button v-has="0002" @click="updateUser">修改用户</Button>