第二十六节进阶按钮权限指令 v‑perm 完整实现与权限控制实战本节目标手写 Vue3 自定义指令v‑perm实现按钮权限控制对接后端返回的权限标识集合没有权限直接移除 DOM 按钮在 Pinia 用户状态里存储用户权限集合在用户管理页面已有按钮上实战使用v‑perm理解路由权限、按钮权限的区别业务场景不同角色看到的按钮不一样普通角色看不到【新增、删除】按钮。步骤 1在 Pinia 用户 store 增加权限数组打开src/stores/user.jsimport { defineStore } from pinia export const useUserStore defineStore(user, { state: () { return { token: , username: , // ✅存储当前用户拥有的权限标识数组 permissions: [] } }, actions: { /** * 保存用户信息和权限 */ setUserInfo(info) { this.username info.username // 后端返回 permissions:[system:user:add,system:user:edit,system:user:remove] this.permissions info.permissions || [] }, logout() { this.token this.username this.permissions [] } } })步骤 2修改 mock 获取用户信息接口返回权限标识src/mock/index.js/api/getUserInfo: () { return { code: 200, msg: 获取成功, data: { username: admin, roles: [admin], // ✅admin账号拥有全部按钮权限 permissions: [ system:user:add, system:user:edit, system:user:remove ] } } }测试如果想要模拟无删除权限把system:user:remove删掉页面删除按钮会自动消失。步骤 3封装自定义权限指令 src/directive/perm.js新建文件夹src/directive新建文件perm.jsimport { useUserStore } from /stores/user /** * v‑perm 权限指令 * 使用示例 v‑permsystem:user:add */ export const perm { mounted(el, binding) { const userStore useUserStore() // 当前按钮需要的权限标识 const needPerm binding.value if (!needPerm) return // 判断用户权限数组是否包含该权限 const hasPermission userStore.permissions.includes(needPerm) // 如果没有权限直接把dom元素从页面移除 if (!hasPermission) { el.parentNode el.parentNode.removeChild(el) } } }步骤 4全局注册自定义指令 main.jsimport { createApp } from vue import App from ./App.vue import ElementPlus from element-plus import element-plus/dist/index.css import * as ElementPlusIconsVue from element-plus/icons-vue import { perm } from /directive/perm const app createApp(App) // 全局注册图标 for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) } // ✅注册权限自定义指令 v‑perm app.directive(perm, perm) app.use(ElementPlus) app.mount(#app)步骤 5登录之后把接口返回的 permissions 存入 pinia store打开登录逻辑调用getUserInfo拿到用户信息之后调用setUserInfo// 登录成功获取用户信息之后 const userStore useUserStore() userStore.setUserInfo(res.data)步骤 6页面实战使用用户管理页面已经写好示例!--新增按钮 需要 system:user:add 权限-- el-button v‑permsystem:user:add typeprimary clickopenDialog()新增用户/el-button !--批量删除按钮 需要 system:user:remove 权限-- el-button typedanger v‑permsystem:user:remove clickhandleBatchDelete批量删除/el-button !--表格编辑按钮-- el-button link typeprimary v‑permsystem:user:edit clickopenDialog(scope.row)编辑/el-button !--表格删除按钮-- el-button link typedanger v‑permsystem:user:remove clickhandleDelete(scope.row)删除/el-button✅测试验证当前 admin 账号mock 返回全部权限所有按钮全部可见修改 mock删除system:user:remove权限刷新页面批量删除、表格删除按钮直接消失修改 mock 删除system:user:add新增按钮消失不会留下隐藏按钮 DOM无权限直接移除节点控制台无报错重要知识点区分按钮权限 v‑perm控制页面上按钮、操作有就显示没有就删除 DOM路由权限控制侧边栏菜单没有权限菜单不渲染无法访问对应页面后端接口层依然要做权限校验前端指令只是 UI 隐藏不能作为安全防护接口必须后端校验。踩坑点指令内部不能直接 useUserStore要写在mounted钩子函数内部指令参数是字符串v‑permsystem:user:add内部要套一层引号不要写成v‑permsystem:user:add切换账号登录之后需要刷新页面指令才会重新执行进阶可以改造指令支持响应式更新。