【Vue】自定义指令权限校验

zoe驿鹿

于 2021-02-09 17:56:37 发布

阅读量483

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/webFrontEndDev/article/details/113773807

版权

Vue 专栏收录该内容

17 篇文章

订阅专栏

main.js
//自定义按钮权限指令 例：v-auth="'CGRK_SHD_XJ_TJ'" 值需要加单引号，不然会去实例的data中查找该变量。
//且加单引号之后才能从 binding.value 上拿到传参

Vue.directive('auth', {
    //此时不能使用bind钩子函数，否则会找不到父元素影响接下来取父元素的操作
    inserted: ((el, binding) => {
        if(store.state.users.user.isAdmin != 1 && !store.state.users.user.privileges.includes(binding.value)){
            el.parentNode.removeChild(el)
        }
    })
})

<el-button type="primary" icon="el-icon-position" @click="submit" v-auth="'CGRK_SHD_XJ_TJ'">提交</el-button>
<el-button type="primary" icon="el-icon-finished" @click="interim_save" v-auth="'CGRK_SHD_XJ_LSBC'">临时保存</el-button>