前后端一起用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属性

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
前后端分离的架构中使用Spring Security,需要进行以下几个步骤: 1. 前端登录页面:前端需要提供一个登录页面,用于用户输入用户名和密码。这个页面可以是一个简单的HTML表单或者使用前端框架(如React、Vue)进行构建。 2. 前端登录请求:前端需要发送登录请求,将用户输入的用户名和密码发送给后端。这个请求可以是一个POST请求,将用户凭证(如用户名和密码)以JSON格式发送给后端。 3. 后端验证登录信息:后端需要接收前端发送的登录请求,并使用Spring Security对用户的凭证进行验证。可以通过自定义实现`UserDetailsService`接口来提供用户信息,并通过`AuthenticationManager`进行认证。 4. 后端生成Token:如果登录信息验证成功,后端可以生成一个Token,并返回给前端。这个Token可以使用JWT(JSON Web Token)或者其他类似的机制进行生成。 5. 前端保存Token:前端需要将后端返回的Token保存起来,一般通过将Token存储在浏览器的LocalStorage或者Cookie中。 6. 后续请求携带Token:在后续的请求中,前端需要将保存的Token携带在请求的Header中,一般使用`Authorization`字段,值为`Bearer <Token>`。 7. 后端验证Token:后端在接收到前端的请求后,需要验证请求中携带的Token的有效性。可以通过编写一个自定义的Spring Security过滤器来实现Token的验证。 8. 权限控制:使用Spring Security的权限控制机制,可以对不同的URL进行权限配置,并通过注解或者配置的方式限制用户访问某些资源。 通过以上步骤,就可以在前后端分离的架构中使用Spring Security进行用户认证和权限控制。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

卧虎3

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

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

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

打赏作者

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

抵扣说明:

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

余额充值