vue3 根据接口返回的参数 进行按钮的权限管理 ，多个页面，每个页面上有好几种操作按钮 怎么封装组件 代码

如果每个页面上有多个操作按钮，并且需要根据接口返回的参数进行权限管理，可以封装一个名为"PermissionButton"的组件，该组件接收两个参数：按钮文本和权限标识符。

代码如下：

<template>
  <button v-if="hasPermission" @click="$emit('click')">
    {{ buttonText }}
  </button>
</template>

<script>
export default {
  props: {
    buttonText: {
      type: String,
      required: true
    },
    permissionIdentifier: {
      type: String,
      required: true
    },
    userPermissions: {
      type: Array,
      required: true
    }
  },
  computed: {
    hasPermission() {
      return this.userPermissions.includes(this.permissionIdentifier);
    }
  }
};
</script>

在这个组件中，我们通过props接收了三个参数：

- buttonText：按钮文本
- permissionIdentifier：权限标识符
- userPermissions：用户权限列表

然后，我们在computed属性中定义了一个"hasPermission"计算属性，用来判断当前用户是否拥有该按钮的权限。具体实现是通过判断用户权限列表中是否包含该按钮的权限标识符。

最后，我们在模板中使用v-if指令判断用户是否拥有该按钮的权限。如果用户拥有权限，就显示按钮，否则不显示。

在每个页面的代码中，我们可以将需要进行权限控制的按钮封装成PermissionButton组件，传递相应的参数。代码示例如下：

<template>
  <div>
    <permission-button
      buttonText="添加用户"
      permissionIdentifier="addUser"
      :userPermissions="userPermissions"
      @click="addUser"
    />
    <permission-button
      buttonText="删除用户"
      permissionIdentifier="deleteUser"
      :userPermissions="userPermissions"
      @click="deleteUser"
    />
    <permission-button
      buttonText="修改用户"
      permissionIdentifier="updateUser"
      :userPermissions="userPermissions"
      @click="updateUser"
    />
    <!-- 其他需要进行权限控制的按钮 -->
  </div>
</template>

<script>
import PermissionButton from "@/components/PermissionButton.vue";

export default {
  components: {
    PermissionButton
  },
  data() {
    return {
      userPermissions: []
    };
  },
  methods: {
    addUser() {
      // 添加用户逻辑
    },
    deleteUser() {
      // 删除用户逻辑
    },
    updateUser() {
      // 修改用户逻辑
    }
    // 其他需要进行权限控制的方法
  }
};
</script>

在这个代码示例中，我们将多个PermissionButton组件放在了一个div中，分别传递了不同的按钮文本和权限标识符。同时，我们将用户权限列表传递给了每个PermissionButton组件，并在@click事件中定义了相应的逻辑方法。

这样，我们就可以在多个页面中使用PermissionButton组件，实现对多个操作按钮进行权限控制。