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>