目錄

6.4 權(quán)限管理（菜單管理）

6.4.1 查詢所有（含孩子）

6.4.2 添加權(quán)限

6.4.3 核心3：查詢登錄用戶的權(quán)限，并繪制菜單

6.4 權(quán)限管理（菜單管理）

6.4.1 查詢所有（含孩子）

6.4.2 添加權(quán)限

6.4.3 核心3：查詢登錄用戶的權(quán)限，并繪制菜單

1）后端：SQL版

• 獲得登錄用戶

• 通過登錄用戶獲得角色們

• 通過角色們查詢所有的權(quán)限

• 分析

  ?
  # 1. 查詢用戶的角色
  SELECT role_id FROM sys_user_role WHERE user_id = 'u001'
  # 結(jié)果角色id：[1,2]
  ?
  ?
  # 2. 查詢指定角色們的權(quán)限id  DISTINCT 去重
  SELECT DISTINCT perm_id FROM sys_role_permission WHERE role_id IN (1,2)
  # 結(jié)果權(quán)限id：[1,2,3,4,5] 
  ?
  ?
  # 3. 查詢指定權(quán)限id的權(quán)限詳情
  SELECT * FROM sys_permission WHERE id IN (1,2,3,4,5)
  ?
  # 使用子查詢將3條語(yǔ)句整合
  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);

  • 實(shí)現(xiàn)

    ?@Overridepublic List<SysPermission> findAllByLoginUser(TbUser loginUser) {
    ?//1 查詢指定用戶的所有權(quán)限List<SysPermission> permList = baseMapper.findAllByUserId(loginUser.getUid());
    ?//2 處理權(quán)限--父子關(guān)系List<SysPermission> resultList = new ArrayList<>();Map<Integer, SysPermission> cache = new HashMap<>();for (SysPermission sysPermission : permList) {SysPermission permParent = cache.get(sysPermission.getParentId());if(permParent == null) {// 一級(jí)添加結(jié)果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 獲得所有的權(quán)限List<SysPermission> list = sysPermissionService.findAllByLoginUser(loginUser);
  ?// 3 返回return BaseResult.ok("查詢成功", list);} catch (Exception e) {e.printStackTrace();return BaseResult.error("獲得菜單失敗");}}

2）后端：對(duì)象版

• service層使用通過mapper進(jìn)行一系列的查詢，不用寫SQL語(yǔ)句

  //1. 查詢用戶的角色
  //2. 查詢指定角色們的權(quán)限id  DISTINCT 去重
  //3. 查詢指定權(quán)限id的權(quán)限詳情

 ? ?@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. 查詢指定角色們的權(quán)限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. 查詢指定權(quán)限id的權(quán)限詳情QueryWrapper<SysPermission> sysPermissionQueryWrapper = new QueryWrapper<>();sysPermissionQueryWrapper.in("id", permIdList );List<SysPermission> permList = baseMapper.selectList(sysPermissionQueryWrapper);
?
?// 4 處理權(quán)限--父子關(guān)系List<SysPermission> resultList = new ArrayList<>();Map<Integer, SysPermission> cache = new HashMap<>();for (SysPermission sysPermission : permList) {SysPermission permParent = cache.get(sysPermission.getParentId());if(permParent == null) {// 一級(jí)添加結(jié)果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">學(xué)生管理系統(tǒng)(SMS)</el-col><el-col :span="2">
?<!-- <el-popoverplacement="top-start"width="200"trigger="hover"content="這是一段內(nèi)容,這是一段內(nèi)容,這是一段內(nèi)容,這是一段內(nèi)容。"><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">首頁(yè)</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>班級(jí)管理</span></template><el-menu-item index="/classes/classesAdd">添加班級(jí)</el-menu-item><el-menu-item index="/classes/classesList">班級(jí)列表</el-menu-item></el-submenu><el-submenu index="/student"><template slot="title"><span>學(xué)生管理</span></template><el-menu-item index="/student/studentList">學(xué)生列表</el-menu-item></el-submenu><el-submenu index="/perm"><template slot="title"><span>權(quán)限管理</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">權(quán)限列表</el-menu-item></el-submenu>--></el-menu><!-- 菜單end --></el-aside><el-main><!-- 視圖顯示 --><nuxt/></el-main></el-container><el-footer>傳智專修學(xué)院</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>