通过自定义指令实现菜单显示和权限控制问题。

一、新建一个在src目录下创建包directives，在包中创建一个ts文件。

import { useStore } from "@/store/pinia";

function hasRoles(role: any) {
  const pinaRoles = useStore().roles;
  if (typeof role === "string") {
    return pinaRoles.includes(role);
  } else if (Array.isArray(role)) {
    return pinaRoles.some((item) => role.includes(item));
  } else {
    return false;
  }
}
function hasPermissions(permissions: any) {
  const pinaPermissions = useStore().permissions;
  if (typeof permissions === "string") {
    return pinaPermissions.includes(permissions);
  } else if (Array.isArray(permissions)) {
    return pinaPermissions.some((item) => permissions.includes(item));
  } else {
    return false;
  }
}
export default {
  mounted(el: any, binding: any) {
    let type = binding.arg;

    if (type === "role") {
      if (!hasRoles(binding.value)) {
        el.remove();
      }
    } else {
      if (!hasPermissions(binding.value)) {
        el.remove();
      }
    }
  },
};

二、在main.ts中引入和使用自定义组件。

import { createApp } from "vue";
import App from "@/App.vue";
//引入自定义指令
import auth from "@/directives/auth";

const app = createApp(App);

//使用自定义指令
app.directive("auth", auth);
//挂载，最后挂载
app.mount("#app");

 三、后端需要将查询到权限返回给前端，然后前端将其存入pinia中。

四、具体应用。