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

最新推荐文章于 2024-08-01 22:42:46 发布

weixin_33916256

最新推荐文章于 2024-08-01 22:42:46 发布

阅读量1.1k

点赞数

文章标签： javascript 操作系统后端 ViewUI

原文链接：http://www.cnblogs.com/xiaoliwang/p/9923115.html

版权

在用户登陆后，根据用户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>

转载于:https://www.cnblogs.com/xiaoliwang/p/9923115.html

weixin_33916256

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 自定义指令实现权限控制（按钮级）

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

扫一扫