在完成controller中登陆认证方法后,记住我功能其实只是在html页面增加两个操作cookie的函数就可以实现了,很简单:
代码流程:
1.首先我们query.cookie.js来操作cookie,所以需要先去下载一下。这里也可下载:
链接:https://pan.baidu.com/s/1KB5L5c-RHqZaFSTIa4LGTg
提取码:9nbw
2.先来看页面登录表单:
<form class="form-horizontal mt-3 form-material" id="loginform" th:action="@{/manager/loginPage}" method="post">
<div class="form-group mb-3">
<div class="">
<input class="form-control" th:id="username" th:name="username" type="text" required="" placeholder="用户名">
</div>
</div>
<div class="form-group mb-4">
<div class="">
<input class="form-control" th:id="password" th:name="password" type="password" required="" placeholder="密码">
</div>
</div>
<div class="form-group">
<div class="d-flex">
<div class="checkbox checkbox-info pt-0">
<input id="checkbox-signup" th:name="rememberme" type="checkbox" class="material-inputs chk-col-indigo">
<label for="checkbox-signup"> 记住我... </label>
</div>
<div class="ml-auto">
<a href="javascript:void(0)" id="to-recover" class="text-muted float-right"><i class="fa fa-lock mr-1"></i> Forgot pwd?</a>
</div>
</div>
</div>
<div class="form-group text-center mt-4">
<div class="col-xs-12">
<button class="btn btn-info btn-lg btn-block text-uppercase waves-effect waves-light" type="submit" onclick="Save()">登 录</button>
</div>
</div>
</form>
用户名密码以及记住我,是cookie需要记录的三个数据。根据记住我CheckBox的选择状态来判断cookie是否需要记录用户名和密码。
3.save函数来实现记住我功能:
//记住用户名密码
function Save() {
if ($("#checkbox-signup").get(0).checked) {
var sub_username = $("#username").val();//用户名
var sub_password = $("#password").val();//密码
$.cookie("rmbMe", "true", { expires: 7 }); //设置cookie存活期限
$.cookie("username", sub_username, { expires: 7 });
$.cookie("password", sub_password, { expires: 7 });
}
else {
$.cookie("rmbMe", "false", { expire: -1 });
$.cookie("username", "", { expires: -1 });
$.cookie("password", "", { expires: -1 });
}
};
window.onload=function(){
if ($.cookie("rmbMe") == "true") {
$("#checkbox-signup").attr("checked", true);
$("#username").val($.cookie("username"));
$("#password").val($.cookie("password"));
}
}
当点击登录按钮时,提交表单的同时,执行save方法,save方法首先根据CheckBox的选中状态来判断是否添加cookie值。当为选中状态下,首先获取输入框中的用户名和密码,然后分别存到各自cookie的值中,CheckBox的cookie将记录下选中状态,当window.onload登录页面再次加载时,checkbox的状态任然为选中,用户名密码自动加入到输入框中。
点击登录后,在浏览器中可以看到新增的cookie:
退出之后,checkbox任然为选中,用户名密码自动填入输入框:
当下次不想选中记住我时,在登陆前将CheckBox设置为未选中状态,在登陆后,因为save方法中,CheckBox为unchecked,那么点击登录之后,cookie存活设置为负值,cookie将被删除。在次登陆时,表单为空:
存在的问题:
很明显,密码在cookie中明文存储,就是很大的问题,之后在针对这块修改吧…
批注:
不积跬步无以至千里,继续为这个项目加一点小功能------登录界面的记住我功能,刚开始尝试着项目引入springsecurity来实现记住我等功能,毕竟springsecurity提供了简单的流程操作便可以实现很强大的功能。但是…奈何springsecurity刚刚入门,操作了半天,虽然认证和记住我功能很快就实现了,而且将数据库密码也改成了加密存储,很安全,但是出现了另外的问题,那就是之前在登录时,查询数据库收集用户一些信息并将其直接放在session中,在登陆成功跳转到主界面时便可以在主界面显示一些用户信息。但是换做springsecurity后,认证完成后想要获取更多的用户信息,比如主界面要显示的用户头像,邮箱等等的信息,需要自己扩展userdetail对象,将用户头像、邮箱等信息加进去。然后自定义验证方法,在验证完成后,将对应的这些信息同时从数据库获取到,并设置到这个userdetail中,同时将包好了userdetail的authorication对象放入session中,这样便可以直接从session中获取到用户信息了。网上查了许多,也尝试了,但结果不太行,还是等系统学习完这部分内容再加入项目中吧,当然,我复制了一份工程,等之后来操作…毕竟长风破浪会有时…