JS如何实现JWT？Token的验证-js教程-PHP中文网

JS如何实现JWT？Token的验证

星降

发布： 2025-08-16 08:51:01

原创

809人浏览过

jwt在javascript中的实现核心是生成和验证token，使用jsonwebtoken库在node.js环境可轻松完成，通过jwt.sign()生成带密钥和过期时间的token，并用jwt.verify()验证其有效性；浏览器端推荐使用jsrsasign库或从服务器获取token以避免密钥暴露；为防止token被窃取，应使用https、httponly cookie、短时效token配合服务器存储的refresh token机制；token过期时间需权衡安全与体验，通常短token（如1小时）用于常规请求，长refresh token用于续期；除jsonwebtoken外，还可选jose（支持现代算法）、njwt（轻量且支持加密）或jws（底层控制），根据需求选择合适方案，最终确保用户身份安全可靠地传递，整个流程完整闭环。

JS如何实现JWT？Token的验证

JWT (JSON Web Token) 在 JavaScript 中的实现，核心在于生成和验证 token。简单来说，就是把用户身份信息加密后放在一个字符串里，服务器和客户端可以通过这个字符串来确认用户身份，而不用每次都查数据库。Token验证确保token的有效性，防止伪造或篡改。

解决方案

选择JWT库: 在JavaScript中，你可以使用现成的JWT库来简化操作，比如
```
jsonwebtoken
```
登录后复制
(Node.js) 或
```
jsrsasign
```
登录后复制
(浏览器环境)。
```
jsonwebtoken
```
登录后复制
是 Node.js 环境下最常用的，而
```
jsrsasign
```
登录后复制
可以在浏览器端使用，因为它没有 Node.js 依赖。
安装依赖:
- Node.js (jsonwebtoken):
```
npm install jsonwebtoken
```
  登录后复制
- 浏览器 (jsrsasign): 你需要下载 jsrsasign 的 JavaScript 文件，然后在 HTML 中引入。

生成JWT (Node.js 示例):

const jwt = require('jsonwebtoken');

function generateToken(payload, secretKey, options = {}) {
  // payload: 你想放在 token 里的数据，比如用户ID、用户名等
  // secretKey:  一个只有服务器知道的密钥，用于签名 token
  // options:  可以设置 token 的过期时间等

  const token = jwt.sign(payload, secretKey, options);
  return token;
}

// 示例
const payload = { userId: 123, username: 'exampleUser' };
const secretKey = 'yourSecretKey'; // 强烈建议使用复杂的密钥！
const options = { expiresIn: '1h' }; // token 有效期为 1 小时

const token = generateToken(payload, secretKey, options);
console.log('Generated Token:', token);

登录后复制

验证JWT (Node.js 示例):

function verifyToken(token, secretKey) {
  try {
    const decoded = jwt.verify(token, secretKey);
    return decoded; // 返回解码后的 payload
  } catch (error) {
    // Token 验证失败，可能是过期、无效签名等
    console.error('Token verification failed:', error.message);
    return null;
  }
}

// 示例
const verifiedToken = verifyToken(token, secretKey);

if (verifiedToken) {
  console.log('Token is valid. Decoded payload:', verifiedToken);
  // 可以使用 decoded.userId 和 decoded.username 来获取用户信息
} else {
  console.log('Token is invalid.');
}

登录后复制

浏览器端实现 (使用 jsrsasign): 由于浏览器端没有文件系统，密钥管理会更复杂。通常不建议直接在浏览器端存储密钥。一个常见的做法是从服务器获取短期有效的 token。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

<script src="jsrsasign-all-min.js"></script>
<script>
  function generateTokenBrowser(payload, secretKey) {
    // 浏览器端的 JWT 生成...  (需要 jsrsasign 的 API，比较复杂)
    // 强烈建议不要在浏览器端存储 secretKey，而是从服务器获取 token
  }

  function verifyTokenBrowser(token, secretKey) {
    // 浏览器端的 JWT 验证... (需要 jsrsasign 的 API，比较复杂)
  }
</script>

登录后复制

JWT的安全性：如何防止token被窃取？

防止 JWT 被窃取是一个持续的挑战，没有银弹。使用 HTTPS 来加密客户端和服务器之间的通信是基础。更进一步，可以使用 HttpOnly cookie 来存储 JWT，这样 JavaScript 就无法直接访问 cookie，降低了 XSS 攻击的风险。还可以考虑使用短期 token，并配合 refresh token 来刷新 token，即使 token 被窃取，有效期也很短。最后，严格的输入验证和输出编码是防止 XSS 攻击的关键。

JWT过期时间设置多久合适？长token与短token的权衡

Token 过期时间的设置需要在安全性和用户体验之间找到平衡。短 token (例如 15 分钟到 1 小时) 可以降低 token 被盗后的风险，但用户需要更频繁地刷新 token。长 token (例如 7 天到 30 天) 提供了更好的用户体验，但如果 token 被盗，风险会更高。一种常见的做法是使用短 token 配合 refresh token。短 token 用于日常的 API 请求，而 refresh token 用于获取新的短 token。 Refresh token 的有效期可以更长，但需要存储在服务器端，并且需要进行额外的安全保护。另外，可以考虑根据用户的角色和权限来设置不同的 token 过期时间。

除了jsonwebtoken，还有哪些好用的JS JWT库？它们的优缺点是什么？

除了

jsonwebtoken

登录后复制

，还有一些其他的 JavaScript JWT 库，例如：

jose
登录后复制
: 更现代的库，支持更多的 JWA (JSON Web Algorithms) 算法，例如 ES256 和 EdDSA。它的 API 设计更偏向于 Web Crypto API，更适合现代 Web 应用。缺点是学习曲线可能稍陡峭。
nJwt
登录后复制
: 一个轻量级的 JWT 库，专注于性能和安全性。它支持 JWE (JSON Web Encryption)，可以加密 JWT 的内容，提供更高的安全性。缺点是 API 相对简单，功能不如
```
jsonwebtoken
```
登录后复制
丰富。
jws
登录后复制
: 更底层的库，提供了更细粒度的控制。你可以手动指定签名算法、头部参数等。缺点是使用起来比较复杂，需要对 JWT 的细节有深入的了解。