Vue custom v-has directive, steps to determine button permissions

Application scenarios

Taking the background management system as an example, each user has different button permissions. After the administrator configures permissions, when the user logs in, he gets the button permission list from the interface, and then determines which buttons are displayed based on the background data.

Let me briefly talk about it, custom commands

The official website explains custom commands

/v2/guide/cu…

Basic concepts

In addition to the built-in instructions (v-model and v-show) of core functions, Vue can also register custom instructions.

In Vue 2.0, the main form of code reuse and abstraction is components. But in some cases, it is still necessary to perform underlying operations on ordinary DOM elements, and custom instructions will be used at this time.

For example, customize a v-focus directive, and when the page is loaded, the input box will get focus.

<input v-focus>

Global customization

// Register a global custom command `v-focus`('focus', {
  // When the bound element is inserted into the DOM...  inserted: function (el) {
    // Focus elements    ()
  }
})

Local customization

//If you want to register a local directive, the component also accepts an option to directives:directives: {
  focus: {
    // Definition of instructions    inserted: function (el) {
      ()
    }
  }
}

Hook function

A directive definition object can provide the following hook functions (all optional)

bind

Called only once, the instruction is called the first time it is bound to an element. Here you can perform one-time initialization settings.

inserted

Called when the bound element is inserted into the parent node (only the parent node exists, but it may not be inserted into the document)

update

The VNode of the component is called when it is updated, but it may occur before its child VNode is updated. The value of the instruction may have changed or not. But you can ignore unnecessary template updates by comparing the values before and after the update.

componentUpdated

The VNode and child VNode of the component where the instruction is located are called after all updates.

unbind

Called only once, and is called when the instruction is unbined from the element.

other

In addition, there are some basic concepts, such as hook function parameters, dynamic instruction parameters, etc.

/v2/guide/cu…

The official website is very clear, so I won’t go into details here.

principle

If you are interested in the source code of custom instructions, there is also an article that explains it very thoroughly

///article/

The principle is:

When parsing Vue's properties, iterate through each property;
Add a directives attribute to the object to save directive information;
After rendering is completed, the create hook function of the directives module will be executed;
Vue compiles the generated virtual node, that is, after VNode is inserted into the parent node,
Execute each function in sequence, and then execute the inserted hook function we custom-defined

Custom directive v-has

Don’t worry about it, and get back to the point.

Today I will mainly summarize: custom directive v-has, button permission judgment

The data format is as follows:

[
    {
        "checked":false,
        "component":"",
        "createTime":"2019-06-29 18:21:06",
        "createUser":"026a564bbfd84861ac4b65393644beef",
        "icon":"",
        "id":"1503273153861066776",
        "name":"Collected today（files）",
        "open":"true",
        "parentId":"2328050996633395469",
        "parentName":"front page",
        "permission":"sys:index:vol",
        "sort":103,
        "status":"0",
        "type":"2",
        "updateTime":"2021-01-27 15:51:15",
        "updateUser":"026a564bbfd84861ac4b65393644beef",
        "url":""
    }
]

Custom v-has directive configuration

In the utils folder, create a new file and export it uniformly

const hasPermission = {
    install (Vue, options) {
        ('has', {
            inserted: (el, binding, vnode)=&gt;{
                filterGlobalPermission(el, binding, vnode);
            }
        });
    }
};
/**
  * Global permission control
  */
export const filterGlobalPermission = (el, binding, vnode) =&gt; {
    let permissionList = [];
    let authList = (('LOGIN_USER_BUTTON_AUTH') || "[]");
    for (let auth of authList) {
        (auth);
    }
    if (!) {
        (el);
        return;
    }
    let permissions = [];
    for (let item of permissionList) {
        ();
    }
    if (!()) {
        (el);
    }
}
export default hasPermission;

under utils file

Other js files in the utils folder can also be exported in a unified manner

import hasPermission from './hasPermission'
export { hasPermission }

Introduced

import { hasPermission } from '@/utils'
(hasPermission)

Use v-has in the component to determine whether the button is displayed according to the button permissions.

&lt;el-button v-has="'sys:arch:add'" type="primary" size="mini" icon="el-icon-plus" @click="add('1')"&gt;
    New
&lt;/el-button&gt;

The above is the detailed content of the steps for Vue custom v-has command and the steps for making button permission judgment. For more information about Vue custom v-has command, please follow my other related articles!