SpringBoot不同角色显示不同的菜单

avatar 2018年09月17日01:18:53 9 12442 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此
最近准备把之前的博客重写，有时间还是要更新一些博客，防止权重下降，水一水。

通常我们后台有很多不同的角色登录，每个角色不同的权限，这个在 SpringBoot整合Shiro实现权限控制，验证码，记住我 中已经介绍了，这次我们介绍一下，如何根据不同的角色登录显示不同的菜单。

比如我目前只有两个角色，系统管理员和普通用户。

当用户登录后台的时候，通过 ajax 从后台获取菜单列表，redis 做缓存，然后初始化加载。

关于菜单绑定角色，其实也可以菜单绑定权限的。这里为了方便，我们使用使用角色来区分。

如下图，两种角色不同的菜单，至于不同菜单的请求链接，是通过 Shiro 控制权限访问的。




一、数据库设计和数据


1、menu 菜单表





2、role 表





3、role_menu 表






二、核心代码


1、实体
  1. package com.liuyanzhao.blog.api.model;
  3. import lombok.Data;
  5. import java.util.List;
  7. /**
  8.  * 菜单
  9.  *
  10.  * @author liuyanzhao
  11.  */
  12. @Data
  13. public class Menu {
  15.     /**
  16.      * 菜单ID
  17.      */
  18.     private Integer id;
  20.     /**
  21.      * 父级菜单ID
  22.      */
  23.     private Integer pid;
  25.     /**
  26.      * 菜单名称
  27.      */
  28.     private String name;
  30.     /**
  31.      * 菜单类型：top_menu, main_menu, admin_menu
  32.      */
  33.     private String type;
  35.     /**
  36.      * 菜单URL
  37.      */
  38.     private String url;
  40.     /**
  41.      * 菜单图标
  42.      */
  43.     private String icon;
  45.     /**
  46.      * 菜单分数，越大排序越前
  47.      */
  48.     private Integer score;
  50.     /**
  51.      * 子菜单Menu列表
  52.      */
  53.     private List<Menu> childMenu;
  54. }



2、Controller 层
  1. @GetMapping("/admin/menu/listAdminMenu")
  2. @ResponseBody
  3. public ResultVO listAdminMenu() {
  4.     List<Menu> result;
  5.     //1、判断当前用户的角色
  6.     Subject subject = SecurityUtils.getSubject();
  7.     if(subject.hasRole("ROLE_ADMIN")) {
  8.         //管理员
  9.         result = menuService.listAdminMenuByRole(1);
  10.     } else {
  11.         //普通用户
  12.         result = menuService.listAdminMenuByRole(2);
  13.     }
  14.     if(result == null || result.size() == 0) {
  15.         return new ResultVO().error("菜单为空");
  16.     }
  17.     return new ResultVO().ok(result);
  18. }



3、Service 层
  1. @Override
  2.  @Cacheable(value = "menu", key = "'listAdminMenuByRole'+#p0")
  3.  public List<Menu> listAdminMenuByRole(Integer roleId) {
  4.      List<Menu> menuList;
  5.      List<Menu> newMenuList = new ArrayList<>();
  6.      try {
  7.          //1、根据角色获得所有的菜单（包括一级和二级）
  8.          menuList = menuMapper.listMenuByRoleId(roleId);
  9.          for (int i = 0; i < menuList.size(); i++) {
  10.              Menu menu = menuList.get(i);
  11.              List<Menu> childMenuList = new ArrayList<>();
  12.              //2、拼装二级菜单
  13.              if (menu.getPid() == 0) {
  14.                  for (int j = 0; j < menuList.size(); j++) {
  15.                      if (Objects.equals(menu.getId(), menuList.get(j).getPid())) {
  16.                          childMenuList.add(menuList.get(j));
  17.                      }
  18.                  }
  19.                  menu.setChildMenu(childMenuList);
  20.                  newMenuList.add(menu);
  21.              }
  22.          }
  23.      } catch (Exception e) {
  24.          log.error("【后台菜单获取失败】，cause:{}", e);
  25.      }
  26.      return newMenuList;
  27.  }



4、Dao 层

MenuMapper.java
  1. List<Menu> listMenuByRoleId(Integer roleId);



MenuMapper.xml
  1. <!--从 role_menu 关联表查询-->
  2. <select id="listMenuByRoleId" parameterType="java.lang.Integer"
  3. resultMap="BaseResultMap">
  4.    select menu.* from role_menu, menu
  5.    where role_menu.role_id = #{value} and role_menu.menu_id = menu.id
  6. </select>



5、前台页面

head里引入jquery库和自定义js文件
  1. <script src="/components/jquery/dist/jquery.min.js"></script>
  2. <script src="/js/admin/init.js"></script>



将模板页面的菜单列表去掉，准备从后台获取，通过js拼装并填充到页面
  1. <ul class="sidebar-menu" data-widget="tree" id="menu-ul">
  3. </ul>

 

init.js
  1. //初始化菜单
  2. $.ajax({
  3.     url: '/admin/menu/listAdminMenu',
  4.     type: 'GET',
  5.     success: function (data) {
  6.         console.log(data);
  7.         if (data.code == 200) {
  8.             //for循环初始化菜单
  9.             var str = '';
  10.             $.each(data.data, function (i, item) {
  11.                 str += '<li class="treeview">';
  12.                 str += '<a href="' + item.url + '">';
  13.                 str += '<i class="' + item.icon + '"></i>';
  14.                 str += '<span>' + item.name + '</span>';
  15.                 if (item.childMenu.length != 0) {
  16.                     str += '<span class="pull-right-container">';
  17.                     str += '    <i class="fa fa-angle-left pull-right"></i>';
  18.                     str += '</span>';
  19.                 }
  20.                 str += '</a>';
  21.                 str += '<ul class="treeview-menu">';
  22.                 if (item.childMenu.length != 0) {
  23.                     $.each(item.childMenu, function (j, item2) {
  24.                         str += '<li><a href="' + item2.url + '">';
  25.                         str += item2.name;
  26.                         str += '</a></li>';
  27.                     })
  28.                 }
  29.                 str += '</ul></li>';
  30.             });
  31.             $("#menu-ul").html(str);
  32.         }
  33.     },
  34.     error: function () {
  35.     }
  36. });




三、前台调试


一切完毕后，我们启动项目，访问后台页面，打开浏览器的 console

可以看到 ajax 请求返回的数据





二级菜单数据也有





HTML页面也有元素







历史上的今天
九月
17日
  • 微信
  • 交流学习，资料分享
  • weinxin
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：3   待审核评论数：0
  1. avatar 机智小宝宝
    回复 2019年01月19日 14:13:22

    博主，可以共享一下源码吗？

  2. avatar 网站建设
    回复 2018年10月11日 11:09:40

    看了一下，感觉很不错

  3. avatar 0.0
    回复 2018年09月24日 23:03:31

    今天刚刚看了权限管理的视频，但是没想到前端怎么设计，很赞！！！