java 按钮级权限控制_Vue 自定义指令实现权限控制（按钮级）

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

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','reader']

if(Array.isArray(role)){

return currentRole.some(function(ele){

return role.indexOf(ele) >= 0

})

}else{

return currentRole.indexOf(role) >= 0;

}

}

var app = new Vue({

el : "#app"

})

Vue | 自定义指令和动态路由实现权限控制

功能概述: 根据后端返回接口,实现路由动态显示 实现按钮(HTML元素)级别权限控制 涉及知识点: 路由守卫 Vuex使用 Vue自定义指令 导航守卫 前端工程采用Github开源项目Vue-elem ...

基于Vue实现后台系统权限控制