登录页面验证与设置cookie

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>欢迎</title>
<script type="text/javascript" src="${rc.contextPath}/platform/plugins/lib/jquery-3.3.1.min.js" charset="utf-8"></script>
<script type="text/javascript" src="${rc.contextPath}/view/common/js/login.js"></script>
<script type="text/javascript" src="${rc.contextPath}/platform/plugins/layui/lay/modules/layer.js"></script>
<script type="text/javascript">
	CONTEXT_PATH = "${rc.contextPath}";
</script>
<style type="text/css">
html,body{ height:100%; }
</style>
</head>
<body>
<div class="loginBg">
   <div class="logintop">    
     <div class="loginlogo"><img src="${rc.contextPath}/platform/common/images/logo.png"/>&nsap;</div>       
   </div>
   <div class="loginWrap">
     <div class="loginImg"><img src="${rc.contextPath}/platform/common/images/login_img.png"/>&nsap;</div>
     <div class="loginbox">
        <p>用户登录<i>UserLogin</i></p>
        <ul>
            <li><input name="" type="text" class="loginuser" placeholder="用户名" onclick="JavaScript:this.value=''"/></li>
           <form action="#" method="post"> 
          <li>
          <input name="password" type="password" class="loginpwd" id="password" placeholder="密码 " onclick="JavaScript:this.value=''"/><span style="display:none;">大写锁定已开启</span>
            </li> 
            </form>
           <!-- <form action="#" method="post">
              <p>
               <label for="password">密码：</label>
               <input type="password" id="password" name="password" /><span style="display:none;">大写锁定键被按下，请注意大小写</span>
                </p>
             </form> -->
            <li class="yzm">
                <span><input id="yzm" name="" type="text" placeholder="验证码" value="${valide!''}" /></span>
                <cite><img id="img" src="${rc.contextPath}/authImage" onclick="Login.flushCode();"/></cite> 
            </li>
             <li>
                <label><input id="rememberPwd" name="" type="checkbox" value="" />记住密码</label>
                <label><a href="#">忘记密码？</a></label>
            </li> 
            <li>
                <input name="" type="submit" class="loginbtn" value="登  &nbsp; 录" onclick="Login.loginCheck();"/>
            </li>
        </ul>
     </div>
   </div>
</div>
<script type="text/javascript">
//<![CDATA[
function  detectCapsLock(event){
    var e = event||window.event;
    var o = e.target||e.srcElement;
    var oTip = o.nextSibling;
    var keyCode  =  e.keyCode||e.which; // 按键的keyCode 
    var isShift  =  e.shiftKey ||(keyCode  ==   16 ) || false ; // shift键是否按住
     if (
     ((keyCode >=   65   &&  keyCode  <=   90 )  &&   !isShift) // Caps Lock 打开，且没有按住shift键 
     || ((keyCode >=   97   &&  keyCode  <=   122 )  &&  isShift)// Caps Lock 打开，且按住shift键
     ){oTip.style.display = '';}
     else{oTip.style.display  =  'none';} 
}
document.getElementById('password').onkeypress = detectCapsLock;
//]]>
</script> 
</body>
</html>

js设置cookie

Login = {
	/**
	 * 用户校验
	 */
	loginCheck : function(){
		var userCode = $(".loginuser").val();
		var password = $(".loginpwd").val();
		var verifyCode = $("#yzm").val();
		if(!userCode){
			layer.tips('请输入用户名', '.loginuser', {
			    tips: [2, '#e99313'],
			    time: 2000
			});
			return;
		}
		if(!password){
			layer.tips('请输入密码', '.loginpwd', {
			    tips: [2, '#e99313'],
			    time: 2000
			});
			return;
		}
		if(!verifyCode){
			layer.tips('请输入验证码', '.yzm', {
			    tips: [2, '#e99313'],
			    time: 2000
			});
			return;
		}
		var url = CONTEXT_PATH + "/pbWeb/loginCheck";
		$.ajax({
			url : url+"?decAjaxReq=yes",
			data : {
				    userCode : userCode,
				    password : password,
				    verifyCode : verifyCode
				   },
			dataType : 'JSON',
			type : 'POST',
			success : function(data){
				
				if(data.status == WebConst.SUCCESS){  //登录成功
				    window.location.href = CONTEXT_PATH + "/pbWebMain";
				    $.get(CONTEXT_PATH + "/integralRule/putUserIntRuleInCatch");
				    Login.rememberCookie();
				}else if(data.status == LoginConst.LOGIN_USER_NOTEXIST_CODE){		//用户不存在
					layer.msg(data.message);
				}else if(data.status == LoginConst.LOGIN_VERIFYCODE_OUTDATE_CODE){	//验证码过期
					layer.msg(data.message);
				}else if(data.status == LoginConst.LOGIN_VERIFYCODE_ERROR_CODE){	//验证码错误
					layer.msg(data.message);
				}else if(data.status == LoginConst.LOGIN_USER_INVALID_CODE){		//无效用户
					layer.msg(data.message);
				}else if(data.status == LoginConst.LOGIN_USER_LOCKED_CODE){			//用户账号被锁定
					layer.msg(data.message);
				}else if(data.status == LoginConst.LOGIN_USERPWD_ERROR_CODE){		//用户密码错误
					layer.msg(data.message);
				}
				if(data.status != WebConst.SUCCESS){ //刷新验证码
					Login.flushCode();
				}
			},
			error : function(){
				layer.msg('登录错误');
			}
			
		});
	},
	,
	/**
	 * 设置cookie
	 * @param sName
	 * @param sValue
	 * @param oExpires
	 * @param sPath
	 * @param sDomain
	 * @param bSecure
	 */
    setCookie :function (sName, sValue, oExpires, sPath, sDomain, bSecure) {
		var sCookie = sName + "=" + encodeURIComponent(sValue); 
	    if (oExpires) { 
	        var sst = oExpires* 24 * 60 * 60 * 1000;
	        date = new Date(); 
	        date.setTime(date.getTime() + sst); 
	        sCookie += "; expires=" + date.toGMTString(); 
	    } 
		if (sPath) {
		sCookie += "; path=" + sPath;
		}
		if (sDomain) {
		sCookie += "; domain=" + sDomain;
		}
		if (bSecure) {
		sCookie += "; secure";
		}
		document.cookie = sCookie;
		},
	/**
	 * 获得cookie
	 * @param sName
	 * @returns
	 */	
	getCookie : function(sName){
		var sRE = "(?:; )?" + sName + "=([^;]*);?";
		var oRE = new RegExp(sRE);
		if (oRE.test(document.cookie)) {
		return decodeURIComponent(RegExp["$1"]);
		} else {
		return null;
		}
	},
	/**
	 * 记住密码
	 */
	rememberCookie : function() {
		
		var username = $(".loginuser").val();
		var password = $(".loginpwd").val();
		var expires = "30";
		if ($("#rememberPwd").prop("checked")) {
			Login.setCookie("username",username,expires);
			Login.setCookie("password",password,expires);
		  }else{
			  Login.clearCookie();
		  }
	},
	/**
	 * 用户名 密码回填
	 */
	fillList: function(){
		
		var user = Login.getCookie('username');
		var pwd = Login.getCookie('password');
		if(user != "" && pwd != ""){
			$(".loginuser").val(user);
			$(".loginpwd").val(pwd);
		if(!user || !pwd){
			$("#rememberPwd").attr("checked",false);
		}else{
			$("#rememberPwd").attr("checked",true);
		}
		}
	},
	/**
	 * 清除cookie
	 */
    clearCookie : function(){
		var keys=document.cookie.match(/[^ =;]+(?=\=)/g); 
		if (keys) { 
		for (var i = keys.length; i--;) 
		document.cookie=keys[i]+'=0;expires=' + new Date( 0).toUTCString() 
		}
	 },
	 
	 /**
	  * 刷新验证码
	  */
	flushCode : function() {
	    // 每次刷新的时候获取当前时间，防止浏览器缓存刷新失败
	    var time = new Date();
	    var src = CONTEXT_PATH + "/authImage?time=" + time;
	    $("#img").attr("src",src);
	}
};
$(document).keydown(function(event){  
    if ((event.keyCode == '13')){ //回车
        $(".loginbtn").trigger("click");  
    }  
});

后台验证

	/**
	 * 登录验证
	 * 
	 * @param request
	 * @return
	 */
	@ResponseBody
	@RequestMapping(value = "/loginCheck", method = RequestMethod.POST)
	public AssembleJSON loginCheck(Model model,HttpServletRequest request) {
		try {
			String userCode = request.getParameter("userCode");
			String sender = request.getParameter("userCode") + request.getParameter("password");
			String EncryptedStr = MD5Util.MD5Encrypted(sender);
			String str = userService.checkUser(userCode);
			if (LoginConstant.LOGIN_USER_NOTEXIST_CODE.equals(str)) { // 用户不存在
				return AssembleJSON.SUCCESS(Integer.valueOf(LoginConstant.LOGIN_USER_NOTEXIST_CODE),
						LoginConstant.LOGIN_NOTEXIST_STRING);
			}
			if (str == LoginConstant.LOGIN_USER_INVALID_CODE) { // 无效用户
				return AssembleJSON.SUCCESS(Integer.valueOf(LoginConstant.LOGIN_USER_INVALID_CODE),
						LoginConstant.LOGIN_USER_INVALID_STRING);
			}
			if (str == LoginConstant.LOGIN_USER_LOCKED_CODE) { // 锁定用户
				return AssembleJSON.SUCCESS(Integer.valueOf(LoginConstant.LOGIN_USER_LOCKED_CODE),
						LoginConstant.LOGIN_USER_LOCKED_STRING);
			}
			String verifyCode = request.getParameter("verifyCode");
			String code = (String) request.getSession().getAttribute("verCode");
			if (null == code) { // 验证码过期
				return AssembleJSON.SUCCESS(Integer.valueOf(LoginConstant.LOGIN_VERIFYCODE_OUTDATE_CODE),
						LoginConstant.LOGIN_VERIFYCODE_OUTDATE_STRING);
			}
			if (null != code && verifyCode.toLowerCase().equals(code.toLowerCase())) {
				if (EncryptedStr.equals(str)) {
					User user = userService.getUserByCode(userCode);
					user.setUserPass(request.getParameter("password"));
					request.getSession(true).setAttribute(LoginConstant.LOGIN_USER_SESSION_KEY, user);
					ThreadContextHolder.setHttpRequest(request); // 将当前登录 Request 放入线程变量
					return AssembleJSON.SUCCESS(user);
				} else { // 用户密码错误
					return checkLoginNum(request,userCode);
				}
			} else { // 验证码错误
				return AssembleJSON.SUCCESS(Integer.valueOf(LoginConstant.LOGIN_VERIFYCODE_ERROR_CODE),
						LoginConstant.LOGIN_VERIFYCODE_ERROR_STRING);
			}
		}finally{
			try {
				User user = (User) request.getSession().getAttribute(LoginConstant.LOGIN_USER_SESSION_KEY);
				if(user != null) {
					Log log = new Log();
					log.setLogUserCode(user.getUserCode());
					log.setLogUserName(user.getUserName());
					log.setLogType(Constant.LOG_TYPE_LOGIN);
					log.setLogTime(new Date());
					log.setLogIp(request.getRemoteAddr());
					logService.insertLog(log);			// 添加登录记录到系统日志表
				 }
				}catch(Exception e) {
					log.error(e.getMessage());
				}
			}
	}

登录页面验证与设置cookie

猜你喜欢