Spring MVC 项目搭建 -4- spring security-添加自定义登录页面
修改配置文件
<!--spring-sample-security.xml-->
<!-- 去除不需要拦截的url -->
<http pattern="/libs/**" security="none"/>
<http pattern="/login.html" security="none" />
<http pattern="/resources/**" security="none" />
<!-- 配置一层拦截,需要输入正确用户名密码才能访问网站 -->
<http auto-config="true" >
<!-- 拦截不是ROLE_USER的请求 -->
<intercept-url pattern="/*" access="ROLE_USER" />
<!-- 登录配置 -->
<form-login login-page="/login.html"
default-target-url="/test/mytest/loginSuccess"
authentication-failure-url="/test/mytest/loginFaild"/>
<!--退出登录配置-->
<logout invalidate-session="true"
logout-success-url="/"
logout-url="/j_spring_security_logout"/>
</http>
添加登录成功失败处理器
//TestController
/**
* 登录成功处理器
* @return
*/
@RequestMapping(value="/loginSuccess",method=RequestMethod.GET)
public @ResponseBody boolean loginSuccess(){
return true;
}
/**
* 登录失败处理器
* @return
*/
@RequestMapping(value="/loginFaild",method=RequestMethod.GET)
public @ResponseBody boolean loginFaild(){
return false;
}
添加页面
login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="0o晓月メ">
<title>login</title>
<!-- bootstrap -->
<link href="libs/bootstrap-3.3.5/dist/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="libs/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="libs/bootstrap-3.3.5/dist/js/bootstrap.js"></script>
<!-- less -->
<link href="resources/less/main.less" rel="stylesheet/less" type="text/css">
<script src="libs/less/less.min.js" type="text/javascript"></script>
<script src="resources/js/login.js" type="text/javascript"></script>
</head>
<body class="main-body">
<div class ="main-container">
<div class="panel panel-info login-container">
<div class="panel-heading" style="text-align: left;">登录</div>
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
<label for="userName" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="userName" placeholder="UserName">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
</div>
<button type="button" class="btn btn-info" id="loginBtn">登 录</button>
<button type="button" class="btn btn-info" id = "resetBtn">重 置</button>
</form>
</div>
</div>
</body>
</html>
login.js
$(function(){
// username field event
$('#userName')
.change(function(){
$('#password').val('');
})
.keydown(function(event){
if (event.keyCode == 13){
$('#password').focus();
}
});
// btn event
$('#loginBtn').click(function(event){
login();
});
$('#resetBtn').click(function(event){
$('#userName').val('').focus();
$('#password').val('');
});
});
function login(){
var userName = $('#userName').val(),
password = $('#password').val();
userName = $.trim(userName);
var loginBtn = $('#loginBtn');
loginBtn.attr("disabled", true);
$.ajax({
type : "POST",
dataType : 'json',
data : {
j_username: userName,
j_password: password
},
url : "j_spring_security_check",
success : function(result){
if(result) {
window.location.href = "main.html";
}else {
$('#username').focus();
loginBtn.removeAttr("disabled");
alert('failed');
}
},
error: function(err){
loginBtn.removeAttr("disabled");
}
});
};
main.html
<!DOCTYPE html>
<html style="height:100%">
<head>
<meta charset="utf-8">
<meta name="author" content="0o晓月メ">
<title>main</title>
<script type="text/javascript" src="libs/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btn-logout').click(function(event){
logout();
});
});
function logout(){
$.ajax({
type : "POST",
url : "./j_spring_security_logout",
success : function(result){
window.location.href = 'login.html'
},
error: function(){
}
});
};
</script>
</head>
<body >
<button type="button" id = "btn-logout">logout</button>
</body>
</html>