基于Cookie的记住密码功能

利用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输入框中，因为所选用的前端技术不同，代码上会有出入，但大致思想一致。