【学生管理系统】权限管理

目录

[6.4 权限管理（菜单管理）](#6.4 权限管理（菜单管理）)

[6.4.1 查询所有（含孩子）](#6.4.1 查询所有（含孩子）)

[6.4.2 添加权限](#6.4.2 添加权限)

[6.4.3 核心3：查询登录用户的权限，并绘制菜单](#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>