Vue button permission control introduction

Preface:

In daily projects, you may need to determine the current user's operating permissions based on the data returned by the background interface. The delete button must be displayed when there is delete permission. Without this permission, the button will not be displayed or deleted. By searching for information, this function is realized through vuex.

1. Steps

1. Define buttom permissions

Create buttomPermission in state to save the permission data returned by the background interface.

setPermission is used to accept data and pass the page permission management into the buttomPermission object.

Using vuex:

Vue.use(Vuex)

Create a vue instance const store = new Vuex.Store({
    state: {
        buttomPermission: {}
    },
    mutations:
        setPermission(state, permission) {
            state.buttomPermission = permission
        }
    }
})
export default store

2. Define the store

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

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

3. Create permission instructions

Create a new directives folder and create a permission.js file.

The inserted function is used here to check whether the element has permission when the bound element is inserted into the parent node.

inserted( el, bindings, vnode ) { }

4. Use the permission directive

Introduce and define the permission directive on the button page, write the directive in buttom , and bind the corresponding value in the directive.

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

5. Delete unauthorized data

In the permission instruction, get value value of the button binding through bindings , then find it in the buttomPermission object, and then determine whether there is permission. If there is no permission, delete the node.

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

6. Passing in state management data

Pass the state management data to the permission management through the setPermission method

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

II. Overview

In general, a buttomPermission permission status object is defined through vuex , and then a permissions directive is created. The permissions directive is used for each buttom button and the value of the specific meaning of the button is bound. Then in the permission.js file, get the current value and get whether the current button has permission from buttomPermission . If not, delete the current button node directly.

This is the end of this article about vue button permission control. For more relevant vue button permission control content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!