前后端一起用cookie来保存密码

1、前端实现

①添加一个表单标签:

<label for="remFlag">
    		<input name="remFlag" type="checkbox" id="remFlag" onclick="remember();">
                  	记住密码 
</label>

②js中需要添加:

<script type="text/javascript">
			$(document).ready(function(){
		        //记住密码功能
		        var str = getCookie("loginInfo");
		        str = str.substring(1,str.length-1);
		        var username = str.split(",")[0];
		        var password = str.split(",")[1];
		        console.log(username + '666' + password);
		        //自动填充用户名和密码
		        $("#userName").val(username);
		        $("#userPwd").val(password);
		});
		
		//获取cookie
		function getCookie(cname) {
		    var name = cname + "=";
		    var ca = document.cookie.split(';');
		    for(var i=0; i<ca.length; i++) {
		        var c = ca[i];
		        while (c.charAt(0)==' ') c = c.substring(1);
		        if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
		    }
		    return "";
		}
		
		//记住密码功能
		function remember(){
		    var remFlag = $("input[type='checkbox']").is(':checked');
		    if(remFlag==true){ //如果选中设置remFlag为1
		        //cookie存用户名和密码,回显的是真实的用户名和密码,存在安全问题.
		        var conFlag = confirm("记录密码功能不宜在公共场所(如网吧等)使用,以防密码泄露.您确定要使用此功能吗?");
		        if(conFlag){ //确认标志
		            $("#remFlag").val("1");
		        }else{
		            $("input[type='checkbox']").removeAttr('checked');
		            $("#remFlag").val("");
		        }
		    }else{ //如果没选中设置remFlag为""
		        $("#remFlag").val("");
		    }
		}

2、java后端实现

/**
* 判断登录 post
*/
@RequestMapping(value = “/login”, method = RequestMethod.POST)
public String login(@RequestParam(value = “userName”, required = false) String userName,
@RequestParam(value = “userPwd”, required = false) String userPwd,
HttpSession session,
HttpServletRequest req, HttpServletResponse resp) {

    //412错误
    //也可以直接清除响应的头部缓存,还可以直接在xml里配置跳转页面
    resp.setHeader( "Cache-Control" , "no-store" );   //no-cache不行,还是会缓存
    resp.setDateHeader( "Expires" , 0);
    resp.setHeader( "Pragma" , "no-cache" );


    System.out.println("用户IP地址" + req.getRemoteAddr());
    NewsUser nu = new NewsUser();
    nu.setUserName(userName);
    nu.setPassword(userPwd);

    NewsUser newsUser;
    newsUser = nus.login(nu);

    if (null != newsUser) {
        System.out.println(null != newsUser);
        session.setAttribute("newsUser", newsUser);

        //记住用户名、密码功能(注意:cookie存放密码会存在安全隐患)
        String remFlag = req.getParameter("remFlag");
        if ("1".equals(remFlag)) { //"1"表示用户勾选记住密码

            String loginInfo = userName + "," + userPwd;
            Cookie userCookie = new Cookie("loginInfo", loginInfo);

            userCookie.setMaxAge(30 * 24 * 60 * 60);   //存活期为一个月 30*24*60*60
            userCookie.setPath("/");
            resp.addCookie(userCookie);
        }

        System.out.println(newsUser.getUserName());
        return "admin/main";
    } else {
        session.setAttribute("msg", "用户名或密码错误");
        return "redirect:/login.html";
    }
}

3、这样的话基本就配置完成了

4、注意事项

使用时,需要保证用户名和密码都有 id属性

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卧虎3

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值