目前项目中需要做到按钮级别的控制,所以想到了自定义指令来实现,在自定义指令中来控制组件的显示于隐藏。
1.第一步创建自定义指令 js 文件: permission.js
2.在main.js中直接引入import '@.../../permission' 文件
// permission.jsimport Vue from "vue"// 立即执行函数,这样可以在mian函数直接引入文件不需要写而外的代码(function(){Vue.directive("permission",{inserted:function(el,binding){// 获取用户权限 [每个人存放用户权限的位置不一致，需要根据自己的业务进行相应的修改]let user_permissions = localStorage.getItem('permissions') || [];// 获取指令中配置的权限let permissions = [];var type = Object.prototype.toString.call(binding.value);switch(type){case '[object Array]':permissions = binding.value;break;case '[object Number]':permissions.push(binding.value);break;default:permissions = binding.value.split('|');break;}// 配置默认 admin 可以范围所有,这里可以结合你的业务进行调整 permissions.push('admin'); // 默认不隐藏let flag = false;if(user_permissions.length == 0) flag = true;else {console.log([...new Set(permissions)]);console.log(user_permissions);if(user_permissions.length == 0)flag = true;else {flag = [...new Set(permissions)].filter(item => user_permissions.indexOf(item) >= 0 ).length > 0;} }// 用户权限不足则隐藏if(!flag)el.parentNode && el.parentNode.removeChild(el);}});})();// main.js 直接引入不需要做其他操作import '../.../directives/permission'// 组件中使用<div v-permission="'admin|user'">Welcome</div>或者<div v-permission="['admin','user']">Welcome</div>
