关于vue.js:vue-按钮-权限控制

vue 按钮 权限管制

前言

在日常我的项目中，会碰到须要依据后盾接口返回的数据，来判断以后用户的操作权限。必须当有删除权限时，就显示删除按钮。没有这个权限时，就不显示或者删除这个按钮。通过查找材料，通过 vuex 来实现这个性能。

步骤

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 中失去以后按钮是否有权限，没有则间接删除掉以后按钮节点。