使用Cookie實現記住密碼,並且密碼加密

Cookie實現記住密碼

做項目的時候,會有登錄功能,就會有一個記住我的功能,我們常常選擇使用Cookie來存信息。

爲什麼用Cookie呢?
1.HTTP協議是無狀態的,服務器無法記錄用戶上一次的操作,這樣就造成了交互上的阻礙。而Cookie就可以做到繞開HTTP的無狀態。服務器藉由從Cookie中讀取包含的信息,藉以維護用戶和服務器會話中的狀態。
2.Cookie緩存的信息是存到你的硬盤上的,而且你電腦關機也不會造成數據的丟失,最重要的是,你可以設置Cookie的保存時間,從建立Cookie開始,經過這麼久,它就會銷燬.

  1. 登錄的界面代碼 login.html
<div class="form_input clearfix">
	<form>
		<ul>
			<li>
				<input type="text" name="nickname" class="name_input" id="nickname" placeholder="請輸入用戶名" id="nickname">
			</li>
			<li>
				<input type="password" name="pwd" class="pwd_input" id="pwd" placeholder="請輸入密碼" id="pwd">
			</li>
			<li>
				<div class="more_input clearfix">
					<input type="checkbox" checked id="remember">
					<label for="remember" >記住我</label>
				</div>
			</li>
			<li>
			<input type="button" value="登錄" class="submit_input" onclick = "login()">
			</li>
		</ul>
	</form>
</div>
  1. login.js:判斷是否要存cookie,使用MD5對密碼進行加密。使用md5加密解密需要用到兩個js文件.md5加密解密js文件
    分兩步:
    (1)點擊登錄的時候判斷用戶是否勾選了記住我複選框,如果選中傳一個判斷值交給後臺處理。
    (2)每次進入到login.html頁面,一進入頁面之前就要判斷,是否有cookie數據,有的話,就取出來。
//模擬登陸
function login(){
	//獲取用戶名
	var nickname = $("#nickname").val();
	//獲取密碼
	var pwd = $("#pwd").val();
	
	//傳過去一個MD5加密過的密碼  便於存cookie
	var md5pwd=$.base64.btoa(encodeURIComponent(pwd));

	//判斷是否要使用記住密碼和用戶名
	var flag=0;
	if($("#remember").prop("checked") ){//選擇了記住我
		flag=1;
	}
	
	//發送請求 登錄
	$.post("member/login",{nickName:nickname,pwd:pwd,flag:flag,md:md5pwd},function(data){
		data=parseInt($.trim(data));
		if(data>0){//登錄成功
			//跳轉轉網頁
			location.href = "member/index";	
		}else{
			alert("用戶名或密碼錯誤");
			location.href = "login.html";
		}
	},"text")	
}

//每次一進入到login.html都要進行判斷是否有cookie
$(function(){
	//取cookie	
	var str=document.cookie;
	
	var pwd=str.split(";")[0].split("-")[1];
	
	var pwd = decodeURIComponent($.base64.atob(pwd));//解密
	
	$("#nickname").val(str.split(";")[0].split("=")[1].split("-")[0]);
	$("#pwd").val(pwd);
})
  1. 後臺存cookie的處理代碼:MemberInfoController.java
@Controller
@RequestMapping("/member")
public class MemberInfoController{
	
	@Autowired
	private IMemberInfoBiz memberInfoBiz;
	
	@RequestMapping("/login")
	@ResponseBody
	public int Login(@RequestParam Map<String,Object> map,HttpSession session,HttpServletResponse response) throws UnsupportedEncodingException, NoSuchAlgorithmException{
		int result=-1;
		MemberInfo member=memberInfoBiz.login(map);
		
		if(member!=null){//登陸成功
			// 判斷是否要存cookie
			if("1".equals(map.get("flag"))){//說明勾選了記住我
				//獲取到用戶名和密碼
				String loginInfo=map.get("nickName")+"-"+map.get("md");
				//實例化Cookie對象
				Cookie userCookie = new Cookie("LoginInfo",loginInfo);
				//設置編碼集
				URLEncoder.encode(loginInfo,"utf-8");
			
				//設置cookie的生命週期   7天
				userCookie.setMaxAge(60*60*24*7);
				
				userCookie.setPath("/");
					
				response.addCookie(userCookie);
			}
			result=1;
		}
			
		return result;
	}
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章