vue 按钮级别权限控制实现

总结一下前端对于按钮级别权限的控制方法，根据后端返回的权限数据来实现不同权限的用户展示不同的操作按钮。实现方法有两种：定义一个全局方法配合 v-if 指令；自定义指令。

首先，将接口返回的权限数据保存到 localStorage 里。我们这里以下面的格式为例：

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

1、定义一个全局方法配合 v-if 指令

在 utils 文件夹创建一个 permission.js 文件

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

在 main.js 里面引入

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

然后再页面上直接使用

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

2、自定义指令

在 directive 文件夹下面定义一个 permission.js 文件

//先获取本地权限数据 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;

在 main.js 里面引入

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

然后再页面上直接使用

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

菜单权限控制在这篇文章里 《vue 菜单权限控制实现》