vue 自定义指令前端功能（按钮）权限控制

在用户登陆后，根据用户id读取用户的所有权限数据，放入本地的sessionStorage进行存储（这里我是拿到权限按钮按钮的标识，英文名称。把他们合成一个字符串存储在 btnPowerString 中。），之后，定义指令，如果用户含有此按钮权限，则在页面显示出来：

/**权限指令**/
Vue.directive('has',{
  bind:function (el,binding) {
    let className = binding.value.class; //这个地方要注意了，看下面页面上的代码，对应取得相应的值
    if(!Vue.prototype.$_has(className)){
      el.parentNode.removeChild(el);
    }
  }
})
Vue.prototype.$_has = function (val) {
  let isShow = false;
  let btnPowerArr = sessionStorage.getItem('btnPowerString');
  if(btnPowerArr==undefined || btnPowerArr==null){
    return false;
  }
  if(btnPowerArr.indexOf(val) > -1){
    isShow = true;
  }
  return isShow;
}

页面上使用方式：

<el-button type="warning" @click="handleMod()" v-has="{class:'btn-mod'}">修改</el-button>
<el-button type="primary" @click="handleStart()" v-has="{class:'btn-del'}">启用</el-button>

因为 vue2.0 ,不橡之前版本可以在 v-has 中直接传个字符串，所以这里只能用对象的方式传值，这里大家要注意了