Spring Boot项目登陆页面记住密码功能——Cookie

红太狼 2022-11-07 11:32 256阅读 0赞

## 一、Cookie 的简介 ##

Cookie，一种储存在用户本地终端上的数据，有时也用其复数形式 Cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行 Session 跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息。

其实 Cookie 就是一个键和一个值构成的，随着服务器端的响应发送给客户端浏览器。然后客户端浏览器会把 Cookie 保存起来，当下一次再访问服务器时把 Cookie 再发送给服务器。

*  1、Cookie 是 HTTP 协议的规范之一，它是服务器和客户端之间传输的小数据
 *  2、首先由服务器通过响应头把 Cookie 传输给客户端，客户端会将 Cookie 保存起来
 *  3、当客户端再次请求同一服务器时，客户端会在请求头中添加该服务器保存的 Cookie，发送给服务器
 *  4、Cookie 就是服务器保存在客户端的数据
 *  5、Cookie 就是一个键值对

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MzU3Mw_size_16_color_FFFFFF_t_70_pic_center]

## 二、使用步骤 ##

#### 1、创建 Cookie ####

// Cookie 为键值对数据格式
    Cookie cookie_username = new Cookie("cookie_username", username);

#### 2、设置 Cookie 持久时间 ####

// 即：过期时间，单位是：秒（s）
    cookie_username.setMaxAge(30 * 24 * 60 * 60);

#### 3、设置 Cookie 共享路径 ####

// 表示当前项目下都携带这个cookie
    cookie_username.setPath(request.getContextPath());

#### 4、向客户端发送 Cookie ####

// 使用 HttpServletResponse 对象向客户端发送 Cookie
    response.addCookie(cookie_username);

#### 5、销毁 Cookie ####

// 根据 key 将 value 置空
    Cookie cookie_username = new Cookie("cookie_username", "");
    // 设置持久时间为0
    cookie_username.setMaxAge(0);
    // 设置共享路径
    cookie_username.setPath(request.getContextPath());
    // 向客户端发送 Cookie
    response.addCookie(cookie_username);

## 三、案例分析 ##

上面我们已经了解了 Cookie 是什么，并且知道了 Cookie 的创建以及销毁的方法，下面，我们就使用 Cookie 实现记住登录状态的功能，整个项目基于 SpringBoot 实现

温馨提示：注重Cookie部分代码即可，其他实体类等那些根据你自己的去弄。

**bean层：**

package com.example.business.bean;
    
    import java.io.Serializable;
    
    /** * tp_user * @author */
    public class TpUserBean implements Serializable { 
        private Integer id;
    
        private String appId;
    
        private String userid;
    
        private String username;
    
        private String password;
    
        /** * 组ID */
        private Short role;
    
        /** * 状态 1:启用 0:禁止 */
        private Boolean status;
    
        /** * 备注说明 */
        private String remark;
    
        /** * 最后登录时间 */
        private Long lastLoginTime;
    
        /** * 最后登录IP */
        private String lastLoginIp;
    
        /** * 最后登录位置 */
        private String lastLocation;
    
        private String sessionid;
    
        private static final long serialVersionUID = 1L;
    
        public Integer getId() { 
            return id;
        }
    
        public void setId(Integer id) { 
            this.id = id;
        }
    
        public String getAppId() { 
            return appId;
        }
    
        public void setAppId(String appId) { 
            this.appId = appId;
        }
    
        public String getUserid() { 
            return userid;
        }
    
        public void setUserid(String userid) { 
            this.userid = userid;
        }
    
        public String getUsername() { 
            return username;
        }
    
        public void setUsername(String username) { 
            this.username = username;
        }
    
        public String getPassword() { 
            return password;
        }
    
        public void setPassword(String password) { 
            this.password = password;
        }
    
        public Short getRole() { 
            return role;
        }
    
        public void setRole(Short role) { 
            this.role = role;
        }
    
        public Boolean getStatus() { 
            return status;
        }
    
        public void setStatus(Boolean status) { 
            this.status = status;
        }
    
        public String getRemark() { 
            return remark;
        }
    
        public void setRemark(String remark) { 
            this.remark = remark;
        }
    
        public Long getLastLoginTime() { 
            return lastLoginTime;
        }
    
        public void setLastLoginTime(Long lastLoginTime) { 
            this.lastLoginTime = lastLoginTime;
        }
    
        public String getLastLoginIp() { 
            return lastLoginIp;
        }
    
        public void setLastLoginIp(String lastLoginIp) { 
            this.lastLoginIp = lastLoginIp;
        }
    
        public String getLastLocation() { 
            return lastLocation;
        }
    
        public void setLastLocation(String lastLocation) { 
            this.lastLocation = lastLocation;
        }
    
        public String getSessionid() { 
            return sessionid;
        }
    
        public void setSessionid(String sessionid) { 
            this.sessionid = sessionid;
        }
    
        @Override
        public boolean equals(Object that) { 
            if (this == that) { 
                return true;
            }
            if (that == null) { 
                return false;
            }
            if (getClass() != that.getClass()) { 
                return false;
            }
            TpUserBean other = (TpUserBean) that;
            return (this.getId() == null ? other.getId() == null : this.getId().equals(other.getId()))
                && (this.getAppId() == null ? other.getAppId() == null : this.getAppId().equals(other.getAppId()))
                && (this.getUserid() == null ? other.getUserid() == null : this.getUserid().equals(other.getUserid()))
                && (this.getUsername() == null ? other.getUsername() == null : this.getUsername().equals(other.getUsername()))
                && (this.getPassword() == null ? other.getPassword() == null : this.getPassword().equals(other.getPassword()))
                && (this.getRole() == null ? other.getRole() == null : this.getRole().equals(other.getRole()))
                && (this.getStatus() == null ? other.getStatus() == null : this.getStatus().equals(other.getStatus()))
                && (this.getRemark() == null ? other.getRemark() == null : this.getRemark().equals(other.getRemark()))
                && (this.getLastLoginTime() == null ? other.getLastLoginTime() == null : this.getLastLoginTime().equals(other.getLastLoginTime()))
                && (this.getLastLoginIp() == null ? other.getLastLoginIp() == null : this.getLastLoginIp().equals(other.getLastLoginIp()))
                && (this.getLastLocation() == null ? other.getLastLocation() == null : this.getLastLocation().equals(other.getLastLocation()))
                && (this.getSessionid() == null ? other.getSessionid() == null : this.getSessionid().equals(other.getSessionid()));
        }
    
        @Override
        public int hashCode() { 
            final int prime = 31;
            int result = 1;
            result = prime * result + ((getId() == null) ? 0 : getId().hashCode());
            result = prime * result + ((getAppId() == null) ? 0 : getAppId().hashCode());
            result = prime * result + ((getUserid() == null) ? 0 : getUserid().hashCode());
            result = prime * result + ((getUsername() == null) ? 0 : getUsername().hashCode());
            result = prime * result + ((getPassword() == null) ? 0 : getPassword().hashCode());
            result = prime * result + ((getRole() == null) ? 0 : getRole().hashCode());
            result = prime * result + ((getStatus() == null) ? 0 : getStatus().hashCode());
            result = prime * result + ((getRemark() == null) ? 0 : getRemark().hashCode());
            result = prime * result + ((getLastLoginTime() == null) ? 0 : getLastLoginTime().hashCode());
            result = prime * result + ((getLastLoginIp() == null) ? 0 : getLastLoginIp().hashCode());
            result = prime * result + ((getLastLocation() == null) ? 0 : getLastLocation().hashCode());
            result = prime * result + ((getSessionid() == null) ? 0 : getSessionid().hashCode());
            return result;
        }
    
        @Override
        public String toString() { 
            StringBuilder sb = new StringBuilder();
            sb.append(getClass().getSimpleName());
            sb.append(" [");
            sb.append("Hash = ").append(hashCode());
            sb.append(", id=").append(id);
            sb.append(", appId=").append(appId);
            sb.append(", userid=").append(userid);
            sb.append(", username=").append(username);
            sb.append(", password=").append(password);
            sb.append(", role=").append(role);
            sb.append(", status=").append(status);
            sb.append(", remark=").append(remark);
            sb.append(", lastLoginTime=").append(lastLoginTime);
            sb.append(", lastLoginIp=").append(lastLoginIp);
            sb.append(", lastLocation=").append(lastLocation);
            sb.append(", sessionid=").append(sessionid);
            sb.append(", serialVersionUID=").append(serialVersionUID);
            sb.append("]");
            return sb.toString();
        }
    }

**mapper层：**

package com.example.business.mapper;
    
    import com.example.business.bean.TpUserBean;
    import org.apache.ibatis.annotations.Param;
    import org.springframework.stereotype.Repository;
    
    /** * TpUserMapper继承基类 */
    @Repository
    public interface TpUserMapper extends MyBatisBaseDao<TpUserBean, Integer> { 
    
        /** * 查询用户登录信息 * * @param userName 用户名 * @return */
        public TpUserBean selectUserNameAndPassword(@Param("userName") String userName);
    }

**controller层：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MzU3Mw_size_16_color_FFFFFF_t_70_pic_center 1]

**html：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <link rel="stylesheet" href="layui/css/layui.css" type="text/css"></link>
    <style> * { padding: 0; margin: 0; } body { background-color: #ccc; background-size: 100% 100%; } .layui-container { width: 100%; } .layui-row { text-align: center; } .layui-row h1 { color: black; margin-top: 3%; font-size: 100px; font-family: FZShuTi; } .layui-form { background: white; padding: 12% 12% 12% 0; } #forget_passward { cursor: pointer; float: right; line-height: 36px; color: #666; } </style>
    
    <body>
    <div class="layui-container" onkeydown="Loginbtn()">
        <div class="layui-row">
            <h1>后 台 管 理 系 统</h1>
        </div>
        <div class="layui-row">
            <div class="layui-col-lg3 layui-col-md3 layui-col-sm3" style="margin-top: 5%;margin-left: 38%">
                <form id="formLogin" class="layui-form" action="login" onkeydown="" method="post">
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <i class="layui-icon layui-icon-username" style="font-size: 32px;"></i>
                        </label>
                        <div class="layui-input-block">
                            <input type="text" id="username" name="username" required lay-verify="required" placeholder="请输入账户" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <i class="layui-icon layui-icon-password" style="font-size: 32px;"></i>
                        </label>
                        <div class="layui-input-block">
                            <input type="password" id="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block" style="margin-left: 70px;text-align: left;">
                            <input type="checkbox" id="remember" name="remember" title="记住我" lay-skin="primary">
                            <span><a href="#" id="forget_passward">忘记密码？</a></span>
                        </div>
                    </div>
                    <div class="layui-form-item" style="padding-left: 13%;">
                        <div class="layui-btn-container">
                            <button type="button" class="layui-btn" id="btnLogin" lay-submit style="width: 100%;">登 录
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.form.js"></script>
    <script type="text/javascript" src="layui/layui.js"></script>
    
    <script> layui.use('form', function () { var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功 //登录按钮点击事件 $("#btnLogin").click(function () { var username = $("#username").val(); var password = $("#password").val(); $("#formLogin").ajaxSubmit(function (data) { if (data.code != "200") { layer.alert(data.text, { offset: '150px', icon: 2}); } else { layer.msg("登录成功！", { offset: '150px'}); setTimeout(function () { window.location.href = "toUrl?page=main&"+$("#username").val();//将用户名也传过去 }, 1000); } }); }); var cookies = document.cookie.split(';'); //获取cookie function getCookie(mkey) { for (var i = 0; i < cookies.length; i++) { var kv = cookies[i].split('='); if (kv[0].trim() == mkey) { return kv[1].trim(); } } return ''; } //获取cookie回显 window.onload = function () { var username = getCookie("cookie_username"); var password = getCookie("cookie_password"); var remember = getCookie("cookie_remember"); if (remember == '1') { $("#username").val(username); $("#password").val(password); $("#remember").prop("checked", true); form.render();//重新渲染才能显示出来 // $.each($("input[type='checkbox']"), function (i, e) { // $(e).prop("checked", true); //false为取消√，true为勾选 // form.render();//重新渲染才能显示出来 // }) } } }); //按Enter登录 function Loginbtn() { if (window.event.keyCode == 13) { document.all('btnLogin').click(); } } </script>
    
    </body>
    </html>

**interceptor（拦截器）：**

package com.example.business.interceptor;
    
    import com.example.business.bean.TpUserBean;
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.web.servlet.HandlerInterceptor;
    import org.springframework.web.servlet.ModelAndView;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.HttpSession;
    
    /** * 登录拦截器 判断用户是否登录 */
    public class LoginInterceptor implements HandlerInterceptor { 
    
        // 声明slf4j日志打印log
        private static final Logger log = LoggerFactory.getLogger(LoginInterceptor.class);
    
        @Override
        public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
                throws Exception { 
            log.info("登录拦截器执行了...");
    
            // 获取请求的url
            String url = request.getRequestURI();
            // 判断url是否是公开地址(实际使用时将公开地址配置在配置文件中)
            // 这里公开地址是登录提交的地址和验证码是公开地址
            if (url.indexOf("toLogin") >= 0 || url.indexOf("validateCode") >= 0 || url.indexOf("login") >= 0
                    || url.indexOf("app") >= 0 || url.indexOf("css") >= 0 || url.indexOf("images") >= 0
                    || url.indexOf("js") >= 0 || url.indexOf("layui") >= 0) { 
                log.info("公开地址" + url.toString() + "，放行");
                return true;
            }
            HttpSession session = request.getSession();
            // 从session取出用户信息
            TpUserBean tpUserBean = (TpUserBean) session.getAttribute("user");
            // 验证是否存在用户信息，存在即放行
            if (tpUserBean != null) { 
                log.info("存在用户信息，放行");
                return true;
            }
            // 执行到这里表示用户身份需要认证，跳转登录页面
            log.info("用户信息不存在，用户未登录，身份验证失败！即将跳转跳转登录界面！！！");
            request.getRequestDispatcher("toLogin").forward(request, response);
            return false;
        }
    
        @Override
        public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
                               ModelAndView modelAndView) throws Exception { 
    
        }
    
        @Override
        public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex)
                throws Exception { 
    
        }
    
    }

**WebMvcConfigurer 配置拦截：**

package com.example.business.config;
    
    import com.example.business.interceptor.LoginInterceptor;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.InterceptorRegistration;
    import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    @Configuration
    public class LoginConfig implements WebMvcConfigurer { 
    
        @Override
        public void addInterceptors(InterceptorRegistry registry) { 
            //注册TestInterceptor拦截器
            InterceptorRegistration registration = registry.addInterceptor(new LoginInterceptor());
            registration.addPathPatterns("/**");                      //所有路径都被拦截
            registration.excludePathPatterns(                         //添加不拦截路径
                                             "toLogin",            //登录
                                             ".html",            //html静态资源
                                             ".js",              //js静态资源
                                             ".css"             //css静态资源
                                             );
        }
    }

## 四、总结 ##

以上就是 SpringBoot 中使用 Cookie 实现记住登录功能，在项目中还算是比较实用的功能，希望能对正在阅读的你一点点帮助和启发

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MzU3Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221023/00013efa26784ce1bd01d2e306dea0a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MzU3Mw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221023/252283396a1f45e7a4633312ea14c29d.png