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>

3. 代码级（函数级）

哪些权限的人可以调用这个函数，哪些不可以。或者调这个函数产生不同的结果。但是这种情况很少。