JWT json web token

简介: JWT json web token

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>
目录
相关文章
|
10天前
|
JSON 前端开发 JavaScript
前端使用lottie-web,使用AE导出的JSON动画贴心教程
前端使用lottie-web,使用AE导出的JSON动画贴心教程
|
6天前
|
JSON 算法 数据安全/隐私保护
聊聊 JSON Web Token (JWT) 和 jwcrypto 的使用
本文介绍了 JSON Web Token (JWT) 和 Python 中的 `jwcrypto` 库。JWT 是一种用于安全传输信息的紧凑型令牌,常用于身份验证。它由 Header、Payload 和 Signature 三部分组成,具有紧凑性、自包含和安全性等特点。`jwcrypto` 库提供了 JWT 的生成、验证、加密、解密及签名功能。通过该库,可以使用 RSA 等算法创建和验证 JWT,同时管理密钥对。安装 `jwcrypto` 可用 `pip install jwcrypto`,并示例展示了如何生成签名 JWT 和密钥对。
聊聊 JSON Web Token (JWT) 和 jwcrypto 的使用
|
11天前
|
XML JSON 前端开发
【Web 前端】XML和JSON的区别?
【4月更文挑战第22天】【Web 前端】XML和JSON的区别?
【Web 前端】XML和JSON的区别?
|
11天前
|
JSON 安全 API
【专栏】四种REST API身份验证方法:基本认证、OAuth、JSON Web Token(JWT)和API密钥
【4月更文挑战第28天】本文探讨了四种REST API身份验证方法:基本认证、OAuth、JSON Web Token(JWT)和API密钥。基本认证简单但不安全;OAuth适用于授权第三方应用;JWT提供安全的身份验证信息传递;API密钥适合内部使用。选择方法时需平衡安全性、用户体验和开发复杂性。
|
7月前
|
存储 JSON 安全
解锁互联网安全的新钥匙:JWT(JSON Web Token)
解锁互联网安全的新钥匙:JWT(JSON Web Token)
107 0
|
7月前
|
JSON 数据格式
ABAP 里生成 JSON Web Token(JWT) 的做法
ABAP 里生成 JSON Web Token(JWT) 的做法
42 0
|
11天前
|
存储 JSON 算法
为什么JSON Web Token对于应用程序中的会话管理很有用
为什么JSON Web Token对于应用程序中的会话管理很有用
|
11天前
|
JSON 安全 算法
JSON Web Token(缩写 JWT) 目前最流行、最常见的跨域认证解决方案
JSON Web Token(缩写 JWT) 目前最流行、最常见的跨域认证解决方案
226 0
|
5月前
|
JSON 算法 数据库
JWT(JSON Web Token)的基本原理
JWT(JSON Web Token)的基本原理
|
6月前
|
JSON NoSQL Redis
Json Web Token
Json Web Token
26 0

热门文章

最新文章