vue3按钮级权限控制及权限按钮的封装

Vue3 的按钮级权限控制可以通过如下步骤实现：

1. 定义权限列表：在后端定义权限列表，包括所有需要控制的操作，如增删改查等。

2. 获取用户权限：在用户登录成功后，从后端获取用户的权限列表。

3. 权限校验：在前端页面中需要控制权限的按钮或链接中，根据用户权限列表判断是否显示或禁用该按钮或链接。

在实际开发中，可以将权限校验封装成一个指令或组件，方便重复使用。

以下是一个权限按钮的封装示例：

<template>
  <button :disabled="!hasPermission" @click="handleClick">
    <slot></slot>
  </button>
</template>

<script>
import { computed } from 'vue'

export default {
  props: {
    permission: {
      type: String,
      required: true
    }
  },
  setup(props, { emit }) {
    const userPermissions = ['add', 'update', 'delete'] // 假设用户权限列表为 ['add', 'update', 'delete']
    const hasPermission = computed(() => userPermissions.includes(props.permission))

    function handleClick() {
      if (hasPermission.value) {
        emit('click')
      } else {
        // 如果没有权限，可以弹出提示
        alert('您没有该操作的权限')
      }
    }

    return {
      hasPermission,
      handleClick
    }
  }
}
</script>

在使用时，可以这样写：

<template>
  <div>
    <PermissionButton permission="add" @click="handleAdd">添加</PermissionButton>
    <PermissionButton permission="update" @click="handleUpdate">修改</PermissionButton>
    <PermissionButton permission="delete" @click="handleDelete">删除</PermissionButton>
  </div>
</template>

<script>
import PermissionButton from '@/components/PermissionButton.vue'

export default {
  components: {
    PermissionButton
  },
  methods: {
    handleAdd() {
      // 执行添加操作
    },
    handleUpdate() {
      // 执行修改操作
    },
    handleDelete() {
      // 执行删除操作
    }
  }
}
</script>

这样就可以根据用户权限列表控制按钮的显示和禁用了。