Vue 计算属性如何实现权限菜单树的实时过滤与筛选展示

Vue计算属性通过响应式过滤菜单树实现权限控制，递归判断节点权限并返回新树；支持多角色多权限灵活匹配；需配合路由守卫校验跳转权限，形成视图与路由双保险。

Vue 计算属性实现权限菜单树的实时过滤与筛选展示，核心是把“用户权限”和“菜单结构”作为响应式输入，让计算属性自动产出符合当前权限的菜单子树。它不负责权限校验本身，而是高效、可复用地驱动视图层渲染。

用 computed 动态过滤原始菜单树

假设你有一份嵌套结构的菜单配置（如 authMenuTreeData），每个节点带 roles 或 permissions 字段；同时用户角色或权限列表已存于响应式状态中（比如 store 中的 userInfo.roles 或 userPermissions）。这时可定义一个计算属性：

1. 遍历整棵树，递归判断每个节点是否应保留：若节点自身满足权限（如 roles.includes(currentRole)），或其任意子节点满足，则保留该节点
2. 对子节点递归调用相同逻辑，确保父子关系完整保留
3. 返回新树结构，而非修改原数据，保证响应式更新干净可靠

支持多角色 + 多权限字段的灵活判断

真实场景中用户可能拥有多个角色（如 ['editor', 'auditor']），菜单也可能按功能码控制（如 permission: 'user:delete'）。此时可在计算属性中升级判断逻辑：

1. 将用户所有权限合并为 Set，例如 new Set([...roles, ...permissions])
2. 节点配置支持 roles 和 permission 两种字段，任一匹配即显示（或按需改为“全部满足”）
3. 避免硬编码角色名，用常量或配置中心统一管理权限标识

配合树组件实现高亮与展开状态同步

使用 Element Plus 的 el-tree 或 ant-design-vue 的 a-tree 时，仅过滤数据还不够。要让筛选结果体验更自然：

1. 将计算属性生成的新树直接绑定到 :data 属性，确保视图实时响应
2. 利用 default-expanded-keys 或 expandAll 控制默认展开行为，避免筛选后关键节点被折叠
3. 如需搜索高亮，可在节点插槽中结合 searchVal 做 label 文本分段渲染（如前后拼接 关键词）

注意边界：过滤只是视图层，跳转仍需守卫兜底

计算属性只管“该不该显示”，不管“能不能访问”。用户仍可能手动输入 URL 或通过其他入口跳转无权限页面：

1. 必须配合 router.beforeEach，在路由跳转前读取目标路由 meta.roles 或 meta.permission
2. 校验失败时重定向至 403 或首页，并提示“暂无访问权限”
3. 这样菜单不可见 + 路由不可进，双保险保障权限逻辑闭环