Files
panel-uniapp-admin/MENU_PERMISSION_FIX.md
2025-12-03 14:39:15 +08:00

2.7 KiB
Raw Permalink Blame History

菜单权限控制问题修复方案

问题描述

在后端控制模式下,当普通用户登录后再退出登录管理员时,管理员特有的菜单会出现404错误。

问题原因

  1. 路由注册状态未正确重置:isRouteRegistered 标志位在用户切换时没有正确重置
  2. 动态路由清理不完整:resetRouterState 函数只清理了带有 meta.dynamic 标记的路由
  3. 工作台标签页验证时机问题:validateWorktabs 在路由重新注册后执行,但可能没有正确清理无效的标签页
  4. 用户信息变化检测缺失:没有检测用户切换事件,导致路由状态没有及时更新

修复方案

1. 改进路由状态重置 (src/router/guards/beforeEach.ts)

  • 修改 resetRouterState 函数,清理所有动态注册的路由(不仅仅是带有dynamic标记的)
  • 添加工作台标签页的清理
  • 使用菜单store的 clearMenuList 方法

2. 添加用户切换检测 (src/router/guards/beforeEach.ts)

  • 在 handleRouteGuard 函数中添加用户信息变化检测
  • 使用 sessionStorage 缓存用户信息,检测用户切换
  • 当检测到用户信息变化时,强制重置路由状态

3. 改进菜单API (src/api/menuApi.ts)

  • 添加用户登录状态验证
  • 改进菜单数据验证逻辑
  • 添加更详细的错误处理和日志

4. 完善用户登出逻辑 (src/store/modules/user.ts)

  • 在 logOut 方法中添加更完整的状态清理
  • 清理用户信息缓存
  • 确保工作台标签页被正确清理

5. 增强菜单Store (src/store/modules/menu.ts)

  • 添加 clearMenuList 方法用于清理菜单数据
  • 提供更完整的状态管理

6. 改进错误处理 (src/router/guards/beforeEach.ts)

  • 修改 handleMenuError 函数,确保在菜单处理失败时正确清理所有状态
  • 添加更详细的状态清理逻辑

测试工具

创建了 src/utils/menuPermissionTest.ts 测试工具,包含:

  • testMenuPermissionSwitch(): 测试菜单权限切换的正确性
  • simulateUserSwitch(): 模拟用户切换过程

使用方法

  1. 在浏览器控制台中调用 testMenuPermissionSwitch() 检查当前状态
  2. 在用户切换后调用 simulateUserSwitch() 模拟切换过程
  3. 观察控制台输出,确认路由和菜单状态正确

预期效果

修复后,当用户切换时:

  1. 所有动态路由会被正确清理
  2. 菜单数据会被重新加载
  3. 工作台标签页会被验证和清理
  4. 不会出现404错误
  5. 用户权限会正确应用

注意事项

  • 确保后端返回的菜单数据与用户权限匹配
  • 在开发环境中可以使用测试工具验证修复效果
  • 建议在生产环境中添加更多的日志记录用于问题排查