0

0

JS如何实现JWT?Token的验证

星降

星降

发布时间:2025-08-16 08:51:01

|

831人浏览过

|

来源于php中文网

原创

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的有效性,防止伪造或篡改。

解决方案

  1. 选择JWT库: 在JavaScript中,你可以使用现成的JWT库来简化操作,比如

    jsonwebtoken
    (Node.js) 或
    jsrsasign
    (浏览器环境)。
    jsonwebtoken
    是 Node.js 环境下最常用的,而
    jsrsasign
    可以在浏览器端使用,因为它没有 Node.js 依赖。

  2. 安装依赖:

    • Node.js (jsonwebtoken):
      npm install jsonwebtoken
    • 浏览器 (jsrsasign): 你需要下载 jsrsasign 的 JavaScript 文件,然后在 HTML 中引入。
  3. 生成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);
  4. 验证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.');
    }
  5. 浏览器端实现 (使用 jsrsasign): 由于浏览器端没有文件系统,密钥管理会更复杂。通常不建议直接在浏览器端存储密钥。一个常见的做法是从服务器获取短期有效的 token。

    Otter.ai
    Otter.ai

    一个自动的会议记录和笔记工具,会议内容生成和实时转录

    下载
    
    

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 的细节有深入的了解。

选择哪个库取决于你的具体需求。 如果你需要支持最新的 JWA 算法,

jose
是一个不错的选择。 如果你更关注性能和安全性,
nJwt
值得考虑。 如果你需要对 JWT 进行更细粒度的控制,
jws
可能会更适合你。 而
jsonwebtoken
则是一个成熟、稳定、易于使用的选择,适合大多数场景。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

419

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

535

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

311

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

77

2025.09.10

cookie
cookie

Cookie 是一种在用户计算机上存储小型文本文件的技术,用于在用户与网站进行交互时收集和存储有关用户的信息。当用户访问一个网站时,网站会将一个包含特定信息的 Cookie 文件发送到用户的浏览器,浏览器会将该 Cookie 存储在用户的计算机上。之后,当用户再次访问该网站时,浏览器会向服务器发送 Cookie,服务器可以根据 Cookie 中的信息来识别用户、跟踪用户行为等。

6427

2023.06.30

document.cookie获取不到怎么解决
document.cookie获取不到怎么解决

document.cookie获取不到的解决办法:1、浏览器的隐私设置;2、Same-origin policy;3、HTTPOnly Cookie;4、JavaScript代码错误;5、Cookie不存在或过期等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

347

2023.11.23

阻止所有cookie什么意思
阻止所有cookie什么意思

阻止所有cookie意味着在浏览器中禁止接受和存储网站发送的cookie。阻止所有cookie可能会影响许多网站的使用体验,因为许多网站使用cookie来提供个性化服务、存储用户信息或跟踪用户行为。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

413

2024.02.23

cookie与session的区别
cookie与session的区别

本专题整合了cookie与session的区别和使用方法等相关内容,阅读专题下面的文章了解更详细的内容。

93

2025.08.19

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

1

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PostgreSQL 教程
PostgreSQL 教程

共48课时 | 8万人学习

Laravel---API接口
Laravel---API接口

共7课时 | 0.6万人学习

PHP面向对象基础课程(更新中)
PHP面向对象基础课程(更新中)

共12课时 | 0.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号