最近弄了一下关于记住密码、自动登录的东西,这里记录一下主要的代码,以备不时之需。页面布局和一些次要的代码就不贴了,直接要主要的。
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键,自动切换到“密码框”: οnkeydοwn="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; }