Detailed explanation of Vue permission command control permissions

In daily development, in addition to using existing instructions from Vue, we also need to customize the instructions and further operate the DOM node.

In the background system, the most commonly used permission instructions are.

The principle of permission control is to determine whether some DOM nodes have permissions when the current interface of the system is initialized, and if there is no such DOM, remove this DOM.

When using instruction permissions in Vue, there are usually two ways to control nodes. The first is instruction control of ordinary nodes (ordinary nodes refer to tag nodes in html.), and the second is control of elementUI components.

Why are there two types? This is because during the actual development process, I found that custom directives sometimes cannot remove components in element. For example: when using el-tab, there are multiple tab pages below. When a tab page has no permission to access, you want to remove it. At this time, the customized directive can only remove the content in this tab page, and cannot remove this tab page together. So at this time, v-if will be used for control.

The first type - custom permission directive

My writing method is to create a new onepermissionFolder, this folder contains、, then directly upload the code:

import permission from './permission'
import Vue from 'vue'
('permission', permission)

import store from '@/store'
async function checkPermission(el, binding) {
	const { value } = binding
	const roles = await  && 
	if( value && value instanceof Array) {
		if(  > 0) {
			const permissionRoles = value
			const hasPermission = (role => {
				return (role)
			})
			if(!hasPermission) {
				 && (el)
			}
		}
	}else {
		throw new Error('The role needs to be passed in an array')
	}
}
export default {
	inserted(el, binding) {
		checkPermission(el, binding)
	},
	update(el, binding) {
		checkPermission(el, binding)
	}
}

What needs to be explained here is the acquisition of the permission list. My permission list is stored in the store's permission, so I directly get the permission when entering.

The most important step is to be introduced into the implementation.

import './permission' // This introduction needs to be createdVueReference before the instance

usage:

<el-button v-permission="['add']">Permission Button</el-button>

The second type: v-if custom control

If you use the first method, it is to remove the child nodes under the current DOM, and there is no way to remove the current node. So at this time, you need to control it through a custom v-if.

Idea: Execute a function in v-if, and pass a permission value into the function. In the function, determine whether the permission value belongs to the permission menu and return the Boolean value.

At this time, we thought that if we wanted to define a function that can be used in any component, it would either be a tool-like function or mixins. If it is a wrapper tool function, it cannot be used directly in the template, but needs to be used in methods, so we directly select mixins and mix them into the method.

We create files for controlling nodes

import store from "@/store"
export default {
	methods: {
		controlNode(node) {
			const permission = 
			let result = (node)
			return result
		}
	}
}

usage:

Using mixins in components

<template>
<div>
	<el-tabs>
		<el-tab-pane v-if="controlNode('add')"></el-tab-pane>
		<el-tab-pane></el-tab-pane>
	</el-tabs>
</div>
</template>
<script>
import controlNode from "@/permission/controlNode"
export default {
	name: "component",
	mixins: [controlNode]
}
</script>

Final explanation

Why do we need to control node permissions in two situations? Both of them remove nodes, why do you still need to use v-if?

If you observe the code carefully, in the first way, what we remove is child, which is to remove the child element of the current node, and the current node still exists. So there are two situations.

So is there a way to use custom instructions to complete the removal? Of course there is, in the first way, just need toremoveChildChange toremoveJust do it. Immediately remove the child element and remove the current node itself.

This is the end of this article about the detailed explanation of Vue permission command control permissions. For more related Vue permission command content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!