cookie理解与实践【实现简单登录以及自动登录功能】

cookie理解

Cookie是由W3C组织提出，最早由netscape社区发展的一种机制

• http是无状态协议。当某次连接中数据提交完，连接会关闭，再次访问时，浏览器与服务器需要重新建立新的连接；
• cookie相当于浏览器访问服务器的通行证，服务器可以通过通行证确认用户信息。

cookie实践

下面使用cookie实现一个简易的自动登录功能：在登录页index.jsp中登录之后，重启浏览器后直接访问用户主页home.jsp会实现自动登录；登录条件未满足时（cookie过期），从home.jsp重定向至登录页index.jsp。

登录接口

• servlet

package com.leida;

import javax.servlet.http.*;
import java.io.IOException;
import java.util.Date;

public class Servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        String userName = request.getParameter("userName");
        String userPassword = request.getParameter("userPassword");

        HttpSession session=request.getSession();
        //暂且省略查找数据库的过程，直接验证
        if(userName.equals("leida")&&userPassword.equals("123456")){

            //设置cookie
            Cookie cookie = new Cookie("verifyInfo",userName+"_"+userPassword);
            cookie.setMaxAge(60);
            response.addCookie(cookie);

            response.setContentType("text/html;charset=utf-8");
            response.getWriter().write("当前的系统时间是："+new Date()+";登录成功,3秒后自动跳转"+session.getId());
            //等待三秒后自动重定向到用户主页
            response.setHeader("Refresh","3;URL=home.jsp");
        }
        //response.setContentType("text/html;charset=utf-8");
        //response.getWriter().write("当前的系统时间是："+new Date());
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws javax.servlet.ServletException, IOException {

    }
}

前端

使用简单的表单

<form class="layui-form" action="/ServletDemo/login" id="form" method="post">
        <div class="layui-form-item">
          <label class="layui-form-label">用户名</label>
          <div class="layui-input-block">
            <input type="text" name="userName" lay-verify="title" autocomplete="off" placeholder="请输入用户名" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">密码</label>
          <div class="layui-input-block">
            <input type="password" name="userPassword" lay-verify="pass" autocomplete="off" placeholder="请输入密码" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
          <button type="submit" class="layui-btn" id="login" >登录</button>
        </div>
      </form>

自动登录

• 过程：直接访问home.jsp时进行身份验证；
• 思路：验证cookie信息，若用户名密码没有或者错误，则跳至index.jsp登录页，若验证通过，则自动登录；
• servlet如下

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Cookie[] cookies=request.getCookies();
        boolean flag=false;
        System.out.println(cookies.length);
        for(int i=0;cookies!=null&&i<cookies.length;++i){
            if(cookies[i].getName().equals("verifyInfo")){
                String[] verifyInfo=cookies[i].getValue().split("_");
                if(verifyInfo[0].equals("leida")&&verifyInfo[1].equals("123456")){
                    flag=true;
                    break;
                }
            }
        }
        System.out.println(flag);
        if(flag==false){
        //告诉客户端需要重定向
            response.setHeader("REDIRECT", "true");
            //给出重定向的路径
            response.setHeader("location","index.jsp");
        }

• 前端

正规做法应该是使用springMVC的拦截器。此处在前端使用ajax模拟身份验证和重定向这两个过程。

 $(function(){
        $.ajax({
            type:"get",
            url:"http://localhost:8080/ServletDemo/verifyLogin",
            complete:function(jqxhr){
                if("true" == jqxhr.getResponseHeader("REDIRECT")){ //若HEADER中含有REDIRECT说明后端想重定向，
                    var win = window;
                    while(win != win.top){
                        win = win.top;
                    }
                    win.location.href = jqxhr.getResponseHeader("location");//将后端重定向的地址取出来,使用win.location.href去实现重定向的要求
                }
            }
        })
    });