Implementation of vue button level permission control

Summarize the front-end control method for button-level permissions. According to the permission data returned by the back-end, users with different permissions can display different operation buttons. There are two implementation methods: define a global method with v-if instruction; custom instruction.

First, save the permission data returned by the interface to localStorage. Let's take the following format as an example:

let permissions = ['add', 'edit', 'cancel', 'confirm', 'delete', 'detail', 'search', 'download', 'back']

1. Define a global method with v-if instruction

Create a permission.js file in the utils folder

//先获取本地权限数据 permissions 
let btnPermission = (data) => {
    
    
	let permissions = JSON.parse(localStorage.getItem('permissions '));
	let isHave = permissions.includes(data);
	return isHave;
}
export default btnPermission;

Introduced in main.js

import btnPermission from './utils/btnPermission.js';
Vue.prototype.$has = btnPermission;

Then use it directly on the page

<template>
	<div>
		<button v-if='$has('add')'>新增</button>
		<button v-if='$has('edit')'>编辑</button>
		<button v-if='$has('delete')'>删除</button>
	</div>
</template>

2. Custom instructions

Define a permission.js file under the directive folder

//先获取本地权限数据 permissions 
import Vue from 'vue';
let has = {
    
    
	install(Vue){
    
    
		Vue.directive('has',{
    
    
			bind(el,binding,vnode){
    
    
				let {
    
    value} = binding;
				//判断是否有权限
				let hasBtn = permissions.includes(value);
				//没有权限则删除父元素，或者隐藏当前元素
				if (!hasBtn) {
    
    
			        if (!el.parentNode) {
    
    
			            el.style.display = 'none'
			        } else {
    
    
			            el.parentNode.removeChild(el)
			        }
		      	}
			}
		})
	}
}
export default has;

Introduced in main.js

import has from './directive/btnPermissionjs';
Vue.use(has);

Then use it directly on the page

<template>
	<div>
		<button v-has='add'>新增</button>
		<button v-has='edit'>编辑</button>
		<button v-has='delete'>删除</button>
	</div>
</template>

Menu permission control is in this article "Vue menu permission control implementation"