vue3 权限菜单 权限按钮怎么封装

在 Vue3 中，你可以通过自定义指令或组件的方式来封装权限菜单和权限按钮。

1. 自定义指令

你可以通过自定义指令来实现权限按钮的封装。例如，你可以创建一个名为 `v-permission` 的指令，然后在需要控制权限的按钮上使用该指令。在指令中，你可以通过判断用户是否拥有相应的权限来控制按钮的显示或隐藏。

示例代码：

<template>
  <button v-permission="'edit'">编辑</button>
</template>

<script>
export default {
  directives: {
    permission: {
      mounted(el, binding) {
        const permission = binding.value;
        const hasPermission = checkPermission(permission);
        if (!hasPermission) {
          el.style.display = 'none';
        }
      }
    }
  }
}
</script>

2. 组件

你也可以通过组件的方式来封装权限菜单和权限按钮。例如，你可以创建一个名为 `PermissionMenu` 的组件，然后在该组件中根据用户是否拥有相应的权限来动态生成菜单。

示例代码：

<template>
  <ul>
    <li v-for="item in menu" :key="item.path">
      <router-link v-if="hasPermission(item.permission)" :to="item.path">{{ item.title }}</router-link>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        {
          path: '/',
          title: '首页',
          permission: 'home'
        },
        {
          path: '/user',
          title: '用户管理',
          permission: 'user'
        },
        {
          path: '/role',
          title: '角色管理',
          permission: 'role'
        }
      ]
    }
  },
  methods: {
    hasPermission(permission) {
      return checkPermission(permission);
    }
  }
}
</script>

无论是自定义指令还是组件，都需要在代码中实现权限的判断逻辑，以保证权限的正确控制。