上几篇文章已经讲解如何读取部门列表,用户展示和新增修改用户。本章节讲解用户绑定角色权限
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低代码开发平台
请关注我,本星球会持续推出更多的开源项目代码解析,如有更好的意见请留言回复或者私信。