Shulou(Shulou.com)06/02 Report--

This article mainly explains the "vue button how to achieve access control", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "vue button how to achieve access control" bar!

I. steps

1. Define buttom permissions

Create a buttomPermission in state to save the permission data returned by the backend API.

SetPermission is used to accept data and pass page rights management into the buttomPermission object.

Use vuex:

Vue.use (Vuex) create vue instance const store = new Vuex.Store ({state: {buttomPermission: {}}, mutations: {setPermission (state, permission) {state.buttomPermission = permission}) export default store2. Define store

Import store from'. / store/index.js'new Vue ({store, el:'# app', render: h = > h (App)}) 3. Create permission directive

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

The inserted function is used here to detect whether the bound element has permissions when it is inserted into the parent node.

Inserted (el, bindings, vnode) {} 4. Use the permission instruction

The permission instruction is introduced and defined on the button page, and the instruction is written in buttom to bind the relative value in the instruction.

Add import permission from'. / directives/permission'directives: {permission,}, 5. Delete unprivileged data

In the permission instruction, get the value bound by the button through bindings, find it in the buttomPermission object, and determine if you have permissions, and if not, delete the node.

Inserted (el, bindings, vnode) {let btnPermissionValue = bindings.value; let boolean = vnode.context.$ store.state.buttomPermission [btnPermissionValue];! boolean & & el [XSS _ clean] .removeChild (el);} 6. Incoming status management data

Pass the state management data into the rights management through the setPermission method.

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

In general, you define a buttomPermission permission state object through vuex, and then create a permissions directive by using the permissions directive on each buttom button and binding the value of the button's specific meaning. Then in the permission.js file, get the current value and get whether the current button has permission from the buttomPermission. If not, delete the current button node directly.

Thank you for reading, the above is the content of "how to achieve access control of vue button". After the study of this article, I believe you have a deeper understanding of how to achieve access control of vue button, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.