Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

preface

Hello, everyone. Up to now, we have made four of the six commonly used VUE custom instructions in big factory. Today, we will continue to make the fifth instruction in the six commonly used instructions – v-permission verification.

In our daily development authority check is an essential link, especially for some application systems or some background development, but also need to use authority check. Then there are many kinds of permissions verification, such as menu permissions, component permissions and even small to the element permissions and so on. In this article, we will take the element permissions as an example to achieve a simple permission verification custom instruction.

In some scenarios, we might decide which elements to display and which elements not to display based on the permissions the user has after logging in. For example, the most commonly used operation is to add, delete, change and check, so for the administrator, the authority is very large, add, delete, change and check have permission operation, and for ordinary users may only query operation, this time, according to different user permissions to determine the element display and hide.

Next we will analyze how to implement an element permission check custom instruction

Thought analysis

  • BeforeMount is no longer used for displaying and hiding elements. Mounted is used instead, which means displaying elements after rendering.
  • In mounted, we first need to obtain the permissions of the logged-in user. In general, users will request the server to obtain user permissions after login, and then the permission data will be saved in VUEX. All we need to do here is parse the permission data out of vuEX for future use. (For demonstration purposes, we’ll just use strings instead.)
  • Access data to get the later, we also need to judge the current element need what permissions, such as delete button need is corresponding to remove permissions, and the permissions should be confirmed when the element is defined, so we should be in the corresponding element in pass need permission to our custom instructions, and then through the binding. The value to get the permission
  • Finally, compare and verify to see whether the permission required by the current element exists in the user’s permission list. If so, it indicates that the permission element should be displayed; otherwise, there is no permission to remove the corresponding element.
  • The above is the overall implementation idea of the permission custom instruction, relatively simple, let’s look at the specific code implementation.

Authority verification code implementation

<button v-permission="'add'">add</button>
<button v-permission="'del'">del</button>
<button v-permission="'update'">update</button>
<button v-permission="'query'">query</button>
Copy the code
const app = createApp();
app.directive('permission', {mounted(el,binding){
		// Obtain the user permission list from the service, generally stored in vuEX after obtaining, this case will be directly displayed in the form of a string for the convenience of demonstration
		// Permissions are separated by semicolons
		// Admin permission: "add; del; update; query"
		// Common user permissions: "add; del; update; query"
		let permission = "update; query".// Permission string
			permissionList = [];// Permission list
		if(! permission) permission ="";
		permissionList = permission.split(";");

		// Get the required permission identifier, that is, the parameter value passed by the element to the directive
		let passText = binding.value,// Can be multiple values separated by a semicolon
			passTextArr = [];// Parse permissions into arrays
		if(! passText) passText ="";
		passTextArr = passText.split('; ');
		
		// Define a permission identifier variable that identifies whether you have permissions
		let flag = false;
		// Iterate 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 list of permissions retrieved from the server contains the permissions required by the component, set flag to true and break the loop
				flag = true;
				break; }}// If flag is false, the element is removed or hidden
		if(!flag) el.parentNode && el.parentNode.removeChild(el);
	}
})
Copy the code

When the code runs, we see that all the buttons are visible to the corresponding administrator, while only the Update and Query buttons are visible to the general user.

conclusion

The above is about the element or component permission check custom instructions to implement the analysis of ideas. Finally, we implemented a simple little demo, with some simple logic analysis. In the formal development also need to do the corresponding logic development according to business needs.

Good this article is introduced here, welcome to like the little partner to add attention to the message oh!