jwt(json web token)
主要是做鉴权用的登录之后存储用户信息
下面这段就是生成的token(令牌)
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNjg3Njc0NDkyLCJleHAiOjE2ODc3NjA4OTJ9.Y6eFGv4KXqUhlRHglGCESvcJEnyMkMwM1WfICt8xYC4
JWT是三部分组成的
- 头部（Header）：头部通常由两部分组成：令牌的类型（即 “JWT”）和所使用的签名算法。头部通常采用 JSON 对象表示，并进行 Base64 URL 编码。
{ "alg": "HS256", "typ": "JWT" }
alg：代表所使用的签名算法，例如 HMAC SHA256（HS256）或 RSA 等。
typ：代表令牌的类型，一般为 “JWT”。
- 负载（Payload）：负载包含所要传输的信息，例如用户的身份、权限等。负载也是一个 JSON 对象，同样进行 Base64 URL 编码。
{ "iss": "example.com", "exp": 1624645200, "sub": "1234567890", "username": "johndoe" }
iss：令牌颁发者（Issuer），代表该 JWT 的签发者。
exp：过期时间（Expiration Time），代表该 JWT 的过期时间，以 Unix 时间戳表示。
sub：主题（Subject），代表该 JWT 所面向的用户（一般是用户的唯一标识）。
自定义声明：可以添加除了预定义声明之外的任意其他声明。
- 签名（Signature）：签名是使用私钥对头部和负载进行加密的结果。它用于验证令牌的完整性和真实性。
HMACSHA256( base64UrlEncode(header) + "." + base64UrlEncode(payload), secretKey )
express jwt demo
安装
pnpm i express pnpm i jsonwebtoken pnpm i cors
import express from 'express'; import jwt from 'jsonwebtoken'; import cors from 'cors'; const app = express(); const secretKey = 'xmzs' //加盐 app.use(express.urlencoded({ extended: false })); app.use(express.json()); app.use(cors()) let user = { name: 'admin', password: '123456', id: 1 } //模拟用户信息 app.post('/api/login', (req, res) => { console.log(req.body) if (req.body.name == user.name && req.body.password == user.password) { res.json({ message: '登录成功', code: 200, token: jwt.sign({ id: user.id }, secretKey, { expiresIn: 60 * 60 * 24 }) //生成token }) } else { res.json({ message: '登录失败', code: 400 }) } }) app.get('/api/list', (req, res) => { console.log(req.headers.authorization) jwt.verify(req.headers.authorization as string, secretKey, (err, data) => { //验证token if (err) { res.json({ message: 'token失效', code: 403 }) } else { res.json({ message: '获取列表成功', code: 200, data: [ { name: '张三', age: 18 }, { name: '李四', age: 20 }, ] }) } }) }) app.listen(3000, () => { console.log('server is running 3000'); })
在这段代码中，设置了应用使用的中间件，包括处理 URL 编码和 JSON 格式数据的中间件以及跨域资源共享（CORS）中间件。
然后，定义了一个模拟的用户信息对象 user，包含了用户名、密码和用户 ID。
接下来，设置了一个 /api/login 的 POST 路由，用于用户登录验证。当接收到请求时，比较请求体中的用户名和密码与预设的 user 对象中存储的用户名和密码是否匹配。如果匹配，则返回登录成功的 JSON 响应，并使用 jsonwebtoken 的 sign 方法生成一个 JWT，其中包含用户的 ID 信息，并设置了过期时间为 24 小时。
如果用户名和密码不匹配，则返回登录失败的 JSON 响应。
接着，设置了一个 /api/list 的 GET 路由，用于获取列表数据。当接收到请求时，从请求头中获取存储的 JWT（通过 req.headers.authorization），并使用 jsonwebtoken 的 verify 方法验证 JWT 的有效性。如果验证失败，则返回 token 失效的 JSON 响应；如果验证通过，则返回成功获取列表数据的 JSON 响应，并返回一些模拟的数据。
最后，通过调用 app.listen 方法启动应用，监听在 3000 端口上，并输出服务器运行的提示信息。
这段代码实现了基本的用户登录验证和通过 JWT 鉴权的接口，在登录成功后生成的 JWT 中包含了用户的 ID 信息，从而在后续请求中进行验证和授权
前端
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <div> <span>账号</span> <input id="name" type="text"> </div> <div> <span>密码</span> <input id="password" type="password"> </div> <button id="btn">登录</button> </div> <script> const btn = document.querySelector('#btn') const name = document.querySelector('#name') const password = document.querySelector('#password') btn.onclick = () => { fetch('http://localhost:3000/api/login', { body: JSON.stringify({ name: name.value, password: password.value }), headers: { 'Content-Type': 'application/json' }, method: 'POST', }).then(res => res.json()).then(res => { localStorage.setItem('token', res.token) location.href = './list.html' }) } </script> </body> </html>
list.html 如果没有token就访问不了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>List</title> </head> <body> <script> console.log(localStorage.getItem('token')) fetch('http://localhost:3000/api/list', { headers: { 'Authorization':`Bearer ${localStorage.getItem('token')}` } }).then(res => res.json()).then(res => { console.log(res) }) </script> </body> </html>
