Cookie、Session、Token、JWT、OAuth2的概念
在 Web 开发、接口开发、前后端分离项目中，Cookie、Session、Token、JWT、OAuth2是最核心的五大认证授权技术：Cookie 是客户端存储载体、Session 是服务端会话、Token 是通用令牌、JWT 是标准化 Token、OAuth2 是第三方授权协议。
一、前置核心认知（理清层级关系）
1. Cookie、Session：传统有状态登录方案，成对使用，主打服务端管控会话；
2. Token、JWT：现代无状态认证方案，前后端分离、分布式架构主流；
3. OAuth2：第三方授权协议，主打「免密登录」（微信/QQ/ GitHub 登录），和前四者不是同类，是授权标准而非认证凭证。
二、Cookie（客户端本地存储容器）
1. 核心概念
Cookie 是服务器下发、浏览器自动存储、自动携带的本地小型文本数据（最大4KB），不属于认证机制，只是数据存储载体。
核心特性：
-
由服务端通过
Set-Cookie响应头下发，前端JS也可手动创建、读取、删除； -
浏览器自动保存，后续同域名请求自动携带；
-
可设置过期时间、仅HTTP访问、HTTPS加密等安全属性；
-
存在跨域限制，无法跨域名传递。
2. 极简HTML实战案例（纯前端，直接运行）
无需后端，原生JS实现Cookie的新增、读取、删除，本地HTML文件打开即可测试：
<!DOCTYPE html>
<html lang="zh-CN">
<body>
<button onclick="setCookie('user','test01',1)">设置登录Cookie</button>
<button onclick="getCookie('user')">读取当前登录用户</button>
<button onclick="delCookie('user')">清除Cookie（退出登录）</button>
<script>
// 设置Cookie：name=字段名，value=值，day=过期天数
function setCookie(name, value, day) {
const date = new Date();
date.setTime(date.getTime() + day * 24 * 60 * 60 * 1000);
document.cookie = `${name}=${value};expires=${date.toUTCString()};path=/`;
alert('Cookie设置成功');
}
// 读取指定Cookie
function getCookie(name) {
const arr = document.cookie.split('; ');
for(let i = 0; i < arr.length; i++) {
const item = arr[i].split('=');
if(item[0] === name) alert('当前登录用户：' + item[1]);
}
}
// 删除Cookie
function delCookie(name) {
document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/`;
alert('Cookie已清除');
}
</script>
</body>
</html>
运行效果：点击按钮可完成Cookie的设置、读取、清除，刷新页面后Cookie依然保留，符合浏览器原生特性。
三、Session（服务端会话存储）
1. 核心概念
Session 是服务端存储的用户会话数据，是「有状态」认证的核心，纯前端无法独立实现Session，必须依赖服务端。
工作流程（Cookie+Session 经典组合）：
-
用户登录，服务端验证账号密码成功；
-
服务端创建 Session，生成唯一
SessionID，存储用户信息； -
将
SessionID通过 Cookie 下发给浏览器； -
后续请求浏览器自动携带 Cookie，服务端根据
SessionID匹配会话，识别用户； -
退出登录时，服务端销毁 Session。
优缺点：安全可控、服务端压力大、不适合分布式集群。
前端角色说明：前端无需操作Session，只需自动接收、携带服务端下发的SessionID Cookie，全程无感。
四、Token（通用身份令牌）
1. 核心概念
Token 是服务端签发的通用身份令牌，是无状态认证的统称。
核心特点：
-
无状态：服务端无需存储会话数据；
-
客户端登录成功后，保存 Token，后续请求在请求头携带；
-
通用性极强，JWT 就是 Token 的一种标准化实现。
和 Session 核心区别：Session 存服务端，Token 存客户端。
2. 极简HTML实战案例（前端Token存储+请求携带）
模拟登录获取Token、本地存储、接口鉴权请求，贴合真实前后端分离业务场景：
<!DOCTYPE html>
<html lang="zh-CN">
<body>
<button onclick="login()">模拟登录获取Token</button>
<button onclick="getUserInfo()">携带Token请求用户信息</button>
<button onclick="logout()">退出登录清除Token</button>
<script>
// 模拟登录接口，获取后端返回的Token
function login() {
// 模拟后端生成返回的随机Token
const token = 'token_' + Math.random().toString(36).slice(2);
// 本地存储Token（实际项目用localStorage/sessionStorage）
localStorage.setItem('authToken', token);
alert('登录成功，获取Token：' + token);
}
// 携带Token请求受保护接口
function getUserInfo() {
const token = localStorage.getItem('authToken');
if(!token) {
alert('未登录，请先登录！');
return;
}
// 模拟接口请求，请求头携带Token
console.log('请求头携带Authorization：', token);
alert('鉴权成功，携带Token完成请求，查看控制台日志');
}
// 退出登录，清空Token
function logout() {
localStorage.removeItem('authToken');
alert('退出成功，Token已清除');
}
</script>
</body>
</html>
核心逻辑：登录存Token、请求带Token、退出清Token，是所有Token认证项目的通用前端规范。
五、JWT（标准化Token）
1. 核心概念
JWT（JSON Web Token）是标准化、可自包含信息的 Token 格式，是目前前后端分离、微服务最主流的认证方案。
JWT 三段结构：Header（头部）+ Payload（载荷，存用户信息）+ Signature（签名，防篡改）。
核心优势：
-
无状态、服务端无需存储；
-
自带用户信息，减少数据库查询；
-
支持跨域、适配移动端、微服务。
注意：Payload 可解码，绝对不能存密码、密钥等敏感数据。
2. 极简HTML实战案例（前端解析JWT）
模拟后端返回JWT，前端实现JWT解析、过期判断、请求鉴权，原生JS实现无需插件：
<!DOCTYPE html>
<html lang="zh-CN">
<body>
<button onclick="getJwtToken()">获取JWT令牌</button>
<button onclick="parseJwt()">解析JWT用户信息</button>
<button onclick="checkJwtExpire()">校验JWT是否过期</button>
<script>
// 模拟后端返回的标准JWT（测试用有效令牌）
const mockJwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjEsInVzZXJuYW1lIjoiYWRtaW4iLCJleHAiOjE3ODU2Nzg5MDB9.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c';
// 存储JWT
function getJwtToken() {
localStorage.setItem('jwtToken', mockJwt);
alert('JWT获取并存储成功');
}
// 解析JWT载荷信息
function parseJwt() {
const token = localStorage.getItem('jwtToken');
if(!token) return alert('无JWT令牌');
// 拆分JWT三段，解析Payload
const payload = token.split('.')[1];
const userInfo = JSON.parse(atob(payload));
console.log('解析后的用户信息：', userInfo);
alert(`用户ID：${userInfo.userId}，用户名：${userInfo.username}`);
}
// 校验JWT过期
function checkJwtExpire() {
const token = localStorage.getItem('jwtToken');
if(!token) return alert('无JWT令牌');
const payload = JSON.parse(atob(token.split('.')[1]));
const now = Math.floor(Date.now() / 1000);
if(now > payload.exp) {
alert('JWT已过期，请重新登录');
localStorage.removeItem('jwtToken');
} else {
alert('JWT有效，可正常使用');
}
}
</script>
</body>
</html>
实战要点：前端只做解析和过期判断，JWT签名校验必须在服务端完成，前端无法防篡改。
六、OAuth2.0（第三方授权协议）
1. 核心概念
前面四种都是「自家平台认证自家用户」，而 OAuth2.0 是第三方授权协议，主打「授权登录、资源授权」。
场景：网站/APP 的微信登录、QQ 登录、GitHub 登录，无需输入账号密码，授权即可登录。
核心角色：用户、第三方应用（我方项目）、授权服务方（微信/GitHub）。
核心流程（授权码模式，最常用）：
-
用户点击「第三方登录」，跳转授权平台授权页；
-
用户同意授权，平台返回
授权码code； -
我方服务用 code 换取
access_token； -
用 access_token 拉取用户公开信息；
-
我方根据信息创建/登录账号。
2. 极简HTML实战案例（OAuth2跳转授权）
纯前端实现GitHub OAuth2授权跳转、获取回调Code，贴合真实第三方登录流程：
<!DOCTYPE html>
<html lang="zh-CN">
<body>
<h3>GitHub OAuth2 第三方登录演示</h3>
<button onclick="goGithubLogin()">点击GitHub授权登录</button>
<script>
// 需替换为自己GitHub开发者平台的ClientID
const CLIENT_ID = '你的GitHub ClientID';
// 授权成功后的回调地址（需和GitHub配置一致）
const REDIRECT_URI = 'http://localhost:3000/github/callback';
// 跳转GitHub授权页面
function goGithubLogin() {
const authUrl = `https://github.com/login/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&scope=user&response_type=code`;
window.location.href = authUrl;
}
// 页面加载后获取授权回调Code
window.onload = function() {
// 截取地址栏中的code参数
const urlParams = new URLSearchParams(window.location.search);
const code = urlParams.get('code');
if(code) {
console.log('获取OAuth2授权码：', code);
alert('授权成功，获取Code：' + code + '，可传给后端换取Token');
}
}
</script>
</body>
</html>
实操注意事项：
-
需前往 GitHub Developer 平台注册应用，配置回调地址，获取专属 ClientID、ClientSecret；
-
Code 换取 Token、拉取用户信息必须由后端实现，前端无法完成密钥校验，存在安全风险；
-
本地测试需搭建本地服务（localhost），直接打开本地HTML文件会跨域报错。
七、五大技术核心对比 & 适用场景
| 技术 | 状态 | 存储位置 | 核心场景 |
| Cookie | 载体、非认证 | 客户端 | 传统网页存储会话ID、本地轻量数据存储 |
| Session | 有状态 | 服务端 | 传统服务端渲染项目、后台管理系统 |
| Token | 无状态 | 客户端 | 移动端、前后端分离项目通用认证 |
| JWT | 无状态、标准化Token | 客户端 | 微服务、分布式系统、跨域API认证 |
| OAuth2.0 | 授权协议 | 无存储 | 第三方免密登录、跨平台资源授权 |
八、总结（核心记忆点）
-
Cookie 是盒子：存数据的容器，浏览器专属，自动携带，前端可自主操作；
-
Session 是账本：服务端专属会话存储，前端仅被动接收携带；
-
Token 是门票：通用无状态令牌，客户端存储、请求携带；
-
JWT 是标准门票：自带用户信息、防篡改，适配分布式项目；
-
OAuth2 是授权规则：规范第三方免密登录流程，核心鉴权依赖后端。
九、拓展小知识（面试高频+前端实操坑点）
-
Session 集群问题：多服务器部署需 Redis 共享 Session，保证会话同步；
-
JWT 无法前端主动失效：仅能本地删除，服务端需搭配 RefreshToken 实现强制注销、续期；
-
OAuth2 前端仅负责跳转授权、获取Code，密钥交换、令牌校验必须走后端，杜绝前端暴露密钥；
-
Cookie 有域名、路径限制，Token/JWT 无跨域限制，更适配前后端分离跨域场景。
浙公网安备 33010602011771号