## 实现完整层级匹配的嵌套路由权限过滤 ### 需求分析 1. 权限数据格式:`router:路由1:路由2:路由3:...`,其中 `router:` 是固定前缀 2. **匹配规则**:所有层级的路由标识都需要依次匹配,每一层路由必须是上一层路由的子路由 3. 支持任意深度的嵌套路由匹配 4. 确保路由唯一性,避免重复添加 5. 如果有重复的父级路由,只添加子路由 ### 解决方案 1. **解析权限规则**:将字符串权限规则按冒号分隔,得到路由name数组 2. **创建路由映射表**:构建包含所有路由及其嵌套层级关系的映射 3. **完整层级匹配**:根据权限规则的所有层级,依次匹配每一层路由 4. **构建完整路由树**:将匹配到的所有层级路由构建成完整的嵌套结构 5. **去重处理**:确保每个路由只添加一次 ### 实现步骤 1. 修改 `addPermissionRoutes` 方法 2. 解析 `permissionRouter` 中的权限规则,转换为路由name数组 3. 构建包含所有路由及其层级关系的映射 4. 遍历每个权限规则,依次匹配每一层路由 5. 构建完整的嵌套路由树,确保路由唯一性 6. 将构建好的路由树动态添加到Vue Router中 ### 代码修改点 **文件**:`d:\work\Aiproject\DeotalandAi\apps\FrontendDesigner\src\stores\index.js` **函数**:`addPermissionRoutes`(第67-89行) **核心逻辑**: 1. 替换当前的简单过滤逻辑 2. 解析权限规则,得到路由name数组 3. 构建包含所有路由及其层级关系的映射 4. 遍历每个权限规则,依次匹配每一层路由 5. 构建完整的嵌套路由树 6. 确保每个路由只添加一次 7. 将构建好的路由树动态添加到Vue Router中 ### 实现细节 1. **权限规则解析**: - 将 `router:路由1:路由2:路由3` 转换为 `['路由1', '路由2', '路由3']` - 每个数组元素代表一个路由层级 2. **路由映射构建**: - 递归遍历 `permissionRoutes` 及其子路由 - 构建所有路由的name到路由对象的映射 - 构建父路由到子路由的映射关系 3. **完整层级匹配**: - 对于每个权限规则数组 `[name1, name2, name3]` - 第一步:检查 `name1` 是否存在于路由映射中 - 第二步:检查 `name1` 的子路由中是否存在 `name2` - 第三步:检查 `name2` 的子路由中是否存在 `name3` - 以此类推,直到匹配完所有层级 4. **路由树构建**: - 为每个权限规则构建完整的路由树 - 确保父级路由存在 - 避免重复添加路由 - 只添加匹配到的路由及其父级路由(如果需要) 5. **去重处理**: - 使用Set或Map确保每个路由只添加一次 - 确保相同路由的子路由不会被重复添加 ### 预期效果 - 支持一级路由匹配(如 `router:AdminOrders`) - 支持二级嵌套路由匹配(如 `router:AdminOrders:AdminContentReview`) - 支持任意深度嵌套路由匹配(如 `router:路由1:路由2:路由3:...`) - 所有层级的路由都需要匹配,确保路由完整性 - 构建完整的嵌套路由结构 - 确保路由唯一性,避免重复添加 ### 实现示例 ```javascript // 权限规则示例 const permissionRules = ['router:AdminOrders', 'router:AdminOrders:AdminContentReview', 'router:AdminPermission:AdminRoleManagement']; // 解析后的规则 const parsedRules = [ ['AdminOrders'], ['AdminOrders', 'AdminContentReview'], ['AdminPermission', 'AdminRoleManagement'] ]; // 匹配逻辑 // 规则1:匹配AdminOrders(一级路由) // 规则2:先匹配AdminOrders(一级路由),再在其下匹配AdminContentReview(子路由) // 规则3:先匹配AdminPermission(一级路由),再在其下匹配AdminRoleManagement(子路由) ```