SpringBoot整合SpringSecurity实现权限控制（三）：前端动态装载路由与菜单（附源码）

最新推荐文章于 2025-06-13 14:35:23 发布

原创

最新推荐文章于 2025-06-13 14:35:23 发布 · 3.7k 阅读

33 ·

CC 4.0 BY-SA版权

文章标签：

#spring boot #java #vue

该博客介绍了如何使用SpringBoot整合SpringSecurity实现前端动态装载路由与菜单的权限控制。通过RBAC策略设计权限模型，后端提供接口供前端获取用户权限信息，前端根据权限动态加载路由。详细步骤包括数据准备、接口编写、前端实现和效果展示，并提供了完整源码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

系列文章目录
《SpringBoot整合SpringSecurity实现权限控制（一）：实现原理》
《SpringBoot整合SpringSecurity实现权限控制（二）：权限数据基本模型设计》

一、前言

在上篇文章中我们通过 RBAC( Role-Based Access Control:基于角色的访问控制策略)进行权限模型设计，并设计了以下表：
在这里插入图片描述

本章中前端将通过访问后端接口，拉取用户对应的权限数据，实现动态装载路由。

二、数据准备

由于前端还没有编写用户、角色、菜单、权限的管理界面，我们将直接在后台对应的表结构中模拟数据。

用户表：增加一个管理员
角色表：增加一个系统管理员角色
用户角色表：将用户映射成系统管理员角色
菜单表：增加一个主菜单：系统管理；两个子菜单：用户管理与角色管理
角色权限表：给管理员角色分配相应的菜单功能权限

给以上这些表增加相应数据后，我们可以得到用户最终的权限如下：

三、编写后端接口

接下来编写一个后端接口，通过查询这个接口，可以获取对应用户的权限信息。

我们先新建一个包含用户权限信息的数据传输对象（DTO）

/**
 * 用户权限
 *
 * @author zhuhuix
 * @date 2021-08-31
 */
@ApiModel(value = "用户权限信息")
@Data
@AllArgsConstructor
@NoArgsConstructor
public class PermissionDto {
   
   

    @ApiModelProperty(value = "id")
    private Long id;

    @ApiModelProperty(value = "路由")
    private String path;

    @ApiModelProperty(value = "名称")
    private String name;

    @ApiModelProperty(value = "组件路径")
    private String component;

    @ApiModelProperty(value = "是否隐藏")
    private Boolean hidden;

    @ApiModelProperty(value = "图标")
    private String icon;

    @ApiModelProperty(value = "是否缓存")
    private Boolean cache;

    @ApiModelProperty(value = "重定向")
    private String redirect;

    @ApiModelProperty(value = "父id")
    private Long pId;


}

接下通过Mybastis-plus自定义查询创建一个查询用户权限的DAO接口

/**
 * 用户DAO接口
 *
 * @author zhuhuix
 * @date 2021-07-19
 */
@Mapper
public interface SysUserMapper extends BaseMapper<SysUser> {
   
   

   /**
     * 查询用户权限
     * @param userId 用户id
     * @return 权限信息
     */
    @Select("SELECT m.id, m.`path`, m.`name`,  m.`component`,  m.`icon`,  m.`cache`, m.`hidden`,  m.`redirect`, m.p_id  " +
            "FROM " +
            "sys_menu m " +
            "INNER JOIN sys_permission p ON p.menu_id = m.id " +
            "INNER JOIN sys_user_role ur ON ur.role_id = p.role_id " +
            "INNER JOIN sys_user u ON u.id = ur.user_id " +
            "INNER JOIN sys_role r ON r.id = ur.role_id where ur.user_id=#{userId}"+
            " and m.enabled=1 " +
            " order by m.sort "
    )
    List<PermissionDto> selectUserPermission(Long userId);
 }

在用户信息业务服务层中加入查询用户权限信息的业务逻辑

/**
 * 用户信息接口
 *
 * @author zhuhuix
 * @date 2020-04-03
 */
public interface SysUserService {
   
   

    ...

    /**
     * 获取用户权限信息
     * @param userId 用户id
     * @return 权限信息
     */
    List<