6.4 权限管理（菜单管理）
6.4.1 查询所有（含孩子）
6.4.2 添加权限
6.4.3 核心3：查询登录用户的权限，并绘制菜单
1）后端：SQL版
- 获得登录用户
- 通过登录用户获得
角色们 - 通过
角色们查询所有的权限 - 分析
# 1. 查询用户的角色 SELECT role_id FROM sys_user_role WHERE user_id = 'u001' # 结果角色id：[1,2] # 2. 查询指定角色们的权限id DISTINCT 去重 SELECT DISTINCT perm_id FROM sys_role_permission WHERE role_id IN (1,2) # 结果权限id：[1,2,3,4,5] # 3. 查询指定权限id的权限详情 SELECT * FROM sys_permission WHERE id IN (1,2,3,4,5) # 使用子查询将3条语句整合 SELECT * FROM sys_permission WHERE id IN (SELECT DISTINCT perm_id FROM sys_role_permission WHERE role_id IN (SELECT role_id FROM sys_user_role WHERE user_id = 'u001'))
编写mapper
@Select("SELECT * FROM sys_permission WHERE id IN (SELECT DISTINCT perm_id FROM sys_role_permission WHERE role_id IN (SELECT role_id FROM sys_user_role WHERE user_id = #{uid}))") List<SysPermission> findAllByUserId(@Param("uid") String uid);
编写service
接口
List<SysPermission> findAllByLoginUser(TbUser loginUser);
实现
@Override public List<SysPermission> findAllByLoginUser(TbUser loginUser) { //1 查询指定用户的所有权限 List<SysPermission> permList = baseMapper.findAllByUserId(loginUser.getUid()); //2 处理权限--父子关系 List<SysPermission> resultList = new ArrayList<>(); Map<Integer, SysPermission> cache = new HashMap<>(); for (SysPermission sysPermission : permList) { SysPermission permParent = cache.get(sysPermission.getParentId()); if(permParent == null) { // 一级添加结果 resultList.add(sysPermission); } else { permParent.getChildren().add(sysPermission); } // 将自己存放，让孩子可以获得 cache.put(sysPermission.getId(), sysPermission); } return resultList; }
编写controller
@Resource private HttpServletRequest request; @Resource private JwtProperties jwtProperties; @GetMapping("/login") public BaseResult findAllByLoginUser() { try { // 1 获得登录用户 String token = request.getHeader("Authorization"); TbUser loginUser = JwtUtils.getObjectFromToken(token, jwtProperties.getPublicKey(), TbUser.class); // 2 获得所有的权限 List<SysPermission> list = sysPermissionService.findAllByLoginUser(loginUser); // 3 返回 return BaseResult.ok("查询成功", list); } catch (Exception e) { e.printStackTrace(); return BaseResult.error("获得菜单失败"); } }
2）后端：对象版
- service层使用通过mapper进行一系列的查询，不用写SQL语句
//1. 查询用户的角色
//2. 查询指定角色们的权限id DISTINCT 去重
//3. 查询指定权限id的权限详情
@Override public List<SysPermission> findAllByLoginUser(TbUser loginUser) { // 1. 查询用户的角色 [1,2] QueryWrapper<SysUserRole> sysUserRoleQueryWrapper = new QueryWrapper<>(); sysUserRoleQueryWrapper.eq("user_id", loginUser.getUid()); List<SysUserRole> sysUserRoleList = sysUserRoleMapper.selectList(sysUserRoleQueryWrapper); List<Integer> roleIdList = sysUserRoleList.stream().map(sysUserRole -> sysUserRole.getRoleId()).collect(Collectors.toList()); // 2. 查询指定角色们的权限id DISTINCT 去重 [1,2,3,4,5] QueryWrapper<SysRolePermission> sysRolePermissionQueryWrapper = new QueryWrapper<>(); sysRolePermissionQueryWrapper.in("role_id", roleIdList); List<SysRolePermission> sysRolePermissionList = sysRolePermissionMapper.selectList(sysRolePermissionQueryWrapper); List<Integer> permIdList = sysRolePermissionList.stream().map(sysRolePermission -> sysRolePermission.getPermId()).collect(Collectors.toList()); // 3. 查询指定权限id的权限详情 QueryWrapper<SysPermission> sysPermissionQueryWrapper = new QueryWrapper<>(); sysPermissionQueryWrapper.in("id", permIdList ); List<SysPermission> permList = baseMapper.selectList(sysPermissionQueryWrapper); // 4 处理权限--父子关系 List<SysPermission> resultList = new ArrayList<>(); Map<Integer, SysPermission> cache = new HashMap<>(); for (SysPermission sysPermission : permList) { SysPermission permParent = cache.get(sysPermission.getParentId()); if(permParent == null) { // 一级添加结果 resultList.add(sysPermission); } else { permParent.getChildren().add(sysPermission); } // 将自己存放，让孩子可以获得 cache.put(sysPermission.getId(), sysPermission); } return resultList; }
3）前端
<template> <el-container> <el-header> <el-row> <el-col :span="22" class="title"> 学生管理系统(SMS) </el-col> <el-col :span="2"> <!-- <el-popover placement="top-start" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"> <el-avatar slot="reference" size="large" src="/5.jpg"></el-avatar> <div class="avatarItem">用户详情</div> <div class="avatarItem">修改密码</div> <div class="avatarItem">退出登录</div> </el-popover> --> <el-dropdown> <span class="el-dropdown-link"> <el-avatar :size="50" src="/5.jpg"></el-avatar> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>用户详情</el-dropdown-item> <el-dropdown-item>修改密码</el-dropdown-item> <el-dropdown-item>退出登录</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-col> </el-row> </el-header> <el-container> <el-aside width="200px"> <!-- 菜单start --> <el-menu :default-active="$route.path" router background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <el-menu-item index="/"> <i class="el-icon-menu"></i> <span slot="title">首页</span> </el-menu-item> <el-submenu v-for="(onePerm,oi) in permList" :key="oi" :index="onePerm.path"> <template slot="title"> <span>{{onePerm.permName}}</span> </template> <el-menu-item v-for="(twoPerm, ti) in onePerm.children" :key="ti" :index="twoPerm.path">{{twoPerm.permName}}</el-menu-item> </el-submenu> <!-- <el-submenu index="/classes"> <template slot="title"> <i class="el-icon-location"></i> <span>班级管理</span> </template> <el-menu-item index="/classes/classesAdd">添加班级</el-menu-item> <el-menu-item index="/classes/classesList">班级列表</el-menu-item> </el-submenu> <el-submenu index="/student"> <template slot="title"> <span>学生管理</span> </template> <el-menu-item index="/student/studentList">学生列表</el-menu-item> </el-submenu> <el-submenu index="/perm"> <template slot="title"> <span>权限管理</span> </template> <el-menu-item index="/user/userList">用户列表</el-menu-item> <el-menu-item index="/perm/roleList">角色列表</el-menu-item> <el-menu-item index="/perm/permList">权限列表</el-menu-item> </el-submenu> --> </el-menu> <!-- 菜单end --> </el-aside> <el-main> <!-- 视图显示 --> <nuxt/> </el-main> </el-container> <el-footer>传智专修学院</el-footer> </el-container> </template> <script> export default { data() { return { permList: [] } }, methods: { async findAllPerm() { let { data:baseResult } = await this.$axios.get('/user-service/perm/login') this.permList = baseResult.data } }, mounted() { this.findAllPerm() }, } </script> <style> html, body, #__nuxt, #__layout, .el-container { height: 100%; } body { margin: 0; } .avatarItem { width: 100px; display: inline-block; margin: 5px 0; } .title { font-size: 30px; font-weight: bold; } .el-header, .el-footer { background-color: #B3C0D1; color: #333; text-align: center; line-height: 60px; } .el-aside { background-color: #545c64; color: #fff; } .el-main { background-color: #E9EEF3; color: #333; } </style>
