基于 Composition API 的 Vue 3 组件权限控制方案-js教程-PHP中文网

基于 Composition API 的 Vue 3 组件权限控制方案

心靈之曲

发布： 2025-07-10 17:06:02

原创

700人浏览过

基于 composition api 的 vue 3 组件权限控制方案

本文介绍了一种基于 Vue 3 Composition API 的组件权限控制方案，旨在解决在组件内部根据用户权限动态控制元素显示的问题。通过定义组件的权限需求，并结合 Composables 从 localStorage 获取用户权限，可以实现细粒度的权限控制，避免代码冗余和重复逻辑。

在实际的 Vue 3 项目中，经常会遇到需要根据用户权限来控制组件中某些元素是否显示的情况。例如，一个“字典”组件，可能需要根据用户是否拥有“创建”、“编辑”、“删除”等权限来决定是否显示对应的按钮。传统的做法可能会导致大量的 v-if 判断，代码冗余且难以维护。本文提供一种基于 Composition API 的解决方案，可以更加优雅地实现组件级别的权限控制。

方案概述

该方案的核心思想是将组件所需的权限定义在组件内部，然后通过一个全局的 Composables 来获取用户权限，并根据用户权限来动态地控制组件的显示。

立即学习“前端免费学习笔记（深入）”；

具体实现

定义组件权限需求

在组件中使用 defineComponent 定义权限需求。例如，对于一个“字典”组件，可以这样定义：

import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    claims: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    // ...
  }
});

登录后复制

这里，我们通过 props 接收一个名为 claims 的对象，用于定义该组件需要的权限。

创建 Composables 获取用户权限

创建一个 Composables，用于从 localStorage 获取用户权限，并将其转换为一个易于使用的格式。

// composables/useUserClaims.ts
import { ref, onMounted } from 'vue';

export function useUserClaims() {
  const userClaims = ref<string[]>([]); // 存储用户权限的数组

  onMounted(() => {
    // 从 localStorage 获取用户权限
    const storedClaims = localStorage.getItem('userClaims');
    if (storedClaims) {
      try {
        userClaims.value = JSON.parse(storedClaims);
      } catch (error) {
        console.error('Failed to parse user claims from localStorage:', error);
      }
    }
  });

  return {
    userClaims
  };
}

登录后复制

这个 Composables 使用 ref 创建一个响应式的 userClaims 数组，并在组件挂载后从 localStorage 获取用户权限。

在组件中使用 Composables 检查权限

在组件的 setup 函数中使用 useUserClaims Composables 获取用户权限，并根据组件定义的权限需求来判断用户是否拥有相应的权限。

// components/Dictionary.vue
import { defineComponent, computed } from 'vue';
import { useUserClaims } from '@/composables/useUserClaims';

export default defineComponent({
  props: {
    claims: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    const { userClaims } = useUserClaims();

    const createEnabled = computed(() => userClaims.value.includes(props.claims.create));
    const editEnabled = computed(() => userClaims.value.includes(props.claims.edit));
    const deleteEnabled = computed(() => userClaims.value.includes(props.claims.delete));

    return {
      createEnabled,
      editEnabled,
      deleteEnabled
    };
  }
});

登录后复制

这里，我们使用 computed 创建了三个计算属性 createEnabled、editEnabled 和 deleteEnabled，分别用于判断用户是否拥有“创建”、“编辑”和“删除”权限。

在模板中使用权限控制

在组件的模板中使用 v-if 指令，根据计算属性的值来控制元素的显示。

<template>
  <div>
    <button v-if="createEnabled">创建</button>
    <button v-if="editEnabled">编辑</button>
    <button v-if="deleteEnabled">删除</button>
  </div>
</template>

登录后复制

示例代码

以下是一个完整的示例代码：

// composables/useUserClaims.ts
import { ref, onMounted } from 'vue';

export function useUserClaims() {
  const userClaims = ref([]);

  onMounted(() => {
    const storedClaims = localStorage.getItem('userClaims');
    if (storedClaims) {
      try {
        userClaims.value = JSON.parse(storedClaims);
      } catch (error) {
        console.error('Failed to parse user claims from localStorage:', error);
      }
    }
  });

  return {
    userClaims
  };
}

// components/Dictionary.vue
import { defineComponent, computed } from 'vue';
import { useUserClaims } from '@/composables/useUserClaims';

export default defineComponent({
  props: {
    claims: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    const { userClaims } = useUserClaims();

    const createEnabled = computed(() => userClaims.value.includes(props.claims.create));
    const editEnabled = computed(() => userClaims.value.includes(props.claims.edit));
    const deleteEnabled = computed(() => userClaims.value.includes(props.claims.delete));

    return {
      createEnabled,
      editEnabled,
      deleteEnabled
    };
  }
});

登录后复制

// components/Dictionary.vue (template)
<template>
  <div>
    <button v-if="createEnabled">创建</button>
    <button v-if="editEnabled">编辑</button>
    <button v-if="deleteEnabled">删除</button>
  </div>
</template>

登录后复制

注意事项