背景
这标题属实有点长,讲的是这样一个问题:在后台管理系统中,我们常封装一个 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>
在上面的例子中,在获得用户权限之前,所有按钮都不可见;在获得之后,【员工、用户可用】、【有读权限】和【有读、写权限】显示,其他按钮被移除。