1. 本章任务
登录后台管理页面后,首先要做的就是根据当前登录人的角色,加载其拥有的菜单列表。
本章就来实现下这一重要的战略任务,干就完了!
2. 构造测试数据
首先构造一条用户数据,其拥有学校管理员角色(schoolmaster)
INSERT INTO `scholar-system`.`user`(`id`, `userName`, `loginName`, `password`, `role`, `departId`) VALUES (1, '学校管理员', '学校管理员', '123', 'schoolmaster', 1); 1 然后构造一条该用户所属的机构数据,注意学校属于顶级机构,没有上级机构,所以parentId为默认的-1。 INSERT INTO `scholar-system`.`depart`(`id`, `name`, `type`, `parentId`) VALUES (1, '汉东大学', 'school', -1); 1 再然后,构造几个菜单,考虑学校管理员拥有项目管理、机构管理、人员管理、权限管理功能,所以先录入这几个菜单。 INSERT INTO `scholar-system`.`menu`(`id`, `name`, `path`) VALUES (1, '项目管理', 'projectManage.html'); INSERT INTO `scholar-system`.`menu`(`id`, `name`, `path`) VALUES (2, '机构管理', 'departManage.html'); INSERT INTO `scholar-system`.`menu`(`id`, `name`, `path`) VALUES (3, '人员管理', 'userManage.html'); INSERT INTO `scholar-system`.`menu`(`id`, `name`, `path`) VALUES (4, '权限管理', 'powerManage.html'); 1 2 3 4 最后,schoolmaster角色需要拥有这几个菜单的权限,所以构造权限数据,即角色-菜单对应关系数据。 INSERT INTO `scholar-system`.`rolemenu`(`id`, `role`, `menuId`) VALUES (1, 'schoolmaster', 1); INSERT INTO `scholar-system`.`rolemenu`(`id`, `role`, `menuId`) VALUES (2, 'schoolmaster', 2); INSERT INTO `scholar-system`.`rolemenu`(`id`, `role`, `menuId`) VALUES (3, 'schoolmaster', 3); INSERT INTO `scholar-system`.`rolemenu`(`id`, `role`, `menuId`) VALUES (4, 'schoolmaster', 4); 1 2 3 4 注意上面的数据表明,schoolmaster拥有menu中id为1/2/3/4的菜单的访问权限。 PS:此处进行下勘误,之前rolemenu表及roleMenu实体类中的roleId应改为role。 3. 后端提供查询登录角色对应菜单的接口 从session中取出登录用户信息,查询其对应的菜单即可。 CoreServlet.handleRequest方法修改如下: // 查询登录用户拥有的菜单 else if (method.equals("getMenusOfUser")) { User loginUser = (User) request.getSession().getAttribute("loginUser"); if (loginUser == null) { throw new Exception("未登录!"); } MenuDao menuDao = new MenuDao(); result.setData(menuDao.getMenusOfUser(loginUser));// 返回数据为对应菜单 result.setCode(0); result.setMsg("操作成功"); } meuDao添加方法: /** * 获取用户拥有的菜单 */ public List<Menu> getMenusOfUser(User user) throws SQLException { Connection conn = ConnectionUtils.getConnection(); String sql = "select * from menu where id in (select menuId from rolemenu where role=?)"; QueryRunner runner = new QueryRunner(); Object[] params = { user.getRole() }; List<Menu> menus = runner.query(conn, sql, new BeanListHandler<Menu>(Menu.class), params); ConnectionUtils.releaseConnection(conn); return menus; } 4. 后台管理页面加载菜单 后台管理页面在初始化时,就调用接口加载菜单即可。 <script> // 初始化 $(function () { loadMenusOfUser(); }); // 加载菜单 function loadMenusOfUser() { $.ajax({ url: "CoreServlet?method=getMenusOfUser", type: "post", dataType: "json", data: null,//该方法不需要参数 success: function (res) { console.log(res); if (res.code == 0) {//将返回的菜单数据设置到菜单栏 $("#menu-bar").empty();//清空菜单 $.each(res.data, function (i, v) {//遍历加载子菜单 console.log(v); $("#menu-bar").append('<li><a href="' + v.path + '" target="main-frame">' + v.name + '</a></li>'); }); } else {//提示错误信息 alert(res.msg); } }, }); } </script> 注意需要为菜单添加一个id标识。 <ul id="menu-bar"> <li><a href="http://www.qq.com" target="main-frame">腾讯</a></li> <li><a href="http://www.baidu.com" target="main-frame">百度</a></li> </ul> 另外为了方便测试,需要添加下projectManage.html等4个网页。
5. 测试验证
重启tomcat后测试验证,非常完美哈。