json web token前端鉴权流程（超容易理解）

最新推荐文章于 2024-07-25 14:40:04 发布
最新推荐文章于 2024-07-25 14:40:04 发布
阅读量605 收藏 2
点赞数 2
分类专栏： JavaScript 文章标签： javascript 前端 安全
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43775179/article/details/128833800
版权
JWT是一种用于安全传输信息的开放标准，其特点是紧凑和自包含。它由Header、Payload和Signature三部分组成，常用于单点登录场景。认证流程包括客户端发送登录信息，服务器验证并返回JWT，之后客户端在请求API时携带JWT以供服务器验证授权。
摘要由CSDN通过智能技术生成

json web token前端鉴权流程

1

jwt了解

JWT（JSON Web Token） 是一个开放标准协议，它定义了一种“紧凑”和“自包含”的方式，它用于各方之间作为JSON对象安全地传输信息。（相当于一串标识用于前后端安全交互使用）

  1. 紧凑
    数据量较少，并且能通过url参数，http请求提交的数据以及http header（请求头）的方式来传递。

  2. 自包含
    这个串可以包含很多信息，比如用户ID，订单号ID等，如果被其他人拿到该信息，也就可以拿到关键业务信息。

jwt组成

  • Header（头部） ：typ（Token的类型，JWT类型） + alg（Hash算法，‘HS256’）
  • Payload（负载）：包含一些声明，用来存放实际需要传递的数据
  • Signature（签名）：对上面两部分的签名，放篡改

2
例：

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

使用场景

  • 单点登录
    只需要登录一次，就可以访问其他相互信任的应用系统。详解
  • 无感刷新token
    用户浏览期间避免出现jwt过期进行登录情况，体验感不好，利用操作手段自动刷新jwt。详解

jwt认证流程

细品 🌝

  1. 客户端发送登录信息（用户名+密码）给服务器
  2. 校验登录信息，使用密钥创建jwt；返回jwt给客户端
  3. 客户端获取jwt后，保存至本地
  4. 客户端再次请求API数据时，携带到request header（请求头）内的Authorization属性上，发给服务器
  5. 服务器拿到jwt后，检查jwt是否有效，从jwt中获取用户信息
  6. 校验成功，服务器返回数据给客户端（校验失败状态码401（未授权，没有权限））

4

到这里就结束了，后续还会更新 前端 系列相关，还请持续关注！
感谢阅读，若有错误可以在下方评论区留言哦！！！

111


推荐文章👇
JSON Web Token 入门教程
一文教你搞定所有前端鉴权与后端鉴权方案，让你不再迷惘

Thetimezipsby
关注
专栏目录
PHP有关JWT(Json Web Token)的那些事
wgchen
09-06 284
PHP有关JWT(Json Web Token)的那些事
前端开发：关于鉴权的使用总结
软贱开发攻城狮
12-27 1971
前端开发过程中，关于鉴权（权限的控制）是非常重要的内容，尤其是前端和后端之间数据传递时候的请求鉴权校验。前端鉴权的本质就是控制前端视图层的显示和前端向后台所发送的请求，但是只有前端鉴权，没有后端鉴权是非常不合理的，前端的鉴权只是起到一个锦上添花的作用，虽然在前后端开发中程序的鉴权核心是在后端，但是前端鉴权也是很有必要的。那么本篇博文就来分享一下前端关于鉴权的使用总结，记录一下，方便查阅使用。前端鉴权，也叫前端身份认证，指的是验证用户是否具有系统的访问权限。
JSON Web Token （前端与后端对话密钥生成文件）
06-28
主要使用在用户登录的时候，结合 cookie 可以让用户在您的网站登陆以后 xx 天免登 token 生成文件，用于前后端数据传输时发送的密钥（暗语）。 直接解压后引用该文件即可 -- 后端在收到第一次请求的时候调用 私有的（p开头的） -- 前端发来密钥的时候调用 公用的进行判断是否正确 你也可以自己使用代码进行生成该对应文件 —————————————————————————————————— 生成私钥 - ssh-keygen -t rsa -b 2048 -f private.key —————————————————————————————————— 生成公钥 // window电脑不支持 openssl 代码，使用 git 提供的控制台书写即可 - openssl rsa -in private.key -pubout -outform PEM -out public.key
jsonwebtoken鉴权
桃树林
09-20 1216
jsonwebtoken.json(payload, secretOrPrivateKey, [options, callback]); payload 必须是一个object, buffer或者string，用来保存一些信息。 secretOrPrivateKey 是包含HMAC算法的密钥或RSA和ECDSA的PEM编码私钥的string或buffer。 options包括以下...
一文教你彻底搞定前后端所有鉴权方案，让你不再迷惘
最新发布
2401_83384536的博客
07-25 1046
还记得之前在面试的时候，有一位面试官就问了，关于前端鉴权这块，Token、Cookie、Session、JWT、单点登录是什么？有什么作用？你一般是怎么做的？以及你是怎么存储的呢？那你又是怎么保证它的安全的呢？一顿连问下来，我是焦头又烂额，欲言而又止.......其实鉴权的方法有很多，下面我总结了常用的10种鉴权方法，那么哪一种是最适合你的系统呢？哪一种又最安全呢？那就让我们从下文慢慢探索寻找答案吧 ~认证(Identification)是指根据声明者所特有的识别信息，确认声明者的身份。
node.js（第八章）登录鉴权方式二 JSON Web Token (JWT)
微光无限的博客
08-03 644
node.js（第八章）登录鉴权 JSON Web Token (JWT)
JWT（JSON WEB TOKEN）
S_ZaiJiangHu的博客
08-26 879
（4）JWT 的最大缺点是，由于服务器不保存 session 状态，因此无法在使用过程中废止某个 token，或者更改 token 的权限。也就是说，一旦 JWT 签发了，在到期之前就会始终有效，除非服务器部署额外的逻辑。单机当然没有问题，如果是服务器集群，或者是跨域的服务导向架构，就要求 session 数据共享，每台服务器都能够读取 session。算出签名以后，把 Header、Payload、Signature 三个部分拼成一个字符串，每个部分之间用"点"（.）分隔，就可以返回给用户。......
nodejs 使用jsonwebtoken进行权限验证
weixin_55510188的博客
12-30 4115
用session的方式不好实现跨域的权限验证。token保存在客户端，服务端只做token的签发和token的验证，所以jsonwebtoken可以实现跨域的权限验证。 在nodejs项目中封装一个使用jsonwebtoken进行token签发和token验证的模块。 // 导入jsonwebtoken const jwt = require('jsonwebtoken') // 本地的密钥，随便定义 const PRIVATEKET = 'huangweizhi' // token过期时间 con
什么是Json web token (JWT)，session，token，优点，缺陷
weixin_64875794的博客
02-23 709
JWT ---------------------------------------- Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息，以便于从资源服务器获取资源，也可以增加一些额外的其它业务逻辑所必须的声明信息。 传统的session认证 基于session认证所显露的问题 Session: 每个用户经过我们的应用认证之后，我们的应用都要在服务端做一次记录，以方便用户
JWT(Json Web Token 认证机制)
weixin_44543385的博客
03-13 293
什么是JWT Json web token ( JWT ), 是为了在网络应用环境间传递声明而执行的一种基于 JSON 的开放标准.该 token 被设计为紧凑且安全的，特别适用于分布式站点的单点登录（SSO）场景。 JWT 一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息，以便于从资源服务器获取资源，也可以增加一些额外的其它业务逻辑所必须的声明信息，该 token 也可直接被用于认证...
终于有人把前端鉴权讲明白了
Qingcloudedu的博客
10-26 1161
什么是鉴权 鉴权也叫身份认证，指验证用户是否有系统的访问权限。就很像我们经常乘坐动车的票据（对应的标识，一定的时间范围）。 认证方式 接下来介绍几种我们工作中通常用到的认证方式。 Session-Cookie 认证 利用服务端的 Session（会话）和浏览器（客户端）的 Cookie 来实现的前后端通信认证模式。 来源 由于 HTTP 请求时是无状态的，服务端正常情况下无法得知请求发送者的身份。这个时候如果我们要记录状态，就需要在服务端创建会话，将相同客户端的请求都维护在各自的会话记录中，每当请求到达服务
如何使用Jwt json web token 的鉴权机制？
2301_79577017的博客
06-25 124
1. 生成 JWT：当用户成功登录后，服务器将用户的信息（例如用户名、ID等）和密钥（secret key）一起加密，生成一个 JWT。5. 授权检查：服务器可能会检查 JWT 中包含的权限信息，以确定用户是否有权执行特定的操作。2. 携带 JWT：客户端（例如一个 web 浏览器或者一个移动应用）将这个 JWT 存储起来，并在后续的请求中携带这个 JWT。4. 检查用户信息：一旦服务器验证了 JWT 的有效性，它就可以检查 JWT 中包含的用户信息，以确定用户是否有权执行请求的操作。
jsonweb token验证问题
qq_44242030的博客
05-07 991
jwt 原理 客户端用户使用用户名和密码通过 POST 请求登录或注册 服务端确认用户合法，生成一个 JWT 将 JWT 返回给客户端，客户端将其保存在本地（一般保存在 localStorage 中） 之后客户端向服务端发送 HTTP 请求需要将 JWT 加入请求头中 服务器解析 JWT，检查是否合法且有效 根据检查结果对客户端做出响应 JWT 结构 服务端生成的 JWT 是一段很长的字符串...
JWT（json-web-token）技术来做前后端鉴权
kobezzZ的博客
09-08 471
1、每次请求都需要携带token字段，可以进行路由等权限的验证 2、做前后端验证健全。如果没有携带token去后台，后台会认为没有权限，直接抛出错误 3、发起一次登录请求，如果登录验证通过，后台返回数据会包括token字段，本地存储token字段，然后拿着token字段去后台请求对应的用户权限 4、客户端收到服务器返回的JWT字段，可以存储在cookie里面，也可以存储在localStorage里...
jsonwebtoken的使用
weixin_60409964的博客
07-12 635
在nodejs后端开发中,需要给前端返回token(令牌),使用 jsonwebtoken。使用 jsonwebtoken 生成 token。对 token 进行验证。
php是如何实现JWT(json web token)鉴权的呢？ 看实例详解
yang_ldgd的博客
03-10 477
JWT是json web token缩写。它将用户信息加密到token里，服务器不保存任何用户信息。服务器通过使用保存的密钥验证token的正确性，只要正确即通过验证。基于token的身份验证可以替代传统的cookie+session身份验证方法。 JWT由三个部分组成：header.payload.signature 以下示例以JWT官网为例 header部分： { "alg": "HS256", "typ": "JWT" } 对应base64UrlEncode编码为：eyJhbGciOiJIUzI
node js的token生成与验证之“jsonwebtoken“
Codernmx
07-24 2077
❤️在繁华中自律，在落魄中自愈❤️ 目录一、生成token二、验证token三、完整的jwt.js 代码四、配合express使用token验证五、/api/login接口中的配置六、前端请求拦截器和响应拦截 知道token的都不用多介绍，在node js 中使用的时候是需要引入 jsonwebtoken。 导入包 npm install jsonwebtoken -save 一、生成token //生成token const generateToken = function (user) { l.
JWT（JSON web token）的三个组成部分，使用 jwt 鉴权机制
qq_17335549的博客
11-07 1512
JWT
JWT及使用方法：json web token
Ben_boba的博客
08-01 626
深入理解鉴权机制：Session、Cookie与Token解析
2. Token或Jwt（JSON Web Tokens）：Token是一种轻量级的身份验证机制，它允许用户在不暴露实际凭据（如密码）的情况下进行认证。Jwt包含三部分：头部、载荷和签名，能够自包含用户信息，且易于验证。这种方式更适用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Thetimezipsby

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值