利用cookie实现记住密码
思路分析:要实现该功能,首先要了解cookie的工作原理,这里就不过多赘述。
1、用户第一次登陆,勾选了记住密码后,需要将该用户的账号和密码放到cookie中。
2、用户第二次登录时,需要从cookie中取出账号和密码放到input输入框中。
3、用户第二次登陆时如果没有勾选记住密码,则需要将cookie中的记录清除,并在登陆时清 除input中的内容。
代码实现:我所采用的是vue+springboot框架。后台负责cookie的存储和清除,vue负责展示用户信息。
后台主要代码:
//记住密码
String checked = request.getParameter("checked");
Cookie nameCookie = new Cookie("uname",user.getLoginName());
Cookie psCookie = new Cookie("password",user.getPassword());
nameCookie.setPath(request.getContextPath()+"/");
psCookie.setPath(request.getContextPath()+"/");
if ("true".equals(checked)) {
nameCookie.setMaxAge(7*24*60*60);
psCookie.setMaxAge(7*24*60*60);
response.addCookie(nameCookie);
response.addCookie(psCookie);
}else {
nameCookie.setMaxAge(0);
response.addCookie(nameCookie);
psCookie.setMaxAge(0);
response.addCookie(psCookie);
}
以上代码中的checked代表记住密码复选框的状态,选中时为true,需要对用户的账号和密码进行缓存处理。未选中为false,需要清除cookie中的内容,注意清除cookie时只需要将cookie的有效时长设置为0,设置路径和内容为null会导致清除cookie失败。
前端js主要代码:
handleSelectChange () {
console.log(document.cookie)
var arrCookie = document.cookie.split(';')
for (var i = 0; i < arrCookie.length; i++) {
var arr = arrCookie[i].trim().split('=')
if (arr[0] === 'uname') {
var username = arr[1]
}
if (arr[0] === 'password') {
var passWord = arr[1]
}
}
setTimeout(() => {
this.form.setFieldsValue({
loginName: username,
password: passWord
})
}, 0)
}
这里只是展示如何将cookie中的内容取出并存放到input输入框中,因为所选用的前端技术不同,代码上会有出入,但大致思想一致。