Vue Notes - implemented by custom button operation permission command

Often do the back-end system, the authority of such a system is more important, to pick up some items from his past to be a note.

Vue back office management system implementation. Vacant button operation authority are generally defined instructions by Vue.directive .

<el-button v-has="fq-pms" type="primary">按钮</el-button>

Usually we will request coming from the background of data storage to Vuex or localStorage, then we register a custom global command and monitor it

Vue.directive ( 'has' , { 
  the bind: function (EL, Binding) { 
    const PERMISSONS = [ 'LCJ'] // instruction list 
　　 IF ( has (binding.value, Permissions)) { 
         el.parentNode.removeChild (EL) ; // call the parent delete elements, time parent element is rendered possible to bind replaced inserted the 
    } 
  } 
})

has function

function has(value, permissions) {
  let isExist = true;
  if (permissions === undefined||permissions===null || permissions.length === 0) {
    return true;
  }
  for (let i = 0; i < permissions.length; i++) {
    if (permissions[i] === value) {
      isExist = false;
      break;
    }
  }
  return isExist;
}

 

bind is Vue.directive five life cycle (the hook function), based on the life cycle bind> inserted> update> componentUpdate> unbind

1. the bind : only called once, the first time is bound to the command element of the call. Here the initial settings may be disposable
2. inserted The : Called when the parent node is inserted into the binding element (only ensure that there is a parent node, but does not necessarily have to be inserted in the document)
3. Update : When VNode update where the assembly calls, but may occur before their children VNode update. The value of the instruction may be changed, or may not. But you can ignore unnecessary template update by comparing the values before and after update
4. componentUpdate : After VNode its sub-assembly instructions are all located VNode update call
5. unbind : is called only once, when the call instruction and tie element solution　　

 Typically by operating authority by a button, a menu permissions are routed through the front end and back route judged. Next chapter will introduce the Vue-router configuration menu background routing to achieve permission