vue3 自定义指令权限控制

日常开发中权限控制有两种情况，
第一种情况是在路由拦截那里控制菜单栏的显示隐藏及跳转操作，
第二种情况是页面上某一个按钮控制是否隐藏

第一种情况

这种一般是在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')