使用Cookie记住密码、自动登录

最近弄了一下关于记住密码、自动登录的东西，这里记录一下主要的代码，以备不时之需。页面布局和一些次要的代码就不贴了，直接要主要的。

 

1、点击“记住密码”、“自动登录”复选框时触发的事件：

/**
 *点击“记住密码”复选框时触发事件
*/
function rememberPwd(obj){
	var isChecked = $(obj)[0].checked;
	//判断“记住密码”是否选中，若是选中，此时不需要操作“自动登录”。若是没选中，且“自动登录”勾选，那么需要撤销“自动登录”
	if(!isChecked){//说明没选中
		if($("#autoLogin")[0].checked){//"自动登录"也选中了
			$("#autoLogin")[0].checked=false;//取消自动登录
		}
	}
}
/**
* 点击“自动登录”复选框触发事件
*/
function autoLogin(obj){
	var isChecked = $(obj)[0].checked;
	//若是勾选“自动登录”，那么必然要勾选“记住密码”，若取消“自动登录”，那么“记住密码”不需要操作
	if(isChecked){//被选中了，那么“记住密码”框需要选中
		$("#rememberPwd")[0].checked=true;//启动记住密码
	}
} 
/*通过AJAX提交时带过去的参数信息：
{"userName":name,"password":pwd,"flag":1,"rememberPwd":rememberPwd,"
autoLogin":autoLogin,"time":new Date().getTime()}
*/

 

2、点击“登录”按钮校验成功之后，在java代码中使用cookie记住“记住密码”、“自动登录”标注的状态（因为系统一打开就要显示“最后一次登录的用户”信息，所以加了一个“是否为最后一次登录”的标记）：

.....
String cookieValue="";
if(rememberPwd==1){
	String md5Pwd=this.getPassword();
	if(md5Pwd!=null && md5Pwd.length()<13){//没有加密的
		md5Pwd=Md5.getPWD(this.getPassword());//加密
	}
	cookieValue="1,"+md5Pwd+","+rememberPwd+","+autoLogin+","+userinfo.getUsername();//1表示当前用户是最后一次登录的
}else{
	cookieValue="1,"+","+rememberPwd+","+autoLogin+","+userinfo.getUsername();
}
cookieValue=URLEncoder.encode(cookieValue,"UTF-8");//处理中文乱码的问题  
//当系统中存在当前cookie，再次new时会自动覆盖客户端的cookie。若没有则新建。
//这样子可以保证cookie的有效期（若连续登录，Cookie的有效期永远为30天，若30天没有登录，则cookie自动过期）
Cookie cookie = new Cookie(this.getUserName(),cookieValue);//将密码信息、“记住密码”、“自动登录”的状态添加到cookie中
cookie.setMaxAge(Integer.parseInt(WebAppConfig.app("cookidMaxInactiveInterval")));//设置生命周期:目前设置的时间为一个月
response.addCookie(cookie);//添加到response中使之生效
//将其他cookie标记为非最后一次登录
Cookie[] cookies =request.getCookies();//获取所有的cookie
for(Cookie c:cookies){
	if(!c.getName().equalsIgnoreCase("JSESSIONID") && c.getName().compareTo(this.getUserName())!=0){//说明是其他用户
		String value=c.getValue();//获取当前cookie的value值
		value = URLDecoder.decode(value,"UTF-8");
		String[] info=value.split(",");//截取每段数据
		if(info.length>3){
			String cookieVal = "0,"+info[1]+","+info[2]+","+info[3]+","+info[4];//拼接cookie中的状态
			cookieVal = URLEncoder.encode(cookieVal,"UTF-8");
			c.setValue(cookieVal);//修改cookie的value值
			response.addCookie(c);//添加到response中使之生效
		}
	}
}

 

3、注销时使session失效，修改自动登录的状态，即登录时标记为“自动登录”点击注销时，将cookie中自动登录的标记修改为非自动登录：

Object userInfo = ServletActionContext.getRequest().getSession().getAttribute("userInfo");
if (userInfo!=null){
	SUser user = (SUser)userInfo;
	//1、找到当前Cookie修改自动登录状态
	Cookie[] cookies =request.getCookies();//获取所有的cookie
	for(Cookie c:cookies){
		if(c.getName().compareTo(user.getAccount())==0){//说明是当前用户
			String value=c.getValue();//获取当前cookie的value值
			value = URLDecoder.decode(value,"UTF-8");
			String[] info=value.split(",");//截取每段数据
			if(info.length>3){
				String cookieVal = "1,"+info[1]+","+info[2]+",0,"+info[4];//拼接cookie中的状态
				cookieVal = URLEncoder.encode(cookieVal,"UTF-8");
				c.setValue(cookieVal);//修改cookie的value值
				c.setMaxAge(Integer.parseInt(WebAppConfig.app("cookidMaxInactiveInterval")));//设置生命周期:目前设置的时间为一个月
				response.addCookie(c);//添加到response中使之生效
				break;//其他的不循环
			}
		}
	}
					
	//2、注销当前session
	ServletActionContext.getRequest().getSession().invalidate();
}else{
	throw new Exception("获取用户信息失败：userInfo=null");
}

 

 

4、打开系统时从cookie中获取标记信息进行登录或只是在“用户名”显示区显示最后一次登录该系统的用户名称：

//自动登录
var cookie = getLastCookieInfo();//获取登录信息
if(cookie!=null && cookie!='undefined' && cookie!=''){
	   autoLogin(cookie[0],cookie[1]);//自动登录	   
}

//获取最后一次登录该系统的用户名称进行显示
var cookie = getLastCookieInfo();
if(cookie!=null && cookie!='undefined' && cookie!=''){
	var name=cookie[1].split(",")[4];
	$("#lastLoginUser").text(name);//显示用户名
	$("#lastLoginAccount").val(cookie[0]);//保存账号
}

/**
 * 从cookie中获取最后一次登录的用户信息
 */
 function getLastCookieInfo(){
 var array = document.cookie.split(";");  
   if(array.length>0){
	   //取最后一次登录的用户信息
	   for(var i=0;i<array.length;i++){
		   var a = decodeURI(array[i]);//解码
		   a=unescape(a);//编码
		   var arr = a.replace(/"/g,"");//去掉双引号
		   var cookie = arr.split("="); 
		   if(cookie.length>0){
		   	   var sign = cookie[1].split(",")[0];//逗号分开的第一个数据是”是否为最后登录用户“的标记
			   if(sign=="1"){
				   return [cookie[0],cookie[1]];
				   break;//结束循环
			   }
		   }
	   }
   }
 }

 /**
 * 根据Cookie中的值调用AJAX进行登录
 */
function autoLogin(name,other){
if(other!=null && other!=""){
 	//0-是否为最后登录 1-密码 2-记住密码标记 3-自动登录标记
 	var val = other.split(",");
 	if(val.length>0 && val[3]=="1"){//自动登录
 		$.ajax({
 			url :"login!userLoginOrQuit.action",
 			async :false,//同步
 			type :"post",
 			dataType :"json",
 			data : {"userName":name,"password":val[1],"flag":1,"rememberPwd":val[2],"autoLogin":val[3],"time":new Date().getTime()},
 			timeout :4000,
 			error : function(C) {
 				alert(C.toString());
 			},
 			success : function(C) {
 			}
 		});
 		 		
	}
}
}

 

5、打开登录框进行登录时，自动获取账号和密码信息进行加载：

function login(){
.....
//获取账号
var account  = $("#lastLoginAccount").val();
if(!isempty(account)){
	account = jQuery.trim(account);//去除左右空格
	$("#userName").val(account);//用户名（账号）
	//根据账户获取密码、记住密码、自动登录信息
	var cookieValue = getPwdFromAccount(account);//调用getPwdFromAccount()方法获取基本信息
	if(!isempty(cookieValue)){//不为空
		//0-是否为最后一次登录用户 1-密码 2-记住密码标记 3-自动登录标记4-用户名（非账户）
		var pwdArr = cookieValue.split(",");
		if(pwdArr.length>0 && !isempty(pwdArr[1])){//密码不为空
			//密码框赋值：通过MD5加密之后的值
			$("#password").val(pwdArr[1]);	
			//记住密码
			$("#rememberPwd")[0].checked=true;//勾选记住密码
		}
				
	}
}
$("#userName").focus();//用户名文本框聚焦
}

/**
 * 根据账户获取密码、记住密码、自动登录信息
 * */
function getPwdFromAccount(account){
   var array = document.cookie.split(";");  
   if(array.length>0){
	   //取最后一次登录的用户信息
	   for(var i=0;i<array.length;i++){
		   var a = decodeURI(array[i]);//解码
		   a=unescape(a);//编码
		   var arr = a.replace(/"/g,"");//去掉双引号
		   var cookie = arr.split("="); 
		   if(cookie.length>0){
		   	   var cookieKey = jQuery.trim(cookie[0]);//账户
		   	   if(cookieKey==account){
		   	   	return cookie[1];//把基本信息传回去
		   	   }
		   }
	   }
   }
}

 

 6、非自动登录状态下，输入用户名之后，按Tab键或Enter键，自动切换到“密码框”且自动从Cookie中获取密码信息：

/*
文本框输入用户名之后，按TAB键或Enter键，自动切换到“密码框”：
onkeydown="if(event.keyCode==9 || event.keyCode==13){$('#password').focus();return false;}"//9：tab键 13：回车键
*/
/**
 * 根据用户名，从cookie中获取相应信息自动补充
 * */
function getPwd(){
	var username = $("#userName").val();
	if(!isempty(username)){//不为空
		username = jQuery.trim(username);//去除左右空格
		//根据账户获取密码、记住密码、自动登录信息
		var cookieValue = getPwdFromAccount(username);
		if(!isempty(cookieValue)){//不为空
			//0-是否为最后一次登录用户 1-密码 2-记住密码标记 3-自动登录标记4-用户名（非账户）
			var pwdArr = cookieValue.split(",");
			if(pwdArr.length>0 && !isempty(pwdArr[1])){//密码不为空
				//密码框赋值
				$("#password").val(pwdArr[1]);	
				//记住密码
				$("#rememberPwd")[0].checked=true;//勾选记住密码
			}
		}else{
			$("#password").val('');//清空密码框
			$("#rememberPwd")[0].checked=false;//勾选记住密码
		}
	}else{
		$("#loginError").empty().append("用户名不能为空");
	}
}

 

 7、公用方法isempty，用来当前值、当前变量、当前对象等是否为空：

/**
*验证js变量的值是否为空，
* true-不存在
* false-存在
* 
*/
function isempty(v){ 
switch (typeof v){ 
	case 'undefined' : return true;
	case 'string' : if(jQuery.trim(v).length == 0) return true; break; 
	case 'boolean' : if(!v) return true; break; 
	case 'number' : if(0 === v) return true; break; 
	case 'object' : 
	if(null === v) return true; 
	if(undefined !== v.length && v.length==0) return true; 
	for(var k in v){return false;} return true; 
	break; 
} 
return false; 
}