网站建设多久可以建成东莞网站开发公司

目录

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);

  • 实现

    ​@Overridepublic 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

  

      @Resourceprivate HttpServletRequest request;@Resourceprivate 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的权限详情

    @Overridepublic 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-popoverplacement="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"routerbackground-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>