vue 前端配置按钮权限

1. 拿到产品需要配置的按钮权限清单，如下
   
2. 在中台 资源管理 配置中，根据页面位置添加，'权限标识’名称不可重复
   
   
   注意一定要是菜单类型按钮，然后在"权限管理"通过勾选赋予按钮权限
   
3. 登录后获取后台返回的按钮权限数据，转换得到按钮key数组：btnPermissions（根据后台返回结构自行决定是否需要转换），将btnPermissions存储到session storage

let btnPermissions = ['domain:query','domain:add','domain:edit','domain:cache','domain:del','domain:define','domain:transition']
sessionStorage.setItem('btnPermissions', JSON.stringify(btnPermissions));

4. 新建个js，directive.js

import Vue from 'vue'
const has = Vue.directive('has', {
	inserted: function (el, binding, vnode) {
		let btnPermissions = el.getAttribute("value");
		if (!Vue.prototype.$_has(btnPermissions)) {
			//这个时候就是没有权限，需要删除掉按钮
			el.parentNode.removeChild(el);
		}
	}
});
// 权限检查方法
Vue.prototype.$_has = function (value) {
	let isExist = false;
	let btnPermissionsStr = JSON.parse(sessionStorage.getItem("btnPermissions"));
	if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
		return false;
	}
	if (btnPermissionsStr.indexOf(value) > -1) {
		isExist = true;
	}
	return isExist;
};

export default has;

5. 在main.js中引入js

import has from '@/api/directive.js';

6. 在页面中，按钮上加入 v-has 指令和 value=‘zt:cop-add’ 绑定按钮权限

<el-form-item>
	<el-button type="primary" icon="el-icon-search" v-on:click="getRows" value='domain:query' v-has>查询</el-button>
</el-form-item>

原理解析

v-has是自定义的钩子，会在inserted的时机，去调用directive.js中的方法，去判断自己是否显示，value='domain:query’是其中的判断条件，必须唯一，所以这里强制约定为routes定义的component属性的一个字母小写

注意：不能和v-if共同使用，可以和v-show共同使用

此篇为补充声明，原博客：https://blog.csdn.net/qq_34652478/article/details/100927471