封装属于自己的自定义权限按钮

1.创建一个 Vue 组件： 首先，创建一个 Vue 组件，这个组件将充当你的自定义权限按钮。

<template>
  <button @click="handleClick" v-if="hasPermission">
    <slot></slot>
  </button>
</template>

<script>
export default {
  props: {
    permission: String, // 接受权限标识作为属性
  },
  computed: {
    hasPermission() {
      // 在这里检查用户是否具有权限
      // 你可以使用你的权限管理逻辑来进行检查
      // 返回 true 表示有权限，返回 false 表示没有权限
      return this.checkPermission(this.permission);
    },
  },
  methods: {
    checkPermission(permission) {
      // 实现权限检查逻辑
      // 根据你的需求检查用户是否具有权限
      // 这可以是一个从后端获取权限信息的异步操作
      return true; // 临时返回 true，模拟用户具有权限
    },
    handleClick() {
      // 在按钮点击时执行的操作
      this.$emit('click'); // 触发 click 事件
    },
  },
};
</script>

在上面的代码中，我们创建了一个名为 PermissionButton 的组件，它接受一个名为 permission 的属性，用于传递权限标识。在 computed 中，我们使用 hasPermission 属性来检查用户是否具有权限，并根据权限状态来显示或隐藏按钮。当用户点击按钮时，它将触发 click 事件。

2.使用自定义权限按钮组件： 在你的应用中，你可以使用这个自定义权限按钮组件并传递权限标识。示例：

<template>
  <div>
    <PermissionButton permission="system:user:add" @click="addUser">添加用户</PermissionButton>
    <PermissionButton permission="system:user:edit" @click="editUser">编辑用户</PermissionButton>
  </div>
</template>

<script>
import PermissionButton from './PermissionButton.vue';

export default {
  components: {
    PermissionButton,
  },
  methods: {
    addUser() {
      // 执行添加用户操作
    },
    editUser() {
      // 执行编辑用户操作
    },
  },
};
</script>

在这个示例中，我们在父组件中使用了 PermissionButton 组件，并为每个按钮传递不同的权限标识。当用户单击按钮时，会触发相应的方法。

3. 实现权限检查逻辑： 在 PermissionButton 组件的 checkPermission 方法中，你需要实现实际的权限检查逻辑。这通常涉及到从后端或其他地方获取用户的权限信息，然后根据权限标识检查用户是否具有相应的权限。