当前位置:首页 > 开发 > Web前端 > 前端 > 正文

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

发表于: 2015-04-24   作者:wjiaoling136   来源:转载   浏览:
摘要: 最近弄了一下关于记住密码、自动登录的东西,这里记录一下主要的代码,以备不时之需。页面布局和一些次要的代码就不贴了,直接要主要的。   1、点击“记住密码”、“自动登录”复选框时触发的事件: /** *点击“记住密码”复选框时触发事件 */ function rememberPwd(obj){ var isChecked = $(obj)[0].checked; //

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

 

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; 
}

 

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

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
很多门户网站都提供了记住密码功能,虽然现在的浏览器都已经提供了相应的记住密码功能 效果就是你每
上网时浏览器会有历史记录,登录某个网站时会有记住密码,这些历史记录和密码其实都是留在电脑的coo
毕业刚开始上班接触的第一个项目移动护士站,接到了第一任务就是登录,要用到自动登录功能,所以在
http://blog.csdn.net/liuyiming_/article/details/7704923 SharedPreferences介绍: SharedPrefere
最近Android项目需要一个自动登录功能,完成之后,特总结一下,此功能依靠SharedPreferences进行实
【声明】 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来
【什么是cookie】 “cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个
如题,大家在使用各种网站时,为了更好的用户体验,网站往往会提供这两种功能之一,以便下次登录方
先来看一个ssh大概流程图,虽然感觉可能有点儿细节不正确,感觉大致还是正确的: 想要使用ssh远程自
【什么是cookie】 “cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号