@opentiny/tiny-toolkit-pro/template/tinyvue/src/directive/permission/index.ts

TinyPro Vue：开箱即用、前后端分离的 Vue 后台管理模板

import { useUserStore } from '@/store';

async function checkPermission(el: HTMLElement, binding: { value: string }) {
  const { value } = binding;
  // // 获取role的permission
  const userStore = useUserStore();
  const { rolePermission } = userStore;
  const permissionList: string[] = rolePermission;
  const hasPermission =
    permissionList.includes(value) || permissionList.includes('*');
  if (!hasPermission) {
    el.remove();
  }
}

export default {
  mounted(el: HTMLElement, binding: any) {
    checkPermission(el, binding);
  },
  updated(el: HTMLElement, binding: any) {
    checkPermission(el, binding);
  },
};