Cookie和Session的区别、工作流程是什么?全网最详细!

本文深入探讨了Cookie和Session的概念、区别以及它们在用户登录过程中的工作流程。Cookie是存储在客户端的数据,用于跟踪用户状态,而Session是服务器端存储用户信息的方式。文章通过一个用户登录的例子,阐述了Cookie和Session如何协同工作,同时提供了相关代码实现。重点讨论了它们在安全性、存储位置、容量、时间和数据类型等方面的不同,并强调了在实际应用中的注意事项。

目录

前言

一、Cookie

1.1、Cookie从哪里来?

1.2、Cookie到哪里去?

二、Session

2.1、什么是sessionId?

三、Cookie和Session的区别

1.作用的对象不同

2.安全性不同

3.存储的位置不同

4.存储容量不同

5.存储时间不同

6.存储的数据类型不同

7.使用习惯上

8.存储习惯上

四、Cookie和Session的具体工作流程

五、代码实现用户登录

5.1、核心方法

5.2、代码


前言

        想要了解Cookie和Session的工作流程,首先需要来了解一下什么是Cookie,什么是Session?之后我将会用一个用户登录(附加:前端+后端 代码)的栗子,让你通透整个工作流程;


一、Cookie

        有时候需要让网页存储一些简单数据,但由于网页禁止js访问电脑硬盘(原因:安全性),所以就提供了特殊的api给网页用,Cookie就是最经典的一个方案,是浏览器在本地存储数据(存储到硬盘上)的一种机制;

 Cookie如何组织信息的?键值对的形式!(如下图)

Cookie是用来存放什么数据的?

<think>嗯,用户现在想了解JWT的用途以及前后端如何传输Token。首先,我需要回顾之前的对话,确保回答的一致性。之前我详细讲了前后端传递Token的流程,包括登录获取Token、存储、携带、验证以及安全措施。用户现在的问题更聚焦在JWT本身的作用传输方式,所以需要结合之前的回答提供的引用资料来组织内容。 首先,JWT的作用。根据引用[3],JWT是用于在网络应用间传递声明的一种开放标准,主要用于身份认证信息交换。引用[2]提到JWT与传统Token的区别在于不需要查库验证,因为信息已经包含在Token中,所以可以减轻服务器负担。需要强调JWT的三大用途:身份认证、安全数据传输跨系统单点登录。 然后,前后端传输Token的方式。之前回答中提到了前端存储Token的方式(localStorage、sessionStorage、Cookie),以及如何通过Authorization头传递。引用[5]展示了前端登录发送请求的代码示例,可以引用这部分说明前端如何发送Token。同时,引用[2]提到后端生成JWT并返回给前端,验证时检查签名、过期时间等,这部分需要详细说明。 还需要注意安全性问题,比如使用HTTPS(引用[2])、防范XSSCSRF攻击(之前的回答提到过),以及Token的有效期刷新机制。引用[4]讨论了JWT的优缺点,比如无法及时废止的问题,可以建议结合黑名单或短期有效来缓解。 另外,用户可能对JWT的结构感兴趣,根据引用[1],JWT由Header、Payload、Signature组成,各部分的作用需要简要说明。引用[4]中的结构说明部分也可以补充进去。 后,生成的相关问题需要覆盖JWT的安全隐患、与传统Token的对比、刷新机制实际应用场景,确保用户有进一步了解的方向。</think>#### 一、JWT的核心作用 1. **身份认证** JWT通过数字签名实现**无状态身份验证**,服务器无需存储会话信息[^3]。 - 用户登录后,后端生成包含用户ID、角色、权限等信息的JWT - 前端后续请求携带JWT,后端通过验证签名即可确认用户身份 - 示例JWT解码结果: ```json { "sub": "user123", "role": "admin", "exp": 1720298400 } ``` 2. **安全数据传输** JWT的Payload可加密存储敏感数据,如: ```javascript // 后端生成示例 const token = jwt.sign( { userId: 1001, org: "A公司" }, 'secret_key', { expiresIn: '2h' } ); ``` 3. **跨系统单点登录(SSO)** 多个子系统共享同一JWT签发方时,可实现一次登录全网通行[^3]。 #### 二、前后端Token传输实现 1. **前端处理流程** - **登录获取Token** ```javascript // 引用[5]的扩展实现 async function login() { const res = await axios.post('/api/login', { username: 'user1', password: 'P@ssw0rd' // 实际需加密传输[^2] }); localStorage.setItem('jwt', res.data.token); } ``` - **请求携带Token** ```javascript axios.interceptors.request.use(config => { const token = localStorage.getItem('jwt'); if (token) { config.headers.Authorization = `Bearer ${token}`; // 标准传输格式[^2] } return config; }); ``` 2. **后端验证机制** - **签名验证** 使用相同密钥验证Header+Payload的签名一致性[^1]: ```java // 基于引用[1]的Java实现 public boolean verifyToken(String token) { try { Jwts.parser() .setSigningKey(SECRET_KEY) .parseClaimsJws(token); return true; } catch (JwtException e) { return false; } } ``` - **声明(Claims)解析** ```java Claims claims = Jwts.parser() .setSigningKey(SECRET_KEY) .parseClaimsJws(token) .getBody(); String userId = claims.get("userId", String.class); ``` #### 三、JWT安全设计要点 1. **传输安全** - 强制HTTPS协议防止中间人攻击[^2] - 避免URL参数传递Token(防止日志泄露) 2. **存储安全** - 浏览器端优先使用`HttpOnly`+`Secure` Cookie[^5] - 移动端使用安全存储模块(如Android KeyStore) 3. **令牌生命周期** ```mermaid graph LR AccessToken(2小时有效) -->|过期| RefreshToken RefreshToken(7天有效) -->|换取新| AccessToken ``` #### 四、JWT与传统Token对比 | 特性 | JWT | 传统Session Token | |---------------------|------------------------------|-------------------------| | 服务器存储 | 无状态 | 需要会话存储 | | 数据载体 | 自包含用户信息 | 仅为随机字符串 | | 验证方式 | 签名算法验证[^1] | 数据库查询验证[^2] | | 跨域支持 | 天然支持 | 需额外配置 |
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

陈亦康

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

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

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

打赏作者

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

抵扣说明:

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

余额充值