vue3 组件级权限控制

权限控制程度分为：1. 页面级 2. 组件级 3. 代码级

1. 页面级

这是大部分前端遇到的级别。依靠路由守卫，如果没有权限，就看不到菜单，就进不到页面。不会给页面带来侵入性。什么是侵入性，就是写页面组件的时候，还要考虑权限。

2. 组件级

有没有权限都可以看到页面组件，但是不同权限的人，看到的东西不同。比如按钮，没有权限的操作不了，或者看不到这个按钮。这就会产生一些侵入性，写页面组件的时候，需要考虑到权限。

我们现在要做的就是尽量减少组件级权限控制带来的侵入性。如果权限只是控制可见度的话，我们还可以做优化，如果是不同权限，点击按钮调用不同函数的话，那就不好优化了。现在针对第一种情况来优化。

我们可以用一个权限组件将需要权限控制的组件包裹住。给属性 permissions 传入参数，如果权限包含 'sys:user:add' 就显示按钮。

<Authority permissions="sys:user:add"><button>新增用户</button>
</Authority><Authority :permissions="['sys:user:view', 'sys:user:update']"><button>新增用户</button>
</Authority>

如果权限控制的不是显示隐藏，而是控制的能否点击呢，我们这个组件可以交还一些控制权，让开发人员根据情况去控制。通过作用域插槽，返回用户的所有权限 userPermissions。

<Authority><template #default="{ userPermissions }"><button :disabled="!userPermissions.includes('sys:user:add')">新增用户</button></template>
</Authority>

我们这个组件提供了两个功能：一个预设的可见不可见，一个让开发者自行处理。代码如下：

<template><slot v-if="showSlot" :userPermissions="permissions"></slot>
</template><script setup>import { computed } from "vue";import { useAuth } from "./useAuth.js";const props = defineProps({permission: {type: [String, Array],},});const { permissions } = useAuth();const showSlot = computed(() => {if (!props.permission) {// 没传入权限，直接显示return true;}if (!permissions) {// 没有任何权限，直接隐藏return false;}if (Array.isArray(props.permission)) {return props.permission.every((p) => permissions.includes(p));} else {return permissions.includes(props.permission);}});
</script>