权限管理中,角色授权与认证属于权限模块中的关键模块,角色授权即是将角色能够操作的菜单资源分配给指定角色的行为,角色认证即是当用户扮演指定角色登录系统后系统对于用户操作的资源进行权限校验的操作,意思这里说明白了,那么在代码中应该具体怎么实现呢?
角色授权与认证的方式
- 前端页面展示控制
- 后端权限访问控制
案例实操
角色授权
完成角色记录基本 crud 功能之后,接下来实现角色授权功能,这里实现角色授权首先完成待授权资源显示功能。对于资源的显示,这里使用开源的 tree 插件 ztree。
资源数据查询后端实现
前端 ztree 显示的资源数据格式参考这里。
- ModuleMapper.xml
<select id="queryAllModules" resultType="com.xxxx.crm.dto.TreeDto">
select
id,
IFNULL(parent_id,0) as pId,
module_name AS name
from t_module
where is_valid=1
</select>
- ModuleService.java
public List<TreeDto> queryAllModules(){
return moduleMapper.queryAllModules();
}
- ModuleController.java
@RequestMapping("queryAllModules")
@ResponseBody
public List<TreeDto> queryAllModules(){
return moduleService.queryAllModules();
}
资源数据 ztree 显示
- role.js 添加授权点击事件
//头工具栏事件
table.on('toolbar(roles)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case "add":
openAddOrUpdateRoleDialog();
break;
case "grant":
openAddGrantDailog(checkStatus.data);
break;
};
});
function openAddGrantDailog(datas){
if(datas.length==0){
layer.msg("请选择待授权角色记录!", {
icon: 5});
return;
}
if(datas.length>1){
layer.msg("暂不支持批量角色授权!", {
icon: 5});
return;
}
var url = ctx+"/role/toAddGrantPage?roleId="+datas[0].id;
var title="角色管理-角色授权";
layui.layer.open({
title : title,
type : 2,
area:["600px","280px"],
maxmin:true,
content : url
});
}
- RoleController.java 添加视图转发方法
@RequestMapping("toAddGrantPage")
public String toAddGrantPage(Integer roleId,Model model){
model.addAttribute("roleId",roleId);
return "role/grant";
}
- 准备显示资源数据模板
views/role 目录下添加 grant.ftl 模板文件
<html>
<head>
<link rel="stylesheet" href="${ctx}/static/js/zTree_v3-3.5.32/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${ctx}/static/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="${ctx}/static/js/zTree_v3-3.5.32/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="${ctx}/static/js/zTree_v3-3.5.32/js/jquery.ztree.excheck.js"></script>
</head>
<body>
<div id="test1" class="ztree"></div>
<input id="roleId" value="${roleId!}" type="hidden">
<script type="text/javascript">
var ctx="${ctx}";
</script>
<script type="text/javascript" src="${ctx}/static/js/role/grant.js"></script>
</body>
</html>
- 添加 grant.js
var zTreeObj;
$(function () {
loadModuleInfo();
});
function loadModuleInfo