按钮级权限指令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能够再次进行权限验证，我们需要用到watchEffectAPI。指令的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>
在上面的例子中，在获得用户权限之前，所有按钮都不可见；在获得之后，【员工、用户可用】、【有读权限】和【有读、写权限】显示，其他按钮被移除。
目录