个人中心项目--登录记住我功能

在完成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中获取到用户信息了。网上查了许多，也尝试了，但结果不太行，还是等系统学习完这部分内容再加入项目中吧，当然，我复制了一份工程，等之后来操作…毕竟长风破浪会有时…