在用户登陆后,根据用户id读取用户的所有权限数据,放入本地的sessionStorage进行存储(这里我是拿到权限按钮按钮的标识,英文名称。把他们合成一个字符串存储在 btnPowerString 中。),之后,定义指令,如果用户含有此按钮权限,则在页面显示出来:
<body> <div id="app"> <div style="width: 100px;height: 100px;background-color: pink;" v-has="{role:['editor','admin']}"></div> </div> </body> <script type="text/javascript"> 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" }) </script>