vue v-permission 封装

19 min read

vue v-permission 封装

export default {
    inserted(el,bindling){
    	//bindling.value为指令的绑定值
        let perVal = bindling.value;
        if(bindling.value){
        //假设某用户对某模块只有添加和删除的权限
    	//这个权限信息(即pers)应该是不同用户登录时从后台拿到的对应的信息
            let pers=['add','delete'];
            //hasPer为true为有权限
    		//hasPer为false为无权限
            let hasPer = pers.some(item=>{
                return item == perVal
            });
             //没有权限就先隐藏此元素吧
            if(!hasPer){
                el.style.display="none"
            }
        }
    }
}

import permission from "./permission"
//批量注册指令(现在就一个permission)
const directives = {
    permission
}
//注册的一般写法,循环遍历directives,通过vue.directive注册
export default {
    install(Vue){
        Object.keys(directives).forEach(key=>{
            Vue.directive(key,directives[key])
        })
    }
}

主文件main.js使用

Vue.use(Directives)