JWT 认证机制

1. 了解 Session 认证的局限性

Session 认证机制需要配合 Cookie 才能实现 。由于 Cookie 默认不支持跨域访问,所以当涉及到前端跨域请求后端接口 的时候,需要做很多额外的配置,才能实现跨域 Session 认证

注意:

  1. 当前端请求后端接口不存在跨域问题 时,推荐使用 Session 身份认证机制

  2. 当前端需要跨域请求后端接口的时候,不推荐使用 Session 身份认证机制,推荐使用JWT认证机制

2. 什么是 JWT

JWT(英文全称:JSON Web Token)是目前最流行的跨域认证解决方案

3. JWT 工作原理

用户的信息通过 Token 字符串的形式,保存在客户端浏览器中,服务器通过还原 Token 字符串的形式来认证用户的身份

4. JWT 的组成部分

JWT 通常由三部分组成,分别是 Header (头部)、Payload (有效载荷)、Signature(签名)

三者之间使用英文的 ","分割,格式如下

bash 复制代码
Header.Payload.Signature

JWT字符串示例

5. JWT 的三个部分各自代表的含义

JWT的三个组成部分,从前到后分别是 Header、Payload、Signature

Payload 部分是真正的用户信息,是用户信息经过加密后生成的字符串

Header 和 Signature 是**安全性相关的部分,**只是为了保证 Token 的安全性

6. JWT 的使用方式

客户端收到服务器返回的 JWT 之后,通常会将它储存在 localStoragesessionStorage

此后,客户端每次与服务器通信,都要带上这个 JWT 的字符串,从而进行身份认证

推荐的做法就是:把 JWT 放在 HTTP请求头的 Authorization 字段中

bash 复制代码
Authorization: Bearer <token>
相关推荐
尘中客1 小时前
放弃 Echarts?前端直接渲染后端高精度 SVG 矢量图流的踩坑记录
前端·javascript·echarts·前端开发·svg矢量图·echarts避坑
FreeBuf_2 小时前
Chrome 0Day漏洞遭野外利用
前端·chrome
小彭努力中2 小时前
199.Vue3 + OpenLayers 实现:点击 / 拖动地图播放音频
前端·vue.js·音视频·openlayers·animate
有毒的教程2 小时前
Ubuntu 虚拟机磁盘空间不足完整解决教程
linux·运维·ubuntu
2501_916007472 小时前
网站爬虫原理,基于浏览器点击行为还原可接口请求
前端·javascript·爬虫·ios·小程序·uni-app·iphone
WiChP2 小时前
【V0.1B5】从零开始的2D游戏引擎开发之路
java·服务器·数据库
前端大波2 小时前
Sentry 每日错误巡检自动化:设计思路与上手实战
前端·自动化·sentry
geNE GENT3 小时前
Nginx WebSocket 长连接及数据容量配置
运维·websocket·nginx
ZC跨境爬虫3 小时前
使用Claude Code开发校园交友平台前端UI全记录(含架构、坑点、登录逻辑及算法)
前端·ui·架构
慧一居士3 小时前
Vue项目中,何时使用布局、子组件嵌套、插槽 对应的使用场景,和完整的使用示例
前端·vue.js