日常开发中权限控制有两种情况，
第一种情况是在路由拦截那里控制菜单栏的显示隐藏及跳转操作，
第二种情况是页面上某一个按钮控制是否隐藏
第一种情况
这种一般是在js中或者el-menu中处理，所以就不简述了
第二种情况
index.vue
<el-button
class="el-button-delete"
@click="handleDelete"
v-permission="'delete'"
><i class="el-icon-delete"></i>删除</el-button>
config/index.js
const permissionFn = function (code) {
let arr = ['edit','add']; // 没有删除权限
// let arr = ['edit','delete','add']; // 有删除权限
sessionStorage.setItem('authCode',arr); // 这里使用vuex更好，本次只是模拟
let authCodes = sessionStorage.getItem('authCode'); // 这里使用vuex更好，本次只是模拟
return authCodes.includes(code);
};
directive/permission.js
import { permissionInit } from '@/config/index';
export default {
mounted (el, binding) {
let permission = binding.value;
if (permission) {
let hasPermission = permissionInit(permission);
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el);
}
}
}
}
main.js
import { createApp } from 'vue'
import App from './App.vue'
import permission from '@/directives/permission';
createApp(App)
.directive('permission', permission)
.mount('#app')
