token的使用流程以及 JWT构成和构建

token是一个令牌，是前后端开发时的一个验证工具，（就是一个字符串）

我们先解释一下他的含义：

1、Token的引入：Token是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并作出相应提示，在这样的背景下，Token便应运而生。

2、Token的定义：Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。

3、使用Token的目的：Token的目的是为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。

了解了Token的意义后，我们就更明确的知道为什么要用他了

2.token的使用流程

---

1.前端向后端传递用户名和密码

2.后端将接收到的的用户名和密码进行核实

3.后端核实成功后会，返回给前端一个token（或者直接将token保存在cookie中）；

4.前端得到token 并对其进行保存

5.如果前端请求隐私的接口（比如需要登陆后才能查看商品的详细信息），则需要传递保存的token（进行ajax请求时，将信息放在请求头中）

6.后端对其进行验证，如果token错误，则请求不到数据，返回给前端相应的提示

如果token验证正确，则 获取相应的数据，并返回给前端

3.JWT的构成

---

JWT是由三部分构成，将这三段信息文本用链接构成了JWT字符串，    header + payload +secret = 加密的字符串 1.header 头部 2.payload 负载-------写相关的信息 　　{ 　　　　user:"签发者"， 　　　　exp:"token过期时间"//必须大于签发时间 　　} 3.secret 密钥------用来进行jwt的签发和jwt的验证，它就是你服务端的私钥，在任何场景都不应该流露出去实际的 JWT 大概就像下面这样

它是一个很长的字符串，中间用点（.）分隔成三个部分。注意，JWT 内部是没有换行的，这里只是为了便于展示，将它写成了几行。

JWT 的三个部分依次如下。

• Header（头部）

• Payload（负载）

• Signature（签名）

写成一行，就是下面的样子。

Header.Payload.Signature

1 Header

Header 部分是一个 JSON 对象，描述 JWT 的元数据，通常是下面的样子。

{

“alg”: “HS256”,

“typ”: “JWT”

}

上面代码中，alg属性表示签名的算法（algorithm），默认是 HMAC SHA256（写成 HS256）；typ属性表示这个令牌（token）的类型（type），JWT 令牌统一写为JWT。

最后，将上面的 JSON 对象使用 Base64URL 算法（详见后文）转成字符串。

2 Payload

Payload 部分也是一个 JSON 对象，用来存放实际需要传递的数据。JWT 规定了7个官方字段，供选用。

• iss (issuer)：签发人

• exp (expiration time)：过期时间

• sub (subject)：主题

• aud (audience)：受众

• nbf (Not Before)：生效时间

• iat (Issued At)：签发时间

• jti (JWT ID)：编号

除了官方字段，你还可以在这个部分定义私有字段，下面就是一个例子。

{

“sub”: “1234567890”,

“name”: “John Doe”,

“admin”: true

}

注意，JWT 默认是不加密的，任何人都可以读到，所以不要把秘密信息放在这个部分。

这个 JSON 对象也要使用 Base64URL 算法转成字符串。

4.后端JWT的构建

---

// 1.下载包

npm install jsonwebtoken --save-dev

// 2.引入

var JWT = require(“jsonwebtoken”);

//负载信息

let payload = {

user:“sun”,

// exp:“1000 * 60”//单位 ms

}

//密钥

let secret = “123456”;

//生成token，exporesIn为过期时间，单位：ms/h/days/d eg:1000, “2 days”, “10h”, “7d”

let token= JWT.sign(payload,secret,{expiresIn:“1h”})

//将token保存在cookie中

res.cookie(“token”,token);

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦，如果有需要前端校招面试题PDF完整版的朋友可以点击这里即可获取，包括答案解析。

续更新！**

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦，如果有需要前端校招面试题PDF完整版的朋友可以点击这里即可获取，包括答案解析。

[外链图片转存中…(img-ciOBF7st-1712958693972)]