vue自定义指令控制角色权限

需求

在做pc项目时，需要根据角色的不同，控制一些页面的按钮及内容显示，像pc端的管理员和普通用户权限是不一样的

封装指令

新建permission.js文件

import Vue from 'vue'
Vue.directive('has',{
    bind : function(el,binding){
        //需要在DOM更新完成以后再执行以下代码，不然通过 el.parentNode 获取不到父节点，因为此时还没有绑定到
        Vue.nextTick(function(){
            var role = binding.value.role
            if(!Vue.prototype.$_has(role)){
                el.parentNode.removeChild(el);
            }
        })
    }
})

Vue.prototype.$_has = function(role){
    //当前角色可以从cookie中获取
    var currentRole = ['editor'] //测试数据
    //var currentRole = localstorage.getItem('currentRole ')  //真实获取当前角色
    if(Array.isArray(role)){
        return currentRole.some(function(ele){
            return role.indexOf(ele) >= 0
        })
    }else{
        return currentRole.indexOf(role) >= 0;
    }
}

在main.js文件挂载自定义指令

import has from '@/utils/permission'

页面应用自定义指令

 <van-button round block type="info" v-has="{role:['editor','admin']}">有权限</van-button>
 <van-button round block type="info">无权限</van-button>