面试官:JWT、Cookie、Session、Token有什么区别?

JWT、Cookie、Session、Token 是 Web 开发中常用的身份认证和状态管理技术,它们之间既有区别,也有联系

一、JWT(JSON Web Token)

JWT 是一种开放标准(RFC 7519),用于在网络应用之间安全地传输信息(通常是身份认证信息)。它是一个自包含的、可验证的、不可篡改的字符串,格式如下:

css 复制代码
Header.Payload.Signature

三部分组成:

  1. Header(头部):声明类型和签名算法(如 HS256)。
  2. Payload(载荷):包含用户信息(如用户 ID、角色等)和元数据(如过期时间)。
  3. Signature(签名):用密钥对 Header 和 Payload 签名,防止篡改。

特点:

  • 无需服务器存储(无状态)。
  • 可跨域使用(常用于分布式系统、微服务)。
  • 一旦签发,在过期前无法撤销(除非引入黑名单机制)。

二、Cookie

Cookie 是浏览器存储的一小段文本信息,由服务器通过 HTTP 响应头 Set-Cookie 设置,浏览器在后续请求中自动携带。

特点:

  • 自动携带(浏览器行为)。
  • 可设置过期时间、作用域、HttpOnly、Secure 等属性。
  • 容量小(约 4KB)。
  • 可用于存储 Session ID 或 JWT。

三、Session(会话)

Session 是服务器端维护的用户会话状态。通常流程如下:

  1. 用户登录后,服务器创建一个 Session,生成一个唯一的 Session ID
  2. Session ID 通过 Cookie 返回给浏览器。
  3. 浏览器后续请求自动携带该 Cookie,服务器通过 Session ID 查找对应的用户状态。

特点:

  • 状态存储在服务器端(通常是内存、Redis、数据库)。
  • 安全性较高(用户无法直接篡改)。
  • 不适合分布式系统(需要共享 Session 存储)。

四、Token(令牌)

Token 是一个广义概念,指用于身份验证的凭证。JWT 就是一种 Token。

常见 Token 类型:

  • Access Token(访问令牌):用于访问资源。
  • Refresh Token(刷新令牌):用于获取新的 Access Token。
  • JWT:一种结构化的 Token。

五、它们之间的关系与区别

名称 存储位置 状态管理 安全性 适用场景
JWT 客户端 无状态 分布式系统、移动端、API 认证
Cookie 客户端 无状态 存储小量数据、自动携带
Session 服务器端 有状态 传统 Web 应用
Token 客户端 无状态 通用身份凭证(JWT 是其一)

六、常见组合方式

方式一:Session + Cookie(传统 Web)

  • 登录后服务器创建 Session,Session ID 存 Cookie。
  • 每次请求带 Cookie,服务器查 Session 验证身份。

方式二:JWT + Header(前后端分离)

  • 登录后服务器返回 JWT,前端存 localStorage 或 Cookie。
  • 每次请求手动在 Header 中加 Authorization: Bearer <JWT>

方式三:JWT + Cookie(安全增强)

  • JWT 存 Cookie,设置 HttpOnly + Secure,防止 XSS。
  • 浏览器自动携带,服务器解析 JWT 验证身份。

七、总结

  • JWT 是一种自包含的 Token不依赖服务器存储
  • Cookie浏览器存储机制,可存 Session ID 或 JWT。
  • Session服务器存储的用户状态,依赖 Cookie 传递 ID。
  • Token身份凭证,JWT 是其中一种实现。
相关推荐
百锦再6 小时前
Reactive编程入门:Project Reactor 深度指南
前端·javascript·python·react.js·django·前端框架·reactjs
莲华君6 小时前
React快速上手:从零到项目实战
前端·reactjs教程
百锦再6 小时前
React编程高级主题:测试代码
android·前端·javascript·react.js·前端框架·reactjs
易安说AI6 小时前
Ralph Loop 让Claude无止尽干活的牛马...
前端·后端
失忆爆表症8 小时前
05_UI 组件库集成指南:Shadcn/ui + Tailwind CSS v4
前端·css·ui
小迷糊的学习记录8 小时前
Vuex 与 pinia
前端·javascript·vue.js
发现一只大呆瓜8 小时前
前端性能优化:图片懒加载的三种手写方案
前端·javascript·面试
不爱吃糖的程序媛8 小时前
Flutter 与 OpenHarmony 通信:Flutter Channel 使用指南
前端·javascript·flutter
利刃大大8 小时前
【Vue】Element-Plus快速入门 && Form && Card && Table && Tree && Dialog && Menu
前端·javascript·vue.js·element-plus
NEXT069 小时前
AI 应用工程化实战:使用 LangChain.js 编排 DeepSeek 复杂工作流
前端·javascript·langchain