菜单权限动态加载功能说明

功能概述

实现了前端左侧菜单根据用户权限动态加载的功能，用户只能看到自己有权限访问的菜单项。

实现的功能

1. API接口扩展

• 在 frontend/src/api/menu.ts 中添加了 getUserMenuTree 方法
• 调用后端接口 http://localhost:8083/api/system/menu/tree?userId=1 获取用户菜单权限

2. 菜单服务模块

• 创建了 frontend/src/services/menuService.ts 专门处理菜单相关逻辑
• 实现了菜单数据转换、路径映射、图标处理等功能
• 提供了 loadUserMenus 和 transformMenuData 等核心方法

3. 菜单组件动态化

• 修改 frontend/src/layouts/MainLayout.vue 将静态菜单改为动态加载
• 集成了菜单服务，实现菜单的动态加载和显示
• 添加了菜单加载状态显示和错误处理

主要修改文件

1. frontend/src/api/menu.ts

   • 添加 getUserMenuTree API方法
   • 单独导出常用方法避免循环依赖

2. frontend/src/services/menuService.ts (新增)

   • 菜单数据转换逻辑
   • 路径映射配置
   • 图标处理功能
   • 默认菜单提供

3. frontend/src/layouts/MainLayout.vue

   • 集成菜单服务实现动态菜单加载
   • 添加菜单加载状态和错误处理
   • 在组件挂载时自动加载用户菜单

使用方式

1. 用户登录后，系统会自动调用 http://localhost:8083/api/system/menu/tree?userId=1 获取用户菜单权限
2. 后端返回的菜单数据会被转换为前端菜单格式
3. 左侧菜单会根据用户权限动态显示
4. 用户只能看到自己有权限访问的菜单项

权限控制级别

• 权限控制精确到菜单级别
• 不包含按钮级别的权限控制
• 菜单项根据用户角色和权限动态显示/隐藏

测试方法

1. 确保后端服务运行在 http://localhost:8083
2. 启动前端开发服务器
3. 使用不同权限的用户登录
4. 观察左侧菜单是否根据用户权限动态显示

注意事项

• 如果菜单API调用失败，会显示默认的首页菜单
• 菜单加载过程中会显示"菜单加载中..."提示
• 用户登出时会清除所有菜单权限数据