vue权限自定义指令

vue权限指令

vue项目将后端返回的权限数据存储到vuex中，并根据不同权限展示不同内容。

directive.js

import Vue from 'vue';

Vue.directive('rule', {
    //在绑定元素插入父元素生命周期触发
    inserted: function (el, bind, vnode) {
        //自定义指令中无法使用this获取vue实例，但是vnode绑定在实例上下文，所以使用vnode.context可以解决这个问题。
        let rule = vnode.context.$store.state.rule;
        //bind.vlaue获取到你使用该自定义指令绑定的值
        if (!rule.includes(bind.value)) el.remove();
    }
});

main.js

//单独文件中自定义全局指令必须在main.js中引用
import './utils/directive'

menu.vue

参考文献:https://mp.weixin.qq.com/s/McsEsb7rGVy6IOTfWM0gRg