上几篇文章已经讲解如何读取部门列表，用户展示和新增修改用户。本章节讲解用户绑定角色权限

1、选择需要绑定的用户，工作区右侧更多->分配角色

如下图

1、展示所有可以选择的角色

2、在角色前面的多选框打勾，表示选择分配该角色。

3、点击提交，后台绑定用户角色

2、用户列表的分配角色代码详解

<el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
  <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="handleResetPwd" icon="el-icon-key"
      v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item>
    <el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check"
      v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

如上述代码，实现的效果图如下

@command="(command) => handleCommand(command, scope.row)"点击分配角色执行的方法，其中scope.row表示选中的行记录。

// 更多操作触发
handleCommand(command, row) {
  switch (command) {
    case "handleResetPwd":
      this.handleResetPwd(row);
      break;
    case "handleAuthRole":
      this.handleAuthRole(row);
      break;
    default:
      break;
  }
},

handleAuthRole对应command="handleAuthRole"，判断选择那个下拉对象。

/** 分配角色操作 */
handleAuthRole: function(row) {
  const userId = row.userId;
  this.$router.push("/system/user-auth/role/" + userId);
},

分配角色操作：

1、获取用户id。

2、打开一个新的页面，在新的页面展示角色列表。其中userId作为参数传入，在另外一个页面获取。

this.$router.push("/system/user-auth/role/" + userId); 这个语句跳转是动态路由，所以在/router/index文件里面定义了动态路由，如下图

path: '/system/user-auth',该虚拟路径映射实体路径
component: () => import('@/views/system/user/authRole'),'/system/user-auth',该虚拟路径映射实体路径@/views/system/user/authRole

3、角色页面

获取用户已经绑定的角色，所以需要从路由参数中获取userId，代码如下：

created() {
  const userId = this.$route.params && this.$route.params.userId;
}

在created方法中，通过this.$route.params && this.$route.params.userId来获取参数userId。

if (userId) {
  this.loading = true;
  getAuthRole(userId).then((response) => {
    this.form = response.user;
    this.roles = response.roles;
    this.total = this.roles.length;
    this.$nextTick(() => {
      this.roles.forEach((row) => {
        if (row.flag) {
          this.$refs.table.toggleRowSelection(row);
        }
      });
    });
    this.loading = false;
  });
}

如上述代码的逻辑是，判断是否可以获取参数里面的用户id，如果可以获取，则调用用户绑定角色api接口，获取角色数据。如下是vue调用接口函数

// 查询授权角色
export function getAuthRole(userId) {
  return request({
    url: '/system/user/authRole/' + userId,
    method: 'get'
  })
}

4、javaAPI接口

/**
 * 根据用户编号获取授权角色
 */
@PreAuthorize("@ss.hasPermi('system:user:query')")
@GetMapping("/authRole/{userId}")
public AjaxResult authRole(@PathVariable("userId") Long userId)
{
    AjaxResult ajax = AjaxResult.success();
    SysUser user = userService.selectUserById(userId);
    List<SysRole> roles = roleService.selectRolesByUserId(userId);
    ajax.put("user", user);
    ajax.put("roles", SysUser.isAdmin(userId) ? roles : roles.stream().filter(r -> !r.isAdmin()).collect(Collectors.toList()));
    return ajax;
}

java类文件路径如下：

执行的sql配置

<select id="selectRolePermissionByUserId" parameterType="Long" resultMap="SysRoleResult">
   <include refid="selectRoleVo"/>
   WHERE r.del_flag = '0' and ur.user_id = #{userId}
</select>

<sql id="selectRoleVo">
    select distinct r.role_id, r.role_name, r.role_key, r.role_sort, r.data_scope, r.menu_check_strictly, r.dept_check_strictly,
           r.status, r.del_flag, r.create_time, r.remark 
       from sys_role r
        left join sys_user_role ur on ur.role_id = r.role_id
        left join sys_user u on u.user_id = ur.user_id
        left join sys_dept d on u.dept_id = d.dept_id
   </sql>

执行关联表包括：sys_role，sys_user_role，sys_user，sys_dept

未来计划

1、ruoyi非分离版本拆解

2、ruoyi-vue-pro：讲解工作流

3、ruoyi-vue-pro：支付模块，电商模块

4、基于ruoyi-vue-pro项目开发

5、JEECG低代码开发平台

请关注我，本星球会持续推出更多的开源项目代码解析，如有更好的意见请留言回复或者私信。