# 背景这标题属实有点长，讲的是这样一个问题：在后台管理系统中，我们常封装一个 Vue [自定义指令](https://cn.vuejs.org/guide/reusability/custom-directives.html) `v-auth` 来实现按钮级的权限控制： ```html ``` 假如我们把用户登陆后的权限信息放在 localStroage 中，那么 `v-auth` 就很简单: ```js // 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](https://cn.vuejs.org/api/reactivity-core.html#watcheffect)。指令的 `mounted` 钩子可以改成这样： ```js // 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`](https://www.npmjs.com/package/easy-v-auth)。安装后，在 `main.js` 中引入并挂载。假设我们把用户权限存在 pinia 中，就可以这样使用： ```js // 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 中，那也可以这样写： ```js const auth = createAuth({ getRoles: () => localStorage.getItem('role'), getPermissions: () => localStorage.getItem('permission'), }); ``` 挂载后，你就可以在组件中使用它： ```html ``` 在上面的例子中，在获得用户权限之前，所有按钮都不可见；在获得之后，【员工、用户可用】、【有读权限】和【有读、写权限】显示，其他按钮被移除。

测试