current position:Home>Vue assigns permissions to buttons through instructions

Vue assigns permissions to buttons through instructions

2022-04-29 17:16:22woowen!

Catalog

newly build utils/permission.js

stay main.js Import in file

Use examples


In some background operation platforms , There are often problems with button permissions !

Can pass Vue.directive Register a global custom instruction to solve the problem

Technical points involved here :

1.install Method

2.vue-directive

By manipulating the dom, control dom The overt and covert .

Realization v-if The effect of : el.parentNode.removeChild(el)
Realization v-show The effect of :el.style.display = ‘none’


newly build utils/permission.js

// Button permissions are saved in vuex in

import Vue from 'vue'
import store from '../store'

let PermissionPlugin = {};
PermissionPlugin.install = function(Vue, options){
    Vue.directive('hasPermission', {
    //  When the bound element is inserted into  DOM  In the middle of the day ……
    bind(el, binding) {
      const codeArr = store.state.stateAuthority.permissions; 
      if (codeArr) {
        let flag = false
        
        codeArr.map((item) => {
          if (item === binding.value) { // Description button to be displayed 
            flag = true
          }
        })
       
        if (!flag) {
          console.log(el.parentNode,'000');
          if (!el.parentNode) {
            el.style.display = 'none'
          } else {
            el.parentNode.removeChild(el)
          }
        }else{
          el.style.display = 'inline-block'
        }
      }else{ //  If the return permission is empty , All buttons are not displayed by default 
        el.style.display = 'none'
      }
    },
    inserted:function(el, binding){
      // Called when the bound element is inserted into the parent node ( If the parent node exists, you can call , There is no need for document in )
    },
    update:function(el, binding){
      // Called when the template that is bound to the element is updated , And whether or not the binding value changes 
      // By comparing the binding values before and after the update , Ignore unnecessary template updates 
      const codeArr = store.state.stateAuthority.permissions; 
      if (codeArr) {
        let flag = false
     
        codeArr.map((item) => {
          if (item === binding.value) {
            flag = true   
          }
        })
      
        if (!flag) {
          console.log(el.parentNode,'000');
          if (!el.parentNode) {
            el.style.display = 'none'
          } else {
            el.parentNode.removeChild(el)
          }
        }else{
          el.style.display = 'inline-block'
        }
        
      }else{ //  If the return permission is empty , All buttons are not displayed by default 
        el.style.display = 'none'
      }
    }
  })
}


export default PermissionPlugin;

stay main.js Import in file

import PermissionPlugin from './utils/permission'

Vue.use(PermissionPlugin)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Use examples

<el-button v-hasPermission="'customer_purchase_edit'" type="text" size="small" @click="onHandleEvent(scope.row, 'edit')"> modify </el-button>

copyright notice
author[woowen!],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291518037911.html

Random recommended