当前位置: 首页 > news >正文

通过Cookie和Session来实现网站中登录账号的功能

文章目录

  • 一、Cookie和Session
  • 二、基于Cookie和Session实现登录账号的功能
    • 2.1步骤一
    • 2.2步骤二
    • 2.3步骤三
    • 2.4总结通过Cookie和Session来实现登录功能
    • 2.5运行截图

一、Cookie和Session

cookie是http请求header中的一个属性,是浏览器持久化存储数据的一种机制,因为网页无法直接访问浏览器所在主机的文件系统,所以网页要通过向cookie中存储键值对(Cookie中的键值对是程序员自定义的)的方式来把数据存储到浏览器所在主机的硬盘中。
cookie中保存的是键值对,最终还是要把这个键值对发送回服务器,因为服务器要使用cookie中的键值对来完成一些业务逻辑。
比如客户端请求中的cookie包含个人id,服务器就会通过这个个人id在数据库中查询出来这个个人id所关联的信息。
然而每个人都有一个个人id和个人id所关联的信息。这些数据是存储在数据库中的,服务器代码执行过程中这些数据会先临时保存到某个内存结构(相当于一个哈希表)中,后续需要对这些信息进行修改时,就修改内存结构(哈希表)中的内容,然后再将修改后的信息写入数据库。
这里服务器所涉及到的内存结构(哈希表)叫“会话”(session)。

cookie是客户端存储数据的机制。
session是服务器存储数据的机制(不是持久化存储)。
在Cookie键值对中存储的用户身份标识经常会理解成sessionId(会话Id)。
服务器会存储很多的session信息(会话信息)和sessionId(会话Id),每个用户都有一个session信息以及sessionId。服务器会通过类似于哈希表这样的数据结构来存储session信息和sessionId,sessionId就是key,session信息就是value,session信息里可以存储用户自身的各种信息(session信息里也是程序员自定义的键值对)。

二、基于Cookie和Session实现登录账号的功能

2.1步骤一

浏览器发起html请求,服务器返回html登录页面,用户输入用户名和密码点击提交之后,浏览器会发送登录请求。

用前端代码写登录页面,通过from表单来构造post请求,用户在方框中输入用户名和密码点击登录后,前端就会向服务器发起一个post请求,用户输入的用户名和密码就会成为post请求的url中query string里的两个键值对,这时这个post请求的body格式就会自动设置成Content-Type: application/x-www-form-urlencoded这样的格式,而不需要我们手动设置。from表单也可以构造get请求,而这里不用get请求是因为get请求会把用户的用户名和密码显示到浏览器地址栏里,所以用GET请求不太好。

从上面可以看出客户端发送的请求是post请求,body类型为Content-Type: application/x-www-form-urlencoded。这是前后端交互时要约定好的。

以下为登录页面的前端代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登陆</title>
</head>
<body>
<!-- 使用 form 表单, 实现登陆效果 -->
<form action="login" method="post"><input type="text" name="username"><input type="text" name="password"><input type="submit" value="登陆">
</form>
</body>
</html>

2.2步骤二

服务器通过一个Servlet处理上述登录请求,即通过一个Servlet读取用户名和密码并且验证是否登录成功。如果登录成功就给当前用户创建一个session信息(会话信息)和sessionId(会话Id),然后Servlet把这个sessionId和session信息保存到服务器的哈希表中,并且Servlet把sessionId设置到重定向响应中传回给浏览器(即在重定向响应头中加上Set-Cookie字段),然后浏览器通过Cookie里面的键值对来保存sessionId的值(sessionId=……),然后sessionId的值就被保存到浏览器本地中了。
服务器的Servlet代码如下:

@WebServlet("/login")
public class LoginServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String username = req.getParameter("username");String password = req.getParameter("password");if(!"lingliang".equals(username) || !"123".equals(password)) {resp.setContentType("text/html; charset=utf8");resp.getWriter().write("用户名或密码错误");return;}HttpSession session = req.getSession(true);session.setAttribute("username", username);session.setAttribute("loginTime", System.currentTimeMillis());resp.sendRedirect("index");}
}

HttpSession session = req.getSession(true);这行代码会根据请求的cookie键值对中的sessionId查询服务器的哈希表来找对应的session信息对象,如果请求的cookie键值对中没有sessionId(比如首次登录的时候会没有),或者在服务器哈希表中没有查到sessionId对应的session信息对象,就会创建出一个新的session信息对象出来(如果没有sessionId的话也会创建出与session信息对象相对应的sessionId)。

然后Servlet把这个sessionId和session信息对象保存到服务器的哈希表中,并且Servlet会把sessionId设置到重定向响应中传回给浏览器(即在重定向响应头中加上Set-Cookie字段),然后浏览器通过Cookie里面的键值对来保存sessionId的值(sessionId=……),然后sessionId的值就被保存到浏览器本地中了。

getSession方法的参数设置成true则表示在服务器哈希表中找不到session信息时这个方法会创建一个新的session信息,设置成false则表示在服务器哈希表中找不到session信息时或没有sessionId时这个方法不会创建一个新的session信息而是返回null。

2.3步骤三

重定向响应会让浏览器触发一个GET请求,服务器会针对这个GET请求返回响应,即服务器通过另一个Servlet把用户数据返回给前端。然后前端再将数据显示到页面上。比如:凌亮用户登录成功后,就会显示“欢迎你,凌亮”。这相当于实现了登录成功后的页面跳转。
服务器的另一个Servlet代码如下:

@WebServlet("/index")
public class IndexServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {HttpSession session = req.getSession(false);if(session == null) {resp.setContentType("text/html; charset=utf8");resp.getWriter().write("你当前尚未登录");return;}String username = (String) session.getAttribute("username");long loginTime = (long) session.getAttribute("loginTime");resp.setContentType("text/html; charset=utf8");String respBody = "欢迎你" + username +"! 你的上次登录时间为:" + loginTime;resp.getWriter().write(respBody);}
}

HttpSession session = req.getSession(false);这行代码会根据GET请求cookie中的sessionId查询服务器中的哈希表,getSession方法的参数设置成false。前面登录时getSession方法的参数设置成true是因为我们希望当服务器哈希表中没有session信息时我们能创建出一个新的session信息,而这里是登录完了之后然后访问主页,这个时候我们是不希望创建出新的session信息的,我们需要用到的是已有的旧的session信息,这体现了一个session信息可以在多个Servlet之间共享。

前端发送登录的请求后后端查询服务器哈希表时用的sessionId和前端发送跳转页面的GET请求后后端查询服务器哈希表时用的sessionId是同一个sessionId(因为我们用的是同一个浏览器来访问登录页面和主页,所以这两次用的sessionId都来自cookie里的同一个键值对,即两次用的sessionId都一样),所以两次查询出来的是同一个session信息。

重定向响应会触发GET请求,这个GET请求的首行为GET http://127.0.0.1:8080/hello_servlet/index Http/1.1。

2.4总结通过Cookie和Session来实现登录功能

在浏览器中首次进行登录操作的时候,服务器会进行身份验证,验证通过后服务器会创建具有身份标识的会话信息(即session信息和sessionId)并将其保存到服务器哈希表中,然后通过响应将sessionId返回给客户端。客户端也会用Cookie中的键值对来保存身份标识sessionId(sessionId=……)。后续浏览器访问这个网站的其它页面(即非登录页面)时,请求中Cookie中的键值对都会带有sessionId(sessionId=……),这时服务器就不需要让用户重新登录也能识别出用户的身份信息了(即自动登录)。自动登录相当于用户进入网站时是已登录状态,这个已登录状态通常是有过期时间的,可以给Cookie设置过期时间,一定时间之后浏览器会自动把Cookie删除掉;也可以给Session信息设置过期时间,一定时间之后服务器会自动删除session信息(通常给Session信息设置过期时间更靠谱一些,因为服务器掌握在程序员手里)。

2.5运行截图

在这里插入图片描述

在这里插入图片描述

相关文章:

通过Cookie和Session来实现网站中登录账号的功能

文章目录 一、Cookie和Session二、基于Cookie和Session实现登录账号的功能2.1步骤一2.2步骤二2.3步骤三2.4总结通过Cookie和Session来实现登录功能2.5运行截图 一、Cookie和Session cookie是http请求header中的一个属性&#xff0c;是浏览器持久化存储数据的一种机制&#xff…...

QWidget 实现九宫格图案解锁

前言 最近需要实现一个九宫格图案解锁功能,查看网上的方案,基于QWidget的方案全网搜来搜去就一篇 Qt编写自定义控件:图案密码锁, 都是炒来炒去的同一篇,代码还比较复杂,运行后在PC端还是可以的,但是运行在arm机器上,就卡顿,或者容易断开手势连接线,各种不友好,于是自…...

设计模式-适配器模式(Adapter)

设计模式-适配器模式&#xff08;Adapter&#xff09; 一、适配器模式概述1.1 什么是适配器模式1.2 简单实现适配器模式1.3 使用适配器模式注意事项 二、适配器模式的用途三、实现适配器模式的方式3.1 继承适配器模式&#xff08;Inheritance Adapter&#xff09;3.2 组合适配器…...

react:创建项目

一&#xff1a; 使用create-react-app // 默认创建reactjs的webpack打包项目 npm i create-react-app -g create-react-app 项目名// 创建ts项目打包项目 sudo npx create-react-app my-app --template typescript 二&#xff1a; 使用vite npm create vitelatest // 创建react…...

RabbitMQ集群

RabbitMQ概述 1.RabbiMQ简介 RabbiMQ是⽤Erang开发的&#xff0c;集群⾮常⽅便&#xff0c;因为Erlang天⽣就是⼀⻔分布式语⾔&#xff0c;但其本身并不⽀持负载均衡。支持高并发&#xff0c;支持可扩展。支持AJAX&#xff0c;持久化&#xff0c;用于在分布式系统中存储转发消…...

Qt QtCreator调试Qt源码配置

目录 前言1、编译debug版Qt2、QtCreator配置3、调试测试4、总结 前言 本篇主要介绍了在麒麟V10系统下&#xff0c;如何编译debug版qt&#xff0c;并通过配置QtCreator实现调试Qt源码的目的。通过调试源码&#xff0c;我们可以对Qt框架的运行机制进一步深入了解&#xff0c;同时…...

JavaScript如何实现钟表效果,时分秒针指向当前时间,并显示当前年月日,及2024春节倒计时,源码奉上

本篇有运用jQuery&#xff0c;记得引入jQuery库&#xff0c;否则不会执行的喔~ <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title></title> <meta name"chenc" content"Runoob"> <met…...

重生奇迹MU套装大全中的极品属性

在重生奇迹MU之中&#xff0c;你不能如其他游戏一般只看攻击与防御&#xff0c;你更要看属性&#xff0c;这才是重生奇迹中的王道&#xff01;属性好&#xff0c;才是极品&#xff0c;属性不佳&#xff0c;即便攻击、防御再出色&#xff0c;也只能沦落成为一件替用品&#xff0…...

用Python解决猴子分桃问题

1 问题 海滩上有一堆桃子&#xff0c;五只猴子来分。第一只猴子把这堆桃子平均分为五份&#xff0c;多了一个&#xff0c;这只猴子把多的一个扔入海中&#xff0c;拿走了一份。第二只猴子把剩下的桃子又平均分成五份&#xff0c;又多了一个&#xff0c;它同样把多的一个扔入海中…...

YOLOv8-Seg改进:分割注意力系列篇 | 新型的多尺度卷积注意力(MSCA)模块

🚀🚀🚀本文改进: 新型的多尺度卷积注意力(MSCA)模块,实现创新,MSCA包含三个部分:深度卷积聚合局部信息,多分支深度条卷积捕获多尺度上下文,以及11卷积建模不同通道之间的关系。 🚀🚀🚀MSCA多尺度特性在小目标分割检测领域表现优异 🚀🚀🚀YOLOv8-seg…...

基于springboot实现致远汽车租赁平台管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现致远汽车租赁平台管理系统演示 摘要 首先,论文一开始便是清楚的论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确系统的需求。然后在明白了系统的需求基础上需要进一步地设计系统…...

真的设计师做图只需要一个炫云客户端就够了

真的设计师做图只需要一个炫云客户端就够了&#xff0c;为什么这么说呢&#xff1f;因为炫云的这个客户端功能真的太全了&#xff0c;设计师想要的功能在炫云客户端上都有&#xff0c;而且还很多功能是免费的&#xff0c;非常的实用&#xff0c;具体有哪些功能我们一起来看看吧…...

简述 HTTP 请求的过程是什么?

HTTP&#xff08;Hypertext Transfer Protocol&#xff09;请求的过程可以简单地描述为客户端与服务器之间的通信交互。下面是一般的 HTTP 请求过程&#xff1a; 解析 URL&#xff1a;客户端解析目标 URL&#xff0c;提取出服务器的主机名&#xff08;域名&#xff09;和端口号…...

免root修改手机imei的技术原理是什么?如何实现的?hook吗

在过去&#xff0c;修改手机IMEI&#xff08;International Mobile Equipment Identity&#xff09;通常需要Root权限&#xff0c;这给用户带来了一些不便&#xff0c;也存在一定的安全风险。然而&#xff0c;近年来&#xff0c;一些技术爱好者提出了一种免Root修改手机IMEI的方…...

【Redis】整合使用,进行注解式开发及应用场景和击穿、穿透、雪崩的讲解

目录 一、整合 1. 为什么 2. 整合应用 ( 1 ) pom配置 ( 2 ) 所需配置 3. 注解式开发及应用场景 1. Cacheable 2. CachePut 3. CacheEvict 4. 击穿、穿透、雪崩 一、整合 1. 为什么 Redis可以与SSM项目整合&#xff0c;主要是为了提高项目的性能和效率。以下是整合Re…...

数据分析-numpy

numpy numpy numpy简介优点下载ndarray的属性输出数据类型routines 函数ndarray对象的读写操作ndarray的级联和切分级联切分 ndarray的基本运算广播机制&#xff08;Broadcast&#xff09;ndarry的聚合操作数组元素的操作numpy 数学函数numpy 查找和排序 写在最后面 简介 nump…...

【Java】云HIS云端数字医院信息平台源码

一、云HIS系统特色 • 使用简易化 即开即用&#xff0c;快速复制&#xff0c;按需开通功能模块&#xff0c;多机构共享机房、软件、服务器、存储设备等资源&#xff0c;资源利用最大化。 • 连锁集团化 可支持连锁集团化管理&#xff0c;1N模式&#xff0c;支撑运营&#x…...

Jupyter Notebook 内核似乎挂掉了,它很快将自动重启

报错原因&#xff1a; OMP: Error #15: Initializing libiomp5md.dll, but found libiomp5md.dll already initialized. OMP: Hint This means that multiple copies of the OpenMP runtime have been linked into the program. That is dangerous, since it can degrade perfo…...

Flink -- 事件时间 Watermark

1、事件时间&#xff1a; 指的是数据产生的时间或是说是数据发生的时间。 在Flink中有三种时间分别是&#xff1a; Event Time&#xff1a;事件时间&#xff0c;数据产生的时间&#xff0c;可以反应数据真实发生的时间 Infestion Time&#xff1a;事件接收时间 Processing Tim…...

Django框架简介

文章目录 Django框架介绍MVC与MVT模型MVCMTV 版本问题运行django注意事项 Django的下载与基本命令下载Django方式一&#xff1a;在命令界面使用pip安装方式二&#xff1a;使用pycharm安装 Django的基础命令命令行操作pycharm操作 Django项目命令行操作与Pycharm操作的区别应用D…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

热门Chrome扩展程序存在明文传输风险,用户隐私安全受威胁

赛门铁克威胁猎手团队最新报告披露&#xff0c;数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据&#xff0c;严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能&#xff0c;但SEMR…...

深入解析光敏传感技术:嵌入式仿真平台如何重塑电子工程教学

一、光敏传感技术的物理本质与系统级实现挑战 光敏电阻作为经典的光电传感器件&#xff0c;其工作原理根植于半导体材料的光电导效应。当入射光子能量超过材料带隙宽度时&#xff0c;价带电子受激发跃迁至导带&#xff0c;形成电子-空穴对&#xff0c;导致材料电导率显著提升。…...

Go 并发编程基础:select 多路复用

select 是 Go 并发编程中非常强大的语法结构&#xff0c;它允许程序同时等待多个通道操作的完成&#xff0c;从而实现多路复用机制&#xff0c;是协程调度、超时控制、通道竞争等场景的核心工具。 一、什么是 select select 类似于 switch 语句&#xff0c;但它用于监听多个通…...

浏览器工作原理01 [#]Chrome架构:仅仅打开了1个页面,为什么有4个进程

引用 浏览器工作原理与实践 Chrome打开一个页面需要启动多少进程&#xff1f;你可以点击Chrome浏览器右上角的“选项”菜单&#xff0c;选择“更多工具”子菜单&#xff0c;点击“任务管理器”&#xff0c;这将打开Chrome的任务管理器的窗口&#xff0c;如下图 和Windows任务管…...