In the actual project development, the login account will have a variety of roles, such as operator new, auditor approval. Each role has different permissions for buttons, and we should handle these permissions well in development

1. Log in to the array of access buttons

First of all, when the user logs in, we can use the API interface to obtain the permissions of all menus and buttons. We can save all button information in sessionStorage.

const AuthorityData = {
    menus : ['home'.'dashboard'].buttons: ['share'.'edit'],}// Save the button permission information to prevent it from being lost when refreshing the page
sessionStorage.setItem( "permission_button".JSON.stringify(AuthorityData.buttons));

Copy the code

2. Simple implementation of V-IF

Take the VUE project as an example. We can control permissions through V-IF, which is relatively simple and effective

<el-button v-if="permission_button.includes('edit')">Modify the</el-button>

<script>
  export default {
      data() {
          return  {
              permission_button: JSON.parse(sessionStorage.getItem("permission_button"))}}}</script>
Copy the code

3. Global custom instructions

The above implementation of a simple front button permissions control, but there are a lot of inelegant, each time you have to define a variable. How do you solve it? We can define a global custom directive, so that the code is greatly reduced, lazy is the most comfortable. Let’s take Vue as an example because that’s all I know.

import Vue from 'vue';
Vue.directive('btnlimit', {
    // When the bound element is inserted into the DOM...
    inserted: (el, binding) = > {
        // el Specifies the binding value of the binding.value directive for the currently bound element
        let permissionList = sessionStorage.getItem('permission_button');
        // Determine if the element is included, and if not, ask the parent element to throw the child element in the garbage
        if(! permissionList.includes(binding.value)) { el.parentNode.removeChild(el) } } })// You can write your own directives in a directive.js file
Copy the code

Let’s review a few other hook functions.

An instruction definition object can provide the following hook functions (all optional) :

  • Bind: Called only once, the first time a directive is bound to an element. This is where you can perform one-time initialization Settings.
  • Inserted: Called when the bound element is inserted into a parent (the parent is guaranteed to exist, but not necessarily inserted into the document).
  • Update: called when the component’s VNode is updated, but may occur before its child VNodes are updated. The value of the instruction may or may not have changed. However, you can ignore unnecessary template updates by comparing the values before and after the update (see below for detailed hook function parameters).

4. Use of custom instructions for VUE components

Now that we’ve defined the global custom directive, we can use it in all vUE components without having to reference it individually, saving CTRL+C, CTRL+V? Unfortunately, double quotation marks inside single quotation marks are a little uncomfortable, but I’m not going to optimize them.

<el-button v-btnlimit="'edit'">Modify the</el-button>
Copy the code