【学生管理系统】权限管理
目录
6.4 权限管理（菜单管理）
6.4.1 查询所有（含孩子）
6.4.2 添加权限
6.4.3 核心3：查询登录用户的权限，并绘制菜单
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>