终极解码: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中实现它们。希望这篇文章能帮助你在前端开发的道路上更进一步!

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

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

相关推荐
「、皓子~19 分钟前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了22 分钟前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_23 分钟前
Ajax 入门
前端·javascript·ajax
京东零售技术39 分钟前
京东小程序JS API仓颉改造实践
前端
奋飛1 小时前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
老A技术联盟1 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游1 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟1 小时前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor1 小时前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js