手机制作网站app,平面设计公司经营范围,济宁网站建设培训学校,wordpress标签不输出文章在后台管理系统中#xff0c;不同用户角色往往拥有不同的操作权限#xff0c;对应的菜单展示也需动态调整。动态路由加载正是解决这一问题的核心方案 —— 根据登录用户的权限#xff0c;从数据库查询其可访问的菜单#xff0c;封装成前端所需的路由结构并返回。本文将详细…在后台管理系统中不同用户角色往往拥有不同的操作权限对应的菜单展示也需动态调整。动态路由加载正是解决这一问题的核心方案 —— 根据登录用户的权限从数据库查询其可访问的菜单封装成前端所需的路由结构并返回。本文将详细讲解如何基于 Spring Boot MyBatis-Plus 实现这一功能包含完整代码与实现思路。一、需求与实现思路动态路由加载的核心目标是根据登录用户的权限动态生成其可访问的菜单路由最终返回给前端用于渲染侧边栏。整体实现思路分为四步获取当前登录用户信息通过 Session 获取已登录用户的 IDuserId查询用户角色名称基于 userId通过user_role表用户 - 角色关联和role表角色表联查获取用户的角色名称如 “超级管理员”查询用户权限菜单基于 userId通过user_role、role_menu角色 - 菜单关联、menu菜单表三表联查获取用户可访问的所有菜单封装路由结构将数据库查询的菜单列表转换为前端所需的路由格式包含一级菜单、二级菜单、路由元信息等。二、核心表结构设计实现动态路由的前提是合理的表结构设计需包含 3 张核心表用户 - 角色 - 菜单的关联关系user用户表存储用户 ID、用户名等role角色表存储角色 ID、角色名称如 “超级管理员”menu菜单表存储菜单 ID、父级 ID、路径、组件路径等路由信息user_role用户 - 角色关联表多对多关系role_menu角色 - 菜单关联表多对多关系。其中menu表的核心字段如下与代码对应字段名含义说明示例值menu_id菜单 ID主键1parent_id父级菜单 ID0 表示一级菜单0name菜单名称用于前端显示系统管理path路由路径/syscomponent前端组件路径Layouticon菜单图标前端显示systemhidden是否隐藏true/falsefalsesort排序号控制菜单展示顺序1三、VO 类设计适配前端路由格式前端路由通常需要包含菜单名称、路径、组件、图标等信息且需区分一级菜单和子菜单。因此我们设计以下 VOView Object类封装路由数据1. MenuRouterVO一级菜单路由
Data
public class MenuRouterVO {private String name; // 菜单名称private String path; // 路由路径private String component; // 前端组件路径private String hidden; // 是否隐藏true/falseprivate String redirect noRedirect; // 重定向路径默认无private Boolean alwaysShow true; // 是否总是显示一级菜单通常为trueprivate MetaVO meta; // 路由元信息包含标题、图标private ListChildMenuRouterVO children; // 子菜单列表
}
2. ChildMenuRouterVO二级菜单路由
Data
public class ChildMenuRouterVO {private String name; // 子菜单名称private String path; // 子菜单路径private String component; // 子菜单组件路径private String hidden; // 是否隐藏private MetaVO meta; // 子菜单元信息
}
3. MetaVO路由元信息用于存储前端渲染所需的标题和图标
Data
public class MetaVO {private String title; // 菜单标题显示在侧边栏private String icon; // 菜单图标如system
}
四、核心代码实现1. 控制器处理动态路由请求Controller控制器的作用是接收前端请求协调获取用户信息、角色、菜单并封装返回结果。
RestController
RequestMapping(/sys/user)
public class UserController {Autowiredprivate RoleMapper roleMapper;Autowiredprivate MenuService menuService;/*** 加载动态路由返回用户信息、角色、可访问菜单路由*/GetMapping(/getRouters)public Result getRouters(HttpSession session) {// 1. 从Session获取当前登录用户登录时已存入SessionUser user (User) session.getAttribute(user);if (user null) {return Result.error(用户未登录);}// 2. 根据userId查询角色名称如超级管理员String roleName roleMapper.getRoleNameByUserId(user.getUserId());// 3. 根据userId查询并封装用户可访问的菜单路由ListMenuRouterVO routers menuService.getMenuRouterByUserId(user.getUserId());// 4. 封装结果返回用户信息、角色、路由return Result.ok().put(data, user) // 用户基本信息.put(roles, roleName) // 角色名称.put(routers, routers); // 动态路由列表}
}
2. 角色查询获取用户角色名称RoleMapper通过user_role表关联role表根据 userId 查询角色名称
Repository
public interface RoleMapper extends BaseMapperRole {/*** 根据userId查询角色名称* 联表逻辑user_role用户-角色关联 → role角色表*/Select(SELECT role_name FROM role, user_role WHERE user_role.role_id role.role_id AND user_role.user_id #{userId})String getRoleNameByUserId(Integer userId);
}
说明若用户拥有多个角色可修改 SQL 为GROUP_CONCAT(role_name)并返回字符串如 “管理员编辑”。3. 菜单查询获取用户权限菜单MenuMapper通过user_role、role_menu、menu三表联查获取用户可访问的所有菜单
Repository
public interface MenuMapper extends BaseMapperMenu {/*** 根据userId查询可访问的菜单列表* 联表逻辑user_role → role_menu → menu*/Select({SELECT m.menu_id, m.parent_id, m.name, m.path, m.component, m.icon, m.hidden, m.sort FROM user_role ur, role_menu rm, menu m WHERE ur.role_id rm.role_id AND rm.menu_id m.menu_id AND ur.user_id #{userId} ORDER BY m.sort // 按sort排序保证菜单展示顺序})ListMenu getMenusByUserId(Integer userId);
}
说明查询结果包含菜单的 ID、父级 ID、路径等核心信息后续将转换为路由 VO。4. 菜单服务封装路由结构MenuServiceService 层的核心是将数据库查询的Menu列表转换为前端所需的MenuRouterVO列表实现步骤从数据库查询用户可访问的所有菜单menuList筛选一级菜单parent_id 0为每个一级菜单封装MenuRouterVO属性名称、路径、组件等为每个一级菜单匹配子菜单parent_id 一级菜单ID封装为ChildMenuRouterVO组合一级菜单与子菜单返回最终路由列表。
Service
public class MenuServiceImpl extends ServiceImplMenuMapper, Menu implements MenuService {Autowiredprivate MenuMapper menuMapper;Overridepublic ListMenuRouterVO getMenuRouterByUserId(Integer userId) {// 1. 查询用户可访问的所有菜单ListMenu menuList menuMapper.getMenusByUserId(userId);// 2. 存储最终的路由列表一级菜单ListMenuRouterVO routerList new ArrayList();// 3. 遍历菜单列表筛选一级菜单并封装for (Menu menu : menuList) {// 一级菜单parent_id 0if (menu.getParentId() 0) {MenuRouterVO parentRouter new MenuRouterVO();// 封装一级菜单基本属性parentRouter.setName(menu.getName());parentRouter.setPath(menu.getPath());parentRouter.setComponent(menu.getComponent());parentRouter.setHidden(menu.getHidden());parentRouter.setRedirect(noRedirect); // 固定值前端要求parentRouter.setAlwaysShow(true); // 总是显示一级菜单// 封装元信息标题、图标用于前端渲染MetaVO parentMeta new MetaVO();parentMeta.setTitle(menu.getName());parentMeta.setIcon(menu.getIcon());parentRouter.setMeta(parentMeta);// 4. 为当前一级菜单匹配子菜单ListChildMenuRouterVO children new ArrayList();for (Menu childMenu : menuList) {// 子菜单parent_id 一级菜单IDif (childMenu.getParentId().equals(menu.getMenuId())) {ChildMenuRouterVO childRouter new ChildMenuRouterVO();// 封装子菜单属性childRouter.setName(childMenu.getName());childRouter.setPath(childMenu.getPath());childRouter.setComponent(childMenu.getComponent());childRouter.setHidden(childMenu.getHidden());// 子菜单元信息MetaVO childMeta new MetaVO();childMeta.setTitle(childMenu.getName());childMeta.setIcon(childMenu.getIcon());childRouter.setMeta(childMeta);children.add(childRouter);}}// 5. 绑定子菜单到一级菜单parentRouter.setChildren(children);routerList.add(parentRouter);}}return routerList;}
}
五、关键逻辑解析1. 表关联查询的意义动态路由的核心是 “权限控制”而权限控制的基础是用户 - 角色 - 菜单的关联关系用户user通过user_role关联角色role角色role通过role_menu关联菜单menu最终实现 “用户→角色→菜单” 的权限传递确保用户只能访问其角色允许的菜单。2. 路由封装的核心思路数据库查询的menuList是扁平的菜单列表包含一级和二级菜单需要转换为树形结构一级菜单包含子菜单列表先筛选parent_id 0的一级菜单再遍历所有菜单为每个一级菜单匹配parent_id等于其menu_id的子菜单通过MetaVO封装前端渲染所需的标题和图标确保与前端路由组件属性对应。3. 扩展性考虑若系统需要支持三级及以上菜单只需修改 Service 层的封装逻辑将子菜单的筛选改为递归处理
// 递归获取子菜单示例伪代码
private ListChildMenuRouterVO getChildRouters(Integer parentId, ListMenu menuList) {ListChildMenuRouterVO children new ArrayList();for (Menu menu : menuList) {if (menu.getParentId().equals(parentId)) {ChildMenuRouterVO child new ChildMenuRouterVO();// 封装子菜单属性...// 递归查询当前子菜单的子菜单三级菜单child.setChildren(getChildRouters(menu.getMenuId(), menuList)); children.add(child);}}return children;
}
六、最终返回结果示例前端接收的 JSON 格式如下与 VO 类结构对应可直接用于渲染动态路由
{code: 200,msg: 操作成功,data: {userId: 1,username: admin,realName: 管理员// ...其他用户信息},roles: 超级管理员,routers: [{name: 系统管理,path: /sys,component: Layout,hidden: false,redirect: noRedirect,alwaysShow: true,meta: {title: 系统管理,icon: system},children: [{name: 管理员管理,path: /user,component: sys/user/index,hidden: false,meta: {title: 管理员管理,icon: user}}]}]
}
