需求：根据登录的用户角色不同，从数据库获取该用户所拥有的角色菜单，在页面动态展示。
首先在前端页面js中定义一个接受后端数据的数组：

//菜单数据的数组
var menuListArr = [];

在vue中给数据模型赋值：

menuList: menuListArr, //菜单

利用钩子函数向后端发送请求获取数据：

created(){
            //发送请求获取当前登录用户的用户名
            axios.get("/user/getUsername.do").then((res) => {
                this.username = res.data.data;
                //发送请求获取当前用户的菜单权限（动态获取菜单）
                axios.get("/user/getMenu.do?userName=" + this.username).then((res) => {
                    if(res.data.flag){ //遍历获取到的菜单数据
                        //遍历获取到的数据（一级菜单）
                        for (var i = 0; i < res.data.data.length; i++){
                            //获取子菜单
                            var children = res.data.data[i].children;
                            //递归子菜单的方法
                            var childrenArr = f(children);
                            //push向menuListArr数组添加数据
                            menuListArr.push({
                                path: res.data.data[i].path,
                                title: res.data.data[i].name,
                                icon: res.data.data[i].icon,
                                children:childrenArr
                            })
                        }
                        //递归获取子菜单
                        function f(children){
                            var res = [];
                            if(children !== null && children.length > 0){
                                for(var i = 0; i < children.length; i++){
                                    res.push({
                                        path: children[i].path,
                                        title: children[i].name,
                                        linkUrl: children[i].linkUrl,
                                        children: children[i].children
                                    });
                                    f(children[i].children);
                                }
                            }
                            return res;
                        }
                    }else {
                        this.$message.error(res.data.message);
                    }
                })
            }).catch((err) => {
                console.log(err);
            });
        }

后端代码：
controller层：

//根据用户名获取用户的菜单
    @RequestMapping("/getMenu")
    public Result getMenu(@RequestParam("userName") String userName){

        List<Menu> menuList = null;

        try{
            //获取用户的菜单
            menuList = userService.findUserNameMenu(userName);
        }catch (Exception e){
            //获取数据失败
            logger.error(e);
            return new Result(false, MessageConstant.GET_MENU_FAIL);
        }

        if(!menuList.isEmpty()){//用户菜单不为空返回数据给前端
            return new Result(true, MessageConstant.GET_MENU_SUCCESS, menuList);
        }else {
            return new Result(false, MessageConstant.GET_MENU_FAIL_BYNULL);
        }
    }

service层接口：

/**
     * 根据用户名查询用户菜单
     * @param userName
     * @return
     */
    List<Menu> findUserNameMenu(String userName);

service层实现类：

/**
     * 根据用户名获取用户登录菜单
     * @param userName
     * @return
     */
    @Override
    public List<Menu> findUserNameMenu(String userName) {
        //获取用户
        User user = findUserRole(userName);
        if(user == null)
            return null;

        //获取用户角色
        Set<Role> roles = user.getRoles();
        //获取角色id
        List<Integer> idList = new ArrayList<>();
        if(roles != null && roles.size() > 0){
            for (Role role : roles) {
                idList.add(role.getId());
            }
        }
        
         //根据用户角色查询用户角色菜单（一级菜单）
        List<Menu> menuList = menuDao.findMenu(idList);
        //递归获取所有菜单
        recursionMenu(menuList);

        return menuList;
    }
    
/**
     * 递归获取子菜单
     */
    public void recursionMenu(List<Menu> menuList){
        if(menuList == null || menuList.size() == 0)
            return;

        for (Menu menu : menuList) {
            //查询该级菜单包含的子菜单
            List<Menu> childrenMenu = menuDao.findChildrenMenu(menu.getId());
            //放入该菜单
            menu.setChildren(childrenMenu);
            //递归
            recursionMenu(childrenMenu);
        }
    }

/**
     * 根据用户名查询用户，并获取用户角色
     * @param username
     * @return
     */
    public User findUserRole(String username){
        //根据用户名查询用户基本信息
        User user = userDao.findUserByUsername(username); //查询用户表，这时用户并没有角色信息
        //用户为null，返回null
        if(user == null)
            return null;

        //动态为用户授予权限
        //根据用户id查询用户角色
        Set<Role> roles = roleDao.findRolesByUserId(user.getId()); //查询角色表
        //将角色设置进用户中
        user.setRoles(roles);
        return user;
    }

Dao层接口：

/**
     * 根据用户角色查询角色菜单
     * @param roles 用户角色
     * @return
     */
    List<Menu> findMenu(@Param("roles") List<Integer> roles);

    /**
     * 根据一级菜单id查询子菜单
     * @param id
     * @return
     */
    List<Menu> findChildrenMenu(Integer id);

SQL语句：

<select id="findMenu" resultType="menu">
        select distinct pm.*
        from t_menu pm,t_menu cm,t_role_menu rm
        where pm.id=rm.menu_id AND pm.id=cm.parentMenuId AND rm.role_id in
        <foreach collection="roles" index="index" item="item" open="(" separator="," close=")">
            #{item}
        </foreach>
    </select>

<select id="findChildrenMenu" parameterType="int" resultType="menu">
        select distinct cm.*
        from t_menu pm,t_menu cm
        where pm.id=cm.parentMenuId AND pm.id=#{id}
    </select>

数据表架构设计：