本文介绍了一种基于 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([]); // 存储用户权限的数组
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 获取用户权限。
mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提
- 在组件中使用 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 指令，根据计算属性的值来控制元素的显示。
示例代码
以下是一个完整的示例代码：
// 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)
注意事项
- localStorage 存储的数据是字符串，需要使用 JSON.parse 和 JSON.stringify 进行转换。
- 在实际项目中，用户权限的获取方式可能更加复杂，例如从 API 获取。
- 该方案只适用于简单的权限控制，对于复杂的权限控制，可能需要使用更专业的权限管理方案。
- 注意claims传入组件时，需要保证类型正确，否则会导致判断出错。
总结
通过使用 Composition API 和 Composables，可以更加优雅地实现 Vue 3 组件级别的权限控制。该方案可以减少代码冗余，提高代码可维护性，并使组件更加易于测试。该方案的优点在于：
- 解耦性高：权限逻辑与组件逻辑分离，便于维护和扩展。
- 复用性强：Composables 可以被多个组件复用，避免重复代码。
- 可测试性好：Composables 可以单独进行单元测试。
希望本文能够帮助你更好地理解和使用 Vue 3 Composition API，并为你的项目带来更好的开发体验。
