90 lines
3.7 KiB
Markdown
90 lines
3.7 KiB
Markdown
## 实现完整层级匹配的嵌套路由权限过滤
|
||
|
||
### 需求分析
|
||
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（子路由）
|
||
``` |