按钮级权限指令 v-auth 内部用户权限异步获取的问题

背景

这标题属实有点长，讲的是这样一个问题：在后台管理系统中，我们常封装一个 Vue 自定义指令 v-auth 来实现按钮级的权限控制：

<button v-auth="'admin'">仅管理员可用</button>

假如我们把用户登陆后的权限信息放在 localStroage 中，那么 v-auth 就很简单:

// main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 注册指令
app.directive('auth', {
    created(el) {
        // 先隐藏
        el.style.visibility = 'hidden';
    },
    mounted(el, binding) {
        // 用户角色
        const role = localStorage.getItem('role');
        // 指令传入的角色
        const { value } = binding;
        if(role === value){
            // 通过 - 恢复显示
            el.style.visibility = 'visible';
        }else{
            // 不通过 - 移除元素
            el.parentNode.removeChild(el);
        }
    }
})

app.mount('#app');

但实际上登录态持久化的方案有很多。我们也可以只把登录后的 token 存在本地，每次用户打开页面再去请求身份信息，然后存进状态管理（如 Pinia）中。这样更加安全，也能确保身份信息是最新的。

然而由于请求是异步的，在接口返回用户信息之前，指令中的 mounted 钩子就已经执行了。此时状态管理中的用户信息是空白的，因此权限验证一定不通过。

解决思路

为了让接口返回用户信息之后，v-auth 能够再次进行权限验证，我们需要用到 watchEffect API。指令的 mounted 钩子可以改成这样：

// main.js
import { createApp, watchEffect } from 'vue';

...

mounted(el, binding){
    // 把验证逻辑放在一个函数里
    function checkAuth() {
        // 用户角色 - 来自 pinia
        const role = getRoleFromPinia();
        // 指令传入的角色
        const { value } = binding;
        if(role === value){
            // 通过 - 恢复显示
            el.style.visibility = 'visible';
        }else{
            // 不通过 - 移除元素
            el.parentNode.removeChild(el);
        }
    }
    
    // 初始化检查
    checkAuth();

    // 使用 watchEffect 监听权限变化
    watchEffect(() => {
        checkAuth();
    });
}

watchEffect 会响应式地追踪函数的依赖，并在依赖更改时重新执行函数。在我们的例子中，依赖就是存在 Pinia 中的用户权限信息。权限信息变化后，就会重新执行 checkAuth 检验权限。

拓展

实践中，v-auth 会比上面示例复杂得多。例如我们可以使用角色-权限模型来实现权限控制，即一个用户有若干个角色，一个角色有若干的权限。那么我们就可能需要从角色或权限的维度来控制，比如使用 v-auth:role 和 v-auth:permission 分别实现。

此外，有时候我们希望用户拥有某个权限就通过验证，有时候希望必须拥有指定的所有权限才算通过验证，也就是类似 Or 和 And 的逻辑。

考虑到这是个非常通用、常见的功能，我封装了一个包发布在 npm 上：easy-v-auth。

安装后，在 main.js 中引入并挂载。假设我们把用户权限存在 pinia 中，就可以这样使用：

// main.js
import { createApp } from 'vue';
import App from './App.vue';

import { createPinia } from 'pinia';
import { useStore } from './state';

import { createAuth } from 'easy-v-auth';

// 挂载 Pinia
const pinia = createPinia();
const app = createApp(App).use(pinia);

// 注意：使用 Pinia 之前，需要先挂载 Pinia，因此这段代码需要放在 .use(pinia) 之后
const store = useStore();

// 假设用户权限存在 Pinia 中，这里就传入 store
const auth = createAuth({
    getRoles: () => store.user?.role, // 角色信息
    getPermissions: () => store.user?.permission, // 权限信息
    defaultArg: 'permission', // 默认的指令参数，可选 'role' | 'permission'
});

// 注册 v-auth 指令
app.use(auth).mount('#app');

当然如果你把用户信息存在 localStorage 中，那也可以这样写：

const auth = createAuth({
    getRoles: () => localStorage.getItem('role'),
    getPermissions: () => localStorage.getItem('permission'),
});

挂载后，你就可以在组件中使用它：

<template>
  <h1>测试</h1>
  <button v-auth="['staff', 'user']">员工、用户可用</button>
  <button v-auth="'admin'">管理员可用</button>
  <button v-auth:permission="['user::read']">有读权限</button>
  <button v-auth:permission.and="['user::read', 'user::write']">有读、写权限</button>
  <button v-auth:permission="['user::delete']">有删权限</button>
  <button v-auth:permission.and="['user::read', 'user::write', 'user::delete']">
      有读、写、删权限
  </button>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { useStore } from './state';
const store = useStore();

onMounted(() => {
    // 模拟异步获取用户权限信息
    setTimeout(() => {
        store.user = {
            role: 'staff',
            permission: ['user::read', 'user::write'],
        };
    }, 1000);
});
</script>

在上面的例子中，在获得用户权限之前，所有按钮都不可见；在获得之后，【员工、用户可用】、【有读权限】和【有读、写权限】显示，其他按钮被移除。