Vue 自定義指令實現權限控制（按鈕級）

時間 2019-11-08

標籤 vue 自定義指令實現權限控制按鈕简体版

原文原文鏈接

在用戶登錄後，根據用戶id讀取用戶的全部權限數據，放入本地的sessionStorage進行存儲（這裏我是拿到權限按鈕按鈕的標識，英文名稱。把他們合成一個字符串存儲在 btnPowerString 中。），以後，定義指令，若是用戶含有此按鈕權限，則在頁面顯示出來：javascript

<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>

相關標籤/搜索