Spring Boot 集成 Spring Security 使用
创建时间:2018-05-19  访问量:8271  6  2

Spring Boot 集成 Spring Security 使用

    <div class="modal fade" id="login-dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" style="display:none;font-family:'微软雅黑'" data-backdrop="static">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header" style="color:#666;"><i class="fa fa-user-circle" aria-hidden="true"></i>&nbsp;请登录</div>
	      <div class="modal-body" style="font-size:14px;">
	      	<form id="dg-loginForm">
				<div class="form-group">
					<input type="text" id="loginName" name="loginName" class="form-control" placeholder="请输入登录名" />
				</div>
				<div class="form-group">
					<input type="password" id="password" name="password" class="form-control" placeholder="请输入密码"/>
				</div>
				<div class="form-group">
				    <input type="text" style="width:150px;display:inline;" name="captcha" class="form-control" id="captcha" placeholder="请输入验证码" />
				    <img id="imgCaptcha" alt="验证码" th:src="@{/auth/captcha}" style="height:32px;width:100px;margin-top:-2px;"/>
				    <a href="javascript:changeCaptcha();">看不清</a>
				</div>
				<div class="checkbox">
					<label>
						<input name="rememberMe" id="rememberMe" type="checkbox"/> 记住我一周
					</label>
				</div>
			</form>
			<div id="dgLoginErrorList" style="color:red;"></div>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-success" onclick="loginProcess()">登录</button>
	        <a th:href="@{/register}" target="_blank" class="btn btn-default">注册</a>
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	      </div>
	    </div>
	  </div>
	</div>
	<script type="text/javascript" th:inline="javascript">
	/*<![CDATA[*/
	
	//获取服务器上下文路径放在context变量中
	var context = [[${#httpServletRequest.getContextPath()}]];
	//获取csrf变量的token值放在_csrf变量中,此变量要作为所有请求的参数
	var _csrf = [[${#httpServletRequest.getAttribute("_csrf")}]].token;
	
	$(function(){
		$("#dg-loginForm").validate({
			rules:{
				loginName:{required:true},
				password:{required:true},
				captcha:{required:true}
			},
			messages:{
				loginName:{required:"登录名不能为空"},
				password:{required:"密码不能为空"},
				captcha:{required:"验证码不能为空"}
			},
			showErrors : function(errorMap, errorList) {
		        for(var obj in errorMap) {
		            $('#'+obj).parent().addClass('has-error');
		        }
		        this.defaultShowErrors();
		    },
		    success:function(label) {
		        $(label).parent().prev().removeClass('has-error');
		        $(label).parent().removeClass('has-error');
		    },
			submitHandler: function(form){
				var loginData = {};
				loginData.loginName = $("#loginName").val();
				loginData.password = $("#password").val();
				loginData.captcha = $("#captcha").val();
				loginData.rememberMe = $("#rememberMe").is(":checked");
				loginData._csrf = _csrf;
				showLoading();
				FJQuery.ajaxCommon(context+"/loginProcess?ajax=true", loginData, function(data){
					if(data.status == "success"){
						alert("登录成功");
						location.reload();
					}else {
						alert(data.message);
					}
					hideLoading();
				});
			}
		});
		
		$("#loginName").keydown(function (e) {
	    	var curKey = e.which;
	      	if (curKey == 13) {
	      		loginProcess();
		        return false;
	    	}
	    });
		$("#password").keydown(function (e) {
	    	var curKey = e.which;
	      	if (curKey == 13) {
	      		loginProcess();
		        return false;
	    	}
	    });
		$("#captcha").keydown(function (e) {
	    	var curKey = e.which;
	      	if (curKey == 13) {
	      		loginProcess();
		        return false;
	    	}
	    });
	});
	
	function changeCaptcha() {
		$("#imgCaptcha").attr("src",context+"/auth/captcha?time="+new Date().getTime());
	}
	
	function loginProcess() {
		$("#dg-loginForm").submit();
	}
	
	/*]]>*/
	</script>

登录对话框代码