vue2 按钮权限控制组件 Authority

最新推荐文章于 2025-04-22 10:14:21 发布

原创最新推荐文章于 2025-04-22 10:14:21 发布 · 584 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端

文章介绍了如何使用Vue的插槽功能，结合`hasPermission`计算属性，实现根据角色和权限动态显示或隐藏内容的组件。示例中详细展示了管理员和普通用户的不同权限场景。

注意：核心思想是使用插槽的方式，控制显示隐藏

第一步，创建一个名为Authority.vue的文件，并编写以下代码：

<template>
  <div>
    <slot v-if="hasPermission">{{ $slots.default }}</slot>
  </div>
</template>

<script>
export default {
  props: {
    role: {
      type: String,
      default: ''
    },
    permissions: {
      type: Array,
      default: () => []
    },
    permission: {
      type: String,
      default: ''
    }
  },
  computed: {
    hasPermission() {
      // 根据角色和权限判断是否有权限
      if (this.role === 'admin') {
        return true; // 管理员拥有所有权限
      }
      return this.permissions.includes(this.permission);
    }
  }
};
</script>

这里使用了插槽来显示具有权限的内容。hasPermission属性根据传入的角色和权限数据决定是否显示插槽内容。

然后，在使用该组件的地方，可以按照以下方式进行使用：

<template>
  <div>
    <authority :role="'admin'">
      <button>管理员才能看到的按钮</button>
    </authority>
    
    <authority
      :role="'user'"
      :permissions="['view:user']"
      :permission="'view:user'"
    >
      <div>普通用户只有在拥有查看用户权限时才能看到的内容</div>
    </authority>
    
    <authority
      :role="'user'"
      :permissions="['edit:user']"
      :permission="'view:user'"
    >
      <div>普通用户只有在拥有编辑用户权限时才能看到的内容</div>
    </authority>
  </div>
</template>

<script>
import Authority from '@/components/Authority.vue';

export default {
  components: {
    Authority
  }
};
</script>

这里展示了三个使用场景，其中第一个authority组件中，传入role='admin'，表示只有管理员可以看到插槽中的内容，因此按钮会被显示。第二个和第三个authority组件中，传入role='user'，表示是普通用户，但是在拥有view:user或edit:user权限时，才能看到插槽中的内容。

通过这种方式，你可以灵活地根据具体情况来进行组合和使用，来实现更丰富的权限控制逻辑。