1.课程介绍
1. 登录功能(掌握)
2. 角色功能(操作权限)(掌握)
一,登录功能
把数据库里面的内容加密
public class MD5Util {
// String algorithmName, Object source, Object salt, int hashIterations
//设置盐值
public static final String SALT = "itsource";
//设置遍历次数
public static final int HASHITERATIONS = 10;
//传入一个字符串，返回一个md5编码的值
public static String createMd5Str(String str){
SimpleHash hash = new SimpleHash("MD5",str,SALT,HASHITERATIONS);
return hash.toString();
}
}
@Test
public void testUpdatePwd() throws Exception{
List<Employee> list = employeeService.findAll();
for (Employee employee : list) {
employee.setPassword(MD5Util.createMd5Str(employee.getPassword()));
employeeService.save(employee); //注:save是添加与修改
}
}
准备登陆页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>源码智销系统</title>
<%@ include file="/WEB-INF/views/head.jsp"%>
<script type="text/javascript">
//判断当前是否是顶层窗口
if (top != window){
window.top.location.href = window.location.href;
}
//登陆方法
function submitForm(){
//提交表单
$("#loginForm").form('submit',{
url:"/login",
success:function(data){
console.log(data);
console.log(typeof data);
var jsonObj = $.parseJSON(data);
console.log(jsonObj.success);
if(jsonObj.success){
//进入成功页面
location.href="/main/index";
}else{
$.messager.alert('温馨提示：',"登录失败"+jsonObj.msg,"error");
}
}
});
}
// //按回车进行登陆 绑定键盘事件 keyon keydown keyup 按完抬起
$(document.documentElement).on('keyup',function(event){
//event 键盘事件对象
if(event.keyCode == 13){
//提交表单
submitForm();
}
})
</script>
</head>
<body>
<div align="center" style="margin-top: 100px;">
<div class="easyui-panel" title="智销系统用户登陆" style="width: 350px; height: 240px;">
<form id="loginForm" class="easyui-form" method="post">
<table align="center" style="margin-top: 15px;">
<tr height="20">
<td>用户名:</td>
</tr>
<tr height="10">
<td><input name="username" class="easyui-validatebox" required="true" value="admin" /></td>
</tr>
<tr height="20">
<td>密 码:</td>
</tr>
<tr height="10">
<td><input name="password" type="password" class="easyui-validatebox" required="true" value="123456" /></td>
</tr>
<tr height="40">
<td align="center"><a href="javascript:;" class="easyui-linkbutton" onclick="submitForm();">登陆</a> <a
href="javascript:;" class="easyui-linkbutton" onclick="resetForm();">重置</a></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
修改applicationContext-shiro.xml
<bean id="shiroFilter" class="org.apache.shiro.spring.web.ShiroFilterFactoryBean">
<property name="securityManager" ref="securityManager"></property>
<!-- 认证没有成功跳转的页面-->
<property name="loginUrl" value="/login"></property>
<!-- 登陆成功进入页面-->
<property name="successUrl" value="/main/index"></property>
<!-- 没有权限 进入页面 -->
<property name="unauthorizedUrl" value="/s/unauthorized.jsp"></property>
静态资源放行
Map mp = new LinkedHashMap();
mp.put("/login","anon");
mp.put("*.js","anon");
mp.put("*.css","anon");
mp.put("/css/**","anon");
mp.put("/js/**","anon");
mp.put("/easyui/**","anon");
mp.put("/images/**","anon");
mp.put("/s/login.jsp","anon");
mp.put("/s/permission.jsp","perms[user:*]");
mp.put("/**","authc");
return mp;
完成登陆功能
public class JpaRealm extends AuthorizingRealm {
@Autowired
private IEmployeeService employeeService;
。。。
//AuthenticationInfo:认证; 身份验证; 证明
//登录的时候就会调用这个方法来做验证
@Override
protected AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken token) throws AuthenticationException {
//身份认证(用户名)
// 1.拿到用户名
UsernamePasswordToken usernamePasswordToken = (UsernamePasswordToken)token;
String username = usernamePasswordToken.getUsername();
// 2.根据用户名到数据库拿到用户
Employee loginUser = employeeService.findByUsername(username);
if(loginUser==null){
return null; //该用户名不存在
}
//从数据库中拿到密码
Object credentials = loginUser.getPassword();
//加盐的数据
ByteSource byteSource = ByteSource.Util.bytes("itsource");
return new SimpleAuthenticationInfo(loginUser,credentials,byteSource,getName());
}
}
json返回封装数据
public class JsonResult {
//是否成功
private boolean success = true;
//消息
private String msg ;
public JsonResult() {
}
public JsonResult(boolean success, String msg) {
this.success = success;
this.msg = msg;
}
public boolean isSuccess() {
return success;
}
public void setSuccess(boolean success) {
this.success = success;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
}
登陆功能
@RequestMapping(value = "/login",method = RequestMethod.POST)
@ResponseBody
public JsonResult login(String username, String password) {
//得到主体
Subject subject = SecurityUtils.getSubject();
//判断改主体是否已经认证过
if (!subject.isAuthenticated()) {
//完成认证
try {
UsernamePasswordToken token = new UsernamePasswordToken(username, password);
subject.login(token);
} catch (UnknownAccountException e) {
e.printStackTrace();
System.out.println("账号不存在");
return new JsonResult(false, "账号不存在");
} catch (IncorrectCredentialsException e) {
e.printStackTrace();
System.out.println("密码错误");
return new JsonResult(false, "密码错误");
} catch (AuthenticationException e) {
e.printStackTrace();
System.out.println("其他问题");
return new JsonResult(false, "其他问题");
}
}
//表示成功
return new JsonResult();
}
//注销
@RequestMapping("/logout")
public String logout(){
Subject subject = SecurityUtils.getSubject();
subject.logout();
return "forward:/WEB-INF/views/login.jsp";
}
二,权限domain部分
创建domain使用代码生成器完成
权限完善
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>permission管理</title>
<%@include file="/WEB-INF/views/head.jsp" %>
<script type="text/javascript" src="/js/model/permission.js"></script>
</head>
<body>
<table id="permissionGrid" class="easyui-datagrid" data-options="fit:true,fixed:true,fitColumns:true,toolbar:'#tb',singleSelect:true"
url="/permission/page"
iconCls="icon-save"
enableHeaderClickMenu="true"
rownumbers="true" pagination="true"
>
<thead>
<tr>
<th width="20" field="name" sortable="true">权限名称</th>
<th width="20" field="url" sortable="true">资源路径</th>
<th width="20" field="descs" sortable="true">描述</th>
<th width="20" field="sn" sortable="true">权限编号</th>
<%-- <th width="20" field="menuId" sortable="true">menuId</th>--%>
</tr>
</thead>
</table>
<div id="tb" style="padding:5px;height:auto">
<!-- 这部分是加上增删改的按键:现在没有功能，我们先不管它 -->
<div style="margin-bottom:5px">
<a href="#" data-method="add" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
<a href="#" data-method="edit" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
<a href="#" data-method="del" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
</div>
<!-- 这部门是查询的功能 -->
<div>
<form id="searchForm" action="/permission/download" method="post">
名称： <input name="name" class="easyui-textbox" style="width:80px;height:32px">
<a href="#" data-method="search" class="easyui-linkbutton" iconCls="icon-search">查找</a>
</form>
</div>
</div>
<!-- 弹出相应的功能框 -->
<div id="permissionDialog" class="easyui-dialog" title="数据操作" data-options="closed:true,modal:true" style="width:400px;padding:10px">
<form id="permissionForm" method="post">
<input id="permissionId" type="hidden" name="id">
<table cellpadding="5">
<tr>
<td>name:</td>
<td><input class="easyui-validatebox" type="text" name="name"></input></td>
</tr>
<tr>
<td>url:</td>
<td><input class="easyui-validatebox" type="text" name="url"></input></td>
</tr>
<tr>
<td>descs:</td>
<td><input class="easyui-validatebox" type="text" name="descs"></input></td>
</tr>
<tr>
<td>sn:</td>
<td><input class="easyui-validatebox" type="text" name="sn"></input></td>
</tr>
<tr>
<td>menuId:</td>
<td><input class="easyui-validatebox" type="text" name="menuId"></input></td>
</tr>
</table>
<div style="text-align:center;padding:5px">
<a href="javascript:void(0)" class="easyui-linkbutton" data-method="save">提交</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#permissionDialog').dialog('close')">取消</a>
</div>
</form>
</div>
<div id="gridMenu" class="easyui-menu" style="width:120px;">
<div data-options="iconCls:'icon-add'" data-method="add" >添加</div>
<div data-options="iconCls:'icon-edit'" data-method="edit">修改</div>
<div data-options="iconCls:'icon-remove'" data-method="del">删除</div>
</div>
</body>
</html>
三,角色管理(页面功能)
<div id="roleDialog" class="easyui-dialog" data-options="closed:true,modal:true" title="功能操作" style="width:900px">
<div style="padding:10px 60px 20px 40px">
<form id="roleForm" class="easyui-form" method="post" data-options="">
<input type="hidden" id="roleId" name="id" >
<table cellpadding="5" style="width: 100%;">
<tr>
<td>
名称:<input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input>
编码:<input class="easyui-validatebox" type="text" name="sn" data-options="required:true"></input>
</td>
</tr>
<tr>
<td colspan="2">
<div id="cc" class="easyui-layout" style="width: 100%;height:400px;">
<div data-options="region:'west',split:true" style="width:50%;">
<table id="userPermissionGrid">
<thead>
<tr>
<th width="10" field="name" >名称</th>
<th width="20" field="url" >对应的资源</th>
<th width="20" field="sn" >对象的权限</th>
</tr>
</thead>
</table>
</div>
<div data-options="region:'center'" style="padding:5px;background:#eee;">
<table id="allPermissionGrid">
<thead>
<tr>
<th width="10" field="name" >名称</th>
<th width="20" field="url" >对应的资源</th>
<th width="20" field="sn" >对象的权限</th>
</tr>
</thead>
</table>
</div>
</div>
</td>
</tr>
</table>
</form>
<div style="text-align:center;padding:5px">
<a href="javascript:void(0)" class="easyui-linkbutton" data-method="save">提交</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#roleDialog').dialog('close')">取消</a>
</div>
</div>
</div>
role.js
…
//用户权限列表
var userPermissionGrid =$("#userPermissionGrid");
//所有权限列表
var allPermissionGrid =$("#allPermissionGrid");
…
var itsource={
… //添加数据(弹出添加的模态框)
add:function () {
//如果有data-save属性，我们把它展示出来
$("*[data-save]").show();
//启动有data-save属性的input元素的验证功能
$("*[data-save] input").validatebox("enableValidation");
roleForm.form("clear");//清除数据
//弹出表单窗口
roleDialog.dialog("center").dialog('open');
//当前用户权限清空
userPermissionGrid.datagrid("loadData",[]);
},
//修改数据(弹出修改的模态框)
edit:function () {
//选中了某一条数据才删除
var row = roleGrid.datagrid("getSelected");
if(row){
//隐藏有data-save属性的元素
$("*[data-save]").hide();
//禁用有data-save属性的input元素的验证功能
$("*[data-save] input").validatebox("disableValidation");
roleForm.form("clear");//清除数据
roleDialog.dialog("center").dialog('open');
//为form加载数据
roleForm.form("load",row);
//单独解决权限的回显问题(注意，这里要准备一个新的权限,以免删除时出问题)
var permissions = [];
$.extend(permissions,row.permissions);
userPermissionGrid.datagrid("loadData",permissions);
}else{
$.messager.alert('提示信息','请选择一行再进行修改!','info');
}
},
…
//双击所有权限，把一个权限交给这个角色
addPermission:function(rowIndex, rowData){
//判断是否有重复的行
//1.拿到角色权限所有的行数据
var rows = userPermissionGrid.datagrid("getRows");
//2.遍历rows拿到每一个员工数据
for(var i=0;i<rows.length;i++){
var row = rows[i]; //3.判断如果出现相等数据的情况
if(row.id == rowData.id){
//不做任何操作(也可以给出提示)
$.messager.show({
title:'提示',
msg:'该权限已经添加！',
timeout:2000,
showType:'slide'
});
return;
}
}
//把数据加到相应角色权限Grid中
userPermissionGrid.datagrid("appendRow",rowData);
},
//双击后移动相应的权限
removePermission:function (rowIndex, rowData) {
userPermissionGrid.datagrid("deleteRow",rowIndex);
}
}
//我们在这里创建两个Grid
//1.创建当前角色的权限Grid
userPermissionGrid.datagrid({
fit:true,
fixed:true,
fitColumns:true,
//双击后移除权限
onDblClickRow:itsource.removePermission
})
//2.获取所有权限的Grid
allPermissionGrid.datagrid({
fit:true,
fixed:true,
fitColumns:true,
//toolbar:'#tb',
// singleSelect:true";
url:"/permission/page",
rownumbers:"true" ,
pagination:"true",
//双击后添加权限
onDblClickRow:itsource.addPermission
})
404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
