vue按钮权限控制介绍

2024-04-02 19:04:59 644人浏览泡泡鱼

摘要

目录一、步骤 1.定义buttom权限 2.定义store 3.创建permission指令 4.使用permission指令 5.删除无权限数据 6.传入状态管理数据二、概况前

一、步骤

1.定义buttom权限

在state中创建buttomPermission，用于保存后台接口返回的权限数据。

setPermission用于接受数据，将页面权限管理传入到buttomPermission对象中。

使用vuex：


Vue.use(Vuex)

创建vue实例
const store = new Vuex.Store({
    state: {
        buttomPermission: {}
    },
    mutations: {
        setPermission(state, permission) {
            state.buttomPermission = permission
        }
    }
})
export default store

2.定义store


import store from './store/index.js'

new Vue({
    store,
    el: '#app',
    render: h => h(App)
})

3.创建permission指令

新建directives文件夹，创建permission.js文件。

这里使用inserted函数，在被绑定元素插入父节点时检测该元素是否有权限。


inserted( el, bindings, vnode ) { }

4.使用permission指令

在按钮页面引入和定义 permission指令，并且在buttom中写入指令，绑定指令中相对于的值。


 <button v-permission="'add'">添加</button>
import permission from './directives/permission'
directives: {permission,},

5.删除无权限数据

在permission指令,通过bindings获取该按钮绑定的value值，然后在buttomPermission对象中找到，然后判断是否有权限，如果没有权限，则删除该节点。


inserted(el, bindings, vnode) {
        let btnPermissionValue = bindings.value;
        let boolean =vnode.context.$store.state.buttomPermission[btnPermissionValue];
        !boolean && el.parentNode.removeChild(el);
    }

6.传入状态管理数据

将状态管理数据，通过setPermission方法传入到权限管理中


let permissions = {}
this.$store.commit("setPermission", permissions);

二、概况

总的来说，就是通过vuex定义一个buttomPermission权限状态对象，然后再创建一个permissions指令，通过对每个buttom按钮使用permissions指令，并且绑定该按钮特定意义的值。然后在permission.js文件中，获取当前value值，从buttomPermission中得到当前按钮是否有权限，没有则直接删除掉当前按钮节点。

到此这篇关于vue 按钮权限控制介绍的文章就介绍到这了,更多相关vue 按钮权限控制内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: vue按钮权限控制介绍

本文链接: https://lsjlt.com/news/160674.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341