vue 按钮权限分配

在 Vue 中实现按钮权限分配的方法有很多种，以下是一种常见的实现方法：

1. 在后端数据库中维护每个用户所具有的权限列表，例如可以将权限信息存储在角色表中。

2. 在前端使用 Vue Router 管理路由，并在路由元信息中添加该路由对应的权限。

3. 在组件中根据用户权限动态渲染页面，可以使用 v-if 或 v-show 来实现。

4. 在按钮组件中通过判断当前用户是否具有对应的权限来控制按钮是否可用，可以使用 v-bind:disabled 来绑定按钮的禁用状态。

以下是一个示例代码：

<template>
  <div>
    <button v-if="hasPermission('add')" @click="handleAdd">添加</button>
    <button v-if="hasPermission('edit')" @click="handleEdit">编辑</button>
    <button v-if="hasPermission('delete')" @click="handleDelete">删除</button>
  </div>
</template>

<script>
export default {
  methods: {
    hasPermission(permission) {
      const permissions = this.$store.getters.permissions // 从 Vuex 中获取当前用户的权限列表
      return permissions.includes(permission)
    },
    handleAdd() {
      // 处理添加操作
    },
    handleEdit() {
      // 处理编辑操作
    },
    handleDelete() {
      // 处理删除操作
    }
  }
}
</script>

在上述示例代码中，我们使用了 Vuex 来管理全局状态，其中 `permissions` 是一个存储当前用户权限列表的 state，`hasPermission` 方法用于判断当前用户是否具有某个权限，`handleAdd`、`handleEdit` 和 `handleDelete` 分别处理对应的操作。根据当前用户是否具有对应的权限来动态渲染页面，并控制按钮是否可用。