自定义指令+后端 实现动态全局按钮权限控制（v-has）

一、自定义指令 v-has (btnControl.js)：

export default (Vue) => {
  /** 权限指令,对按钮权限的控制 **/
  Vue.directive('has', {
      inserted: function (el, binding) {
        // 获取按钮权限
        if (!Vue.prototype.$_has(binding.value)) {
         //移除不匹配的按钮
          el.parentNode.removeChild(el);
        }
      },
    Vue.prototype.$_has = function (value) {
      let isExist = false
      // 从浏览器缓存中获取权限数组
      var buttonpermsStr = sessionStorage.getItem('btnContext');
      if (buttonpermsStr === undefined || buttonpermsStr == null) {
        return false
      } else {
        JSON.parse(buttonpermsStr).forEach(element => {
            //匹配缓存中的数据中有没有匹配的值
          if (element.code == value) {
            // 若在按钮中定义的权限字段能在后端返回的权限数组中能找到，则该按钮可显示
            isExist = true
          }
        });
      }
      return isExist
    }
    }

二、在全局引用（main.js）

import btnControl from './common/js/btnControl';
Vue.use(btnControl);

三、监听点击的$route（Home.vue）

 watch: {
      $route: {
        immediate: true,//开启首次监听
        handler: function (val) {
        //调用后端方法
          util.getBtnList(val);
        },
        //深度监听
        deep: true,
      }
    },

四、后端数据读取（util.js）

// 后端获取按钮权限
  getBtnList(val) {
    if(val != undefined){
    let _this = this;
    let data = {
      menuId: val.meta.id
    };
    $.ajax({
      type: "post",
      url:baseURL + "/sys/menu/***",
      dataType: "json",
      data: JSON.stringify(data),
      traditional: true,
      contentType: "application/json;charset=utf-8",
      success: function (res) {
          //在sessionStorage中添加按钮数据
        sessionStorage.setItem("btnContext",JSON.stringify(res.data));
      }
    });
    }
  },

五、在模板中使用v-has指令（template中）

• 使用方式：v-has=" ‘后端定义的值’ "
• 注意:直接在双引号写会识别成变量，再加上单引号才会变成字符串

 <el-button type="" size="mini" v-has="'btn_form_add'" :disabled="saveMenuAble" @click="saveMenu">新增保存</el-button>
 <el-button type="" size="mini" v-has="'btn_form_edit'" :disabled="updateMenuAble" @click="updateMenu">修改保存</el-button>

六、问题

• 在自定义指令中使用 bind 下 el.parentNode.removeChild(el) 失效?
  解决方式：使用 inserted 。

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted：被绑定元素插入父节点时调用
(仅保证父节点存在，但不一定已被插入文档中)。 update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode
更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
我们会在稍后讨论渲染函数时介绍更多 VNodes 的细节。 componentUpdated：指令所在组件的 VNode 及其子 VNode
全部更新后调用。 unbind：只调用一次，指令与元素解绑时调用。

---

前端小白的第一次写文章，记录一下完成的第一个组件。