2024年前端最新JWT（JSON Web Token）的基本原理，2024年最新开发面试流程

最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

四、Header

---

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

{

“alg”: “HS256”,

“typ”: “JWT”

}

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

五、Payload

---

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

iss (issuer)：签发人

exp (expiration time)：过期时间

sub (subject)：主题

aud (audience)：受众

nbf (Not Before)：生效时间

iat (Issued At)：签发时间

jti (JWT ID)：编号

六、Signature

---

Signature 部分是对前两部分的签名，防止数据篡改。

首先，需要指定一个密钥（secret）。这个密钥只有服务器才知道，不能泄露给用户。然后，使用 Header 里面指定的签名算法（默认是 HMAC SHA256），按照下面的公式产生签名。

HMACSHA256(

base64UrlEncode(header) + “.” +

base64UrlEncode(payload),

secret)

算出签名以后，把 Header、Payload、Signature 三个部分拼成一个字符串，每个部分之间用"点"（.）分隔，就可以返回给用户。

七、JWT 的使用方式

---

客户端收到服务器返回的 JWT，可以储存在 Cookie 里面，也可以储存在 localStorage。

此后，客户端每次与服务器通信，都要带上这个 JWT。你可以把它放在 Cookie 里面自动发送，但是这样不能跨域，所以更好的做法是放在 HTTP 请求的头信息Authorization字段里面。

八、JWT 的几个特点

---

（1）JWT 默认是不加密，但也是可以加密的。生成原始 Token 以后，可以用密钥再加密一次。

（2）JWT 不加密的情况下，不能将秘密数据写入 JWT。

（3）JWT 不仅可以用于认证，也可以用于交换信息。有效使用 JWT，可以降低服务器查询数据库的次数。

（4）JWT 的最大缺点是，由于服务器不保存 session 状态，因此无法在使用过程中废止某个 token，或者更改 token 的权限。也就是说，一旦 JWT 签发了，在到期之前就会始终有效，除非服务器部署额外的逻辑。

（5）JWT 本身包含了认证信息，一旦泄露，任何人都可以获得该令牌的所有权限。为了减少盗用，JWT 的有效期应该设置得比较短。对于一些比较重要的权限，使用时应该再次对用户进行认证。

（6）为了减少盗用，JWT 不应该使用 HTTP 协议明码传输，要使用 HTTPS 协议传输。

九、基本语法

---

jwt.sign(payload, secretOrPrivateKey)：生成JWT字符串

jwt.verify(token,secretOrPublicKey):验证token的合法性

jwt.decode(token)

十、后台生成JWT

---

let express = require(‘express’);

let cors = require(‘cors’);

let jwt = require(‘jsonwebtoken’);

let app = express();

app.use(cors());

app.use(express.urlencoded({ extended: false }))

//模拟数据

let users = [{

id: 1,

username: ‘Kei’,

password: 123

}, {

id: 2,

username: ‘Lily’,

password: 456

}, {

id: 3,

username: ‘Zhang’,

password: 789

}]

const secret = ‘adjhgfeouwiemvcgdhjhlahujsnjfhdhusjhfdkjjdgjhhhikjm’

app.post(‘/login’, (req, res) => {

let flag = false; //默认失败

let username = req.body.username;

let password = req.body.password;

for (let i = 0; i < users.length; i++) {

if (users[i].username == username && users[i].password == password) {

flag = true;

res.send({

msg: ‘登录成功’,

token: jwt.sign({

userinfo: users[i],

exp: new Date().getTime() + 60000

}, secret)

})

return;

} else {

flag = false;

}

}

if (!flag) {

res.send({

msg: ‘登录失败，用户名或密码不存在’

})

}

})

app.listen(5000, function() {

console.log(5000);

})

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

() {

console.log(5000);

})

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-uXfDw8OF-1715583165969)]

[外链图片转存中…(img-oIHR6g3L-1715583165970)]