JWT 鉴权机制：剖析和完整实现

前端

2024-01-15 06:35:34

JWT 鉴权机制的概念和工作原理

JWT（JSON Web Token）是一种轻量级、紧凑的令牌，用于在两个 parties 之间安全地传输信息。JWT 本质上是一个字符串，由三个部分组成：header、payload 和 signature。

Header： 包含有关 JWT 的元数据，例如其类型和使用的算法。
Payload： 包含有关用户或应用程序的数据。
Signature： 由 header 和 payload 计算得出，用于确保 JWT 的完整性和真实性。

JWT 通常由服务器生成并发送给客户端。客户端将 JWT 存储在 cookie、本地存储或 HTTP 授权头中。当客户端需要访问受保护的资源时，它会将 JWT 包含在请求中。服务器将验证 JWT，如果有效，则授予客户端访问资源的权限。

JWT 具有以下优点：

轻量级和紧凑： JWT 非常小，可以轻松地在网络上传输。
安全： JWT 使用加密签名来确保其完整性和真实性。
无状态： JWT 不存储在服务器上，因此服务器无需维护会话状态。
跨域： JWT 可以跨域使用，这对于单点登录 (SSO) 等场景非常有用。

JWT 也有一些缺点：

不适合存储敏感数据： JWT 的 payload 是未加密的，因此不适合存储敏感数据。
容易受到重放攻击： JWT 是一种无状态协议，因此容易受到重放攻击。
需要安全地存储和管理密钥： JWT 使用密钥来生成签名，因此需要安全地存储和管理这些密钥。

JWT 鉴权机制的完整实现

接下来，我们将逐步构建一个完整的 JWT 实现，包括前端和后端的代码示例。

前端代码

在前端，我们需要使用 JavaScript 库来处理 JWT。我们推荐使用 jsonwebtoken 库。

首先，我们需要安装 jsonwebtoken 库：

npm install jsonwebtoken

然后，我们可以使用 jsonwebtoken 库来解析 JWT：

const jwt = require('jsonwebtoken');

const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c';

const decoded = jwt.decode(token);

console.log(decoded);

输出：

{
  sub: '1234567890',
  name: 'John Doe',
  iat: 1516239022
}

后端代码

在后端，我们需要使用一个库来生成和验证 JWT。我们推荐使用 express-jwt 库。

首先，我们需要安装 express-jwt 库：

npm install express-jwt

然后，我们可以使用 express-jwt 库来生成和验证 JWT：

const express = require('express');
const expressJwt = require('express-jwt');

const app = express();

app.use(
  expressJwt({
    secret: 'secret',
    algorithms: ['HS256'],
  })
);

app.get('/protected', (req, res) => {
  res.send('Welcome to the protected route!');
});

app.listen(3000);