终极解码:Cookie vs Session vs Token vs JWT,前端身份验证全攻略!🔐

在这个数字化的时代,我们每天都在使用各种网站和应用,从社交媒体到在线购物,每一次登录都涉及到身份验证。但你有没有想过,这背后是如何工作的呢?今天,就让我们一起揭开Cookie、Session、Token、JWT这四大身份验证技术的神秘面纱!🌟

Cookie是服务器发送到用户浏览器并保存在本地的一小块数据,它会在用户下次访问网站时被浏览器携带并发送到服务器。就像网站给你的一个身份卡,每次来访问时,你都需要出示它。

Nodejs示例:使用Koajs设置Cookie

javascript 复制代码
const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
  ctx.cookies.set('user', 'John Doe', { httpOnly: true });
  ctx.body = 'Cookie is set';
});

app.listen(3000);

2. Session 📂 - 服务器的记忆

Session是另一种记录服务器和客户端会话状态的方法。不同于Cookie直接存储在客户端,Session数据是存储在服务器端的。服务器会创建一个Session ID来唯一标识这次会话,并通过Cookie发送给客户端,以便下次请求时能够识别是同一个会话。

Nodejs示例:使用Koajs创建Session

javascript 复制代码
const Koa = require('koa');
const session = require('koa-session');
const app = new Koa();

app.keys = ['some secret'];
app.use(session(app));

app.use(ctx => {
  let n = ctx.session.views || 0;
  ctx.session.views = ++n;
  ctx.body = n + ' views';
});

app.listen(3000);

3. Token 🎫 - 无状态的身份验证

Token是一种无状态的身份验证方式,服务器在验证用户身份后会生成一个Token,然后发送给客户端。客户端在后续的请求中携带这个Token,服务器通过验证Token来识别用户。Token可以存储更多的信息,并且更加安全。

Nodejs示例:使用Koajs和JWT生成Token

javascript 复制代码
const Koa = require('koa');
const jwt = require('jsonwebtoken');
const app = new Koa();

app.use(async ctx => {
  if (ctx.url === '/token') {
    const token = jwt.sign({ user: 'John Doe' }, 'secret', { expiresIn: '1h' });
    ctx.body = token;
  }
});

app.listen(3000);

4. JWT 🛂 - Token的进化版

JWT(JSON Web Token)是Token的一种形式,它将用户信息加密到Token中,确保数据的安全性。JWT由三部分组成:头部(Header)、载荷(Payload)、签名(Signature)。服务器通过验证签名来认证用户。

Nodejs示例:使用Koajs验证JWT

javascript 复制代码
const Koa = require('koa');
const jwt = require('jsonwebtoken');
const app = new Koa();

app.use(async ctx => {
  try {
    const token = ctx.headers.authorization.split(' ')[1];
    jwt.verify(token, 'secret');
    ctx.body = 'You are authenticated';
  } catch (error) {
    ctx.status = 401;
    ctx.body = 'Unauthorized';
  }
});

app.listen(3000);

结语

通过今天的探索,我们不仅了解了Cookie、Session、Token、JWT这四大身份验证技术的基本原理和应用场景,还学习了如何在Nodejs中实现它们。希望这篇文章能帮助你在前端开发的道路上更进一步!

如果你对这些技术感兴趣,或者有任何问题,欢迎在评论区留言,我们一起讨论!👩‍💻👨‍💻

别忘了点赞👍和收藏💖,让更多的小伙伴看到这篇文章!

相关推荐
进击的明明20 分钟前
当AI开始“边想边干”:深入聊聊ReAct,以及如何用Python手搓一个简单Agent
python·面试·agent
掘金挖土39 分钟前
前端手摸手跑路之 AI 应用开发(九)
前端·后端
中文呀3 小时前
三维 GIS 离线缓存实战:逆向 CesiumOfflineCache,并亲手为它补上"自动更新"能力
前端
前进前进前进4 小时前
TRAE 全链路实战:做了一个警示牌一键生成器:纯 Canvas、单文件、零依赖
前端
小万7425 小时前
God‘s Eye View 深度解析:15 路公开信号 + CesiumJS 的浏览器级 OSINT 控制台,60 帧渲染的“真实间谍卫星模拟器”
前端
IT星宿5 小时前
浏览器标签页全是一个图标:我用名字哈希生成 favicon,让每个项目都有身份标识
前端
OpsEye5 小时前
大模型账单对账难:不同厂商 Token 统计口径差异怎么处理
javascript·ai编程
全栈项目管理程序猿5 小时前
ArcGIS JS 基础教程(32):体元系列 - VoxelSlice 体元切片
前端·javascript
拖孩7 小时前
AI 帮我写的小程序「厨菜记」上线满月了,挣了两百块!!!
前端·后端·微信小程序