preface

Hello, everyone. So far, we have four of the six vue custom commands commonly used in large factories. Let's start today
Let's continue to work on the fifth of the six common instructions - v-permission of permission verification.
In our daily development, permission verification is an essential link, especially for some application systems or some middle and background development. There are many kinds of permission verification, such as menu permission, component permission, and even element permission. In this paper, we will take element permission as an example to implement a simple custom instruction for permission verification.
In some scenarios, we may decide which elements should be displayed and which elements should not be displayed according to the permissions the user has after logging in. For example, the most common operation we use is add, delete, modify and query. For administrators, they have great permissions. Add, delete, modify and query all have permissions. For ordinary users, there may be only query operations. At this time, it is necessary to determine the display and hiding of elements according to different user permissions.
Next, let's analyze how to implement a custom instruction for element permission verification

Train of thought analysis

• First of all, because the display and hiding operations of elements will be involved, we can no longer use the beforeMount hook function when customizing instructions. Instead, we need to use the mounted function, that is, we can control whether to display or not after the elements are rendered.
• In the mounted function, we first need to obtain the permissions of the login user. Generally, after the user logs in, he will ask the server to obtain the user permission, and then save the permission data in vuex. What we need to do here is to parse the permission data from vuex for subsequent use. (for the convenience of demonstration, we directly use string instead)
• After the permission data is obtained, we also need to judge which permissions are required for the current element. For example, the delete button requires the corresponding delete permission, which should have been determined when the element is defined. Therefore, we should pass the required permission to our user-defined instruction in the corresponding element, and then get the permission through binding.value
• Finally, compare and verify to see whether the permissions required by the current element exist in the user's permission list. If so, it means that the authorized elements should be displayed, otherwise they have no permission to remove the corresponding elements.
• The above is the overall implementation idea of permission customization instruction, which is relatively simple. Let's take a look at the specific code implementation.

Implementation of permission verification code

<button v-permission="'add'">add</button>
<button v-permission="'del'">del</button>
<button v-permission="'update'">update</button>
<button v-permission="'query'">query</button>

const app = createApp();
app.directive('permission',{
	mounted(el,binding){
		//The user's permission list is obtained from the service and generally stored in vuex. This case will be directly displayed in the form of string for convenience of demonstration
		//Permissions are separated by semicolons
		//Administrator permission: "add;del;update;query"
		//Normal user permission: "add;del;update;query"
		let permission = "update;query",//Permission string
			permissionList = [];//Permission list
		if(!permission) permission = "";
		permissionList = permission.split(";");

		//Get the required permission ID, that is, the parameter value passed from the element to the instruction
		let passText = binding.value,//Can be multiple values separated by semicolons
			passTextArr = [];//Resolve permissions to an array
		if(!passText) passText = "";
		passTextArr = passText.split(';');
		
		//Define a permission identification variable to identify whether there is permission
		let flag = false;
		//Loop through the permission list to check whether the user has the corresponding operation permission
		for(let i = 0; i < passTextArr.length; i++){
			if(permissionList.includes(passTextArr[i])){
				//If the permission list obtained from the server has the permissions required by the component, set the flag to true and jump out of the loop
				flag = true;
				break;
			}
		}
		//If the flag is false, that is, you do not have permission, you can directly remove or hide the element
		if(!flag) el.parentNode && el.parentNode.removeChild(el);
	}
})

After the above code is run, we will find that the corresponding administrator will see all the buttons, while the ordinary user can only see the update and query buttons.

summary

The above is the analysis of the implementation idea of user-defined instructions for element or component permission verification. Finally, we also implemented a simple demo. Of course, there are only some simple logical analysis here. In the formal development, we also need to do the corresponding logic development according to the business needs.
Well, that's all for this article. Welcome your favorite friends to leave a comment and pay more attention!