node中使用jsonwebtoken 解析jwt token时报 invalid token的解决办法

最新推荐文章于 2025-02-21 08:03:28 发布
原创 最新推荐文章于 2025-02-21 08:03:28 发布 · 6.6k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文记录了解决前端使用JWT生成并验证token时，因未移除空格导致的登录失败问题，分享解决方法和踩坑经验。

出现背景，登录时根据jwt使用生成token，如下图

 

然后登录成功时根据后台返回的token解析jwt令牌，关键部分代码如下

前端点击登录会出现invalid token报错，如下图

就在我百思不得其解百度了各种办法都试了没效果之后，突然发现我没有把token前的空格去掉

解决办法：

此篇仅作为我的踩坑记录

caimaomaocai
关注
【JWT】Asp.Net Core中JWT刷新Token解决方案
德仔
11-06 1282
1.关于JWT的Token过期问题,到底设置多久过期？(1).有的人设置过期时间很长，比如一个月，甚至更长，等到过期了退回登录页面,重新登录重新获取token，期间登录的时候也是重新获取token，然后过期时间又重置为了1个月。这样一旦token被人截取，就可能被人长期使用，如果你想禁止，只能修改token颁发的密钥，这样就会导致所有token都失效，显然不太可取。(2).有的人设置比较短，比如10分钟，在使用过程中，一旦过期也是退回登录页面，这样就可能使用过程中经常退回登录页面，体验很不好。
JWT 使用教程：如何在项目中实现 JSON Web Token
weixin_73426010的博客
03-08 2676
JSON Web Token (JWT) 是一种开放标准（RFC 7519），它定义了一种紧凑且独立的方式，用于在客户端和服务器之间安全地传递信息。信息可以被验证和信任，因为它是数字签名的。JWT 主要用于认证和授权场景，常见于现代 Web 应用、移动应用以及微服务架构中。
ASP.NET JWT认证失败响应：从默认到自定义的优雅改造
dotNET跨平台
02-21 100
本文主要介绍如何通过ASP.NET Core的JwtBearerEvents机制，实现JWT认证失败响应的深度定制。1. 背景在之前的文章《一个简单的ASP.NET一致性返回工具库》中，我们介绍了Sang.AspNetCore.CommonLibraries这一通用库，它通过统一API响应模型和标准化的提示页面，显著提升了ASP.NET Core项目的开发效率。然而，当项目集成JWT（JSO...
详解Spring Boot中的JWT令牌管理策略
Trouvailless的博客
05-25 576
为了安全起见，使用无状态JWT令牌时可以使用短时限TTL(1分钟)策略，然后这些令牌会在其生存时间内及时刷新。如果服务器不知道用户何时注销，那么可以继续刷新已注销用户的令牌。本文将提供针对这个问题的一种解决方案，使之在保持水平扩展性的同时确保安全性能不受影响。 架构设计 从图中展示的体系架构可见，每个微服务都有自己的数据库。被撤销的令牌和用户都需要单一(身份)信息源(Single Source of Truth，简称“SSOT”)。数据库需要具有高可用性，包括多主机、热备份及数据库的其他功能。其
eggjs 怎么使用 egg-jwt 实现登录验证中间件？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
01-20 1974
为什么要写验证中间件？原因很简单，就是将重复的逻辑抽离出来，用于校验需要校验的接口。还可以避免逻辑改动导致所有接口逻辑调整，提高代码的可维护性。
vue项目使用jwt token验证登录 报错token无效验证失败 【已解决】
qq_40715438的博客
11-21 4595
检查了所有代码都没有问题，在所有需要token的地方都能拿到正确的token，但是在verify时仍然走的err，打印出的错误为 invalid token 最后在外网查到有人在获取token时使用了split，才注意到直接从请求头拿到的token打印出来是带双引号的，而这个双引号也被当做token的一部分进行验证了 把头尾的双引号去掉再做验证就成功了 ...
JWT token无效invalid signature
qq_40202812的博客
08-20 1万+
django+ JWT 生成发token无效 请求需要验证的接口，返回 invalid signature 我的user模型是这样的 后面看https://www.jianshu.com/p/f0a55f39dfa8链接说，jwt生成token时默认是需要用到username，并且username需要保证唯一，或者重写UserManager的get_by_natura...
在node中使用jwt签发与验证token的方法
10-17
总结来说，在Node.js中使用JWT签发与验证token，需要理解JWT的结构，正确安装和使用`jsonwebtoken`库，同时确保在签发和验证时使用相同的秘钥。这样可以实现安全的身份验证和授权流程，提高应用的安全性。在实际应用...
JWT认证机制在Node.js中的详细阐述
12-22 1416
JWT认证机制在Node.js中的详细阐述 ，结合代码举例子。
jwt laravel 使用 jwttoken解析token jwt生成token jwt令牌验证
weixin_30345577的博客
04-01 1649
本文介绍jwt token在laravel中的安装使用，解决token验证的问题 一、查看laravel版本选定适合自己框架的jwt版本，不同版本之间会有意想不到的惊喜(坑) 根据自己laravel版本不同使用jwt-auth版本建议如下： Laravel versionjwt-auth version 4.* 0.3.*0.4.* 5.*&am...
使用JWT校验token时，有token但是token无效问题
qq_45282682的博客
12-21 2572
python invalid token
记录
03-01 1万+
sql = ''' year=%d and month=5d''' %(2019,03) 结果报invalid token 原因如下： 解决： 原文地址：https://stackoverflow.com/questions/36386346/syntaxerror-invalid-token
JSON Web Token
m0_54355172的博客
11-28 8066
JWT
Python SyntaxError: invalid token
any__fly的博客
07-16 8868
Python SyntaxError: invalid tokenStudentID = 070509Python中数字前加‘0’代表8进制，9超出了界限，所以BUG了
vue3 typescript报错Can‘t resolve ‘jsonwebtoken‘和import require导入报错
weixin_43292547的博客
08-13 3497
参考https://stackoverflow.com/questions/54162297/module-not-found-error-cant-resolve-crypto。3，报错Can’t resolve ‘stream’ in 'D:\workspace\vue\vue3demo\node_modules\jws\lib’等。发生这种情况的原因是，当您的 run ng serve 时，它会捆绑您在 package.json。4，报错Can’t resolve ‘jsonwebtoken’....
前端出现401 token invalid（令牌无效）
Aflowerseed的博客
07-25 1万+
前端401 前后端分离开发项目，登录的时候出现跨域问题，就是根据网上的额方式解决了。登录成功后调用接口，调试的时候在Network出现的，就是这样 后端控制台显示 token invalid（令牌无效），经过长时间的查找，终于解决了，如下： //为了方便，写的简陋一点，希望有所帮助（我也是这么过来的：哭泣） var jwt = (jwt就是从后端获取到的token)； function u(){ $.ajax({ cache: false,
访问接口页面报{“msg“:“invalid token“,“code“:401}
热门推荐
m0_49602236的博客
10-15 3万+
访问接口页面报{“msg”:“invalid token”,“code”:401} 检查步骤： 1.检查接口处的@RequiresPermissions（“”）权限控制是否注释 2.shiroFilter.class中是否开放了接口 3.检查访问路径，及配置文件中的接口配置 由于以上的配置文件处写多了xxx，导致接口无法访问，所以去掉“/”后面的xxx就可以访问得到了 本人就是被自己挖的坑给埋了，新人上路，记录一下！！ ...
遇到：SyntaxError: invalid token 错误应该如何解决
牛肉胡辣汤
08-04 1万+
遇到 "SyntaxError: invalid token" 错误通常表示你的代码中存在语法错误，导致无法正确解析和执行代码。
ts 如何 解析 jwt token
最新发布
11-01
<think>我们需要在TypeScript中解析JWT（JSON Web Token）。JWT由三部分组成：头部（Header）、负载（Payload）和签名（Signature），它们之间用点（.）分隔。解析JWT通常包括以下步骤： 1. 将JWT按点拆分成三个部分。 2. 对头部和负载进行Base64Url解码。 3. 将解码后的头部和负载解析为JSON对象。 注意：我们这里只做解析，不验证签名，因为验证签名需要密钥和算法，并且通常需要依赖库（如jsonwebtoken）。这里我们只关注如何从JWT字符串中提取信息。 步骤： 1. 分割字符串，得到三个部分：header, payload, signature。 2. 对header和payload进行Base64Url解码（Base64Url解码需要将URL安全的Base64转换为标准Base64，即替换字符并处理填充）。 3. 将解码后的字符串解析为JSON对象。 注意：Base64Url与标准Base64的不同之处在于： - 替换'+'为'-' - 替换'/'为'_' - 去掉填充'='（但解码时我们需要补足等号以保证正确解码） 在TypeScript（JavaScript）中，我们可以使用`Buffer`（Node.js环境）或`atob`（浏览器环境）来进行Base64解码。这里我们假设在Node.js环境中使用Buffer。 但是，为了通用性，我们可以写一个函数来处理Base64Url解码。如果是在浏览器环境中，我们可以使用`atob`，但需要先替换字符并补足等号。 由于问题没有指定环境，我将提供一个适用于Node.js环境的解决方案，因为TypeScript通常运行在Node.js环境或浏览器环境。这里我们以Node.js为例。 代码示例： </think>在 TypeScript 中解析 JWT Token 不需要额外依赖第三方库，可通过原生 JavaScript 实现。以下是详细实现和解析逻辑： ```typescript /** * 解析 JWT Token 的函数 * @param token JWT 字符串 * @returns 解析后的 payload 对象 */ function parseJwt(token: string): Record<string, any> | null { try { // 1. 分割 Token 的三部分 const parts = token.split('.'); if (parts.length !== 3) { throw new Error('Invalid JWT format'); } // 2. 提取 Base64Url 编码的 payload const payloadBase64Url = parts[1]; // 3. Base64Url 转标准 Base64 const payloadBase64 = payloadBase64Url .replace(/-/g, '+') .replace(/_/g, '/'); // 4. 补全 Base64 末尾的等号 const paddedPayloadBase64 = payloadBase64.padEnd( payloadBase64.length + (4 - (payloadBase64.length % 4)) % 4, '=' ); // 5. 解码并解析 JSON const jsonPayload = decodeURIComponent( atob(paddedPayloadBase64) .split('') .map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)) .join('') ); return JSON.parse(jsonPayload); } catch (error) { console.error('JWT 解析失败:', error); return null; } } // 使用示例 const jwtToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c'; const payload = parseJwt(jwtToken); console.log('解析结果:', payload); /* 输出: { "sub": "1234567890", "name": "John Doe", "iat": 1516239022 } */ ``` ### 关键步骤解释： 1. **分割 JWT 结构** JWT 格式为 `header.payload.signature`，使用 `.` 分割后取第二部分（索引1）的 payload 2. **Base64Url 解码** JWT 使用 URL 安全的 Base64 编码（Base64Url），需进行转换： - 将 `-` 替换为 `+` - 将 `_` 替换为 `/` - 补全末尾的 `=` 填充符（Base64 要求长度是4的倍数） 3. **解码 UTF-8 数据** 使用 `atob()` 解码 Base64 后，通过 URI 组件解码处理特殊字符： - 将每个字符转换为 `%xx` 十六进制格式 - 使用 `decodeURIComponent` 还原原始字符串 4. **JSON 解析** 将解码后的字符串解析为 JavaScript 对象 ### 使用注意事项： 1. **签名验证** 此方法 **仅解析** payload，不验证签名合法性。生产环境中应使用 `jsonwebtoken` 等库进行完整验证： ```bash npm install jsonwebtoken @types/jsonwebtoken ``` ```typescript import jwt from 'jsonwebtoken'; const verified = jwt.verify(token, 'YOUR_SECRET_KEY'); ``` 2. **Token 过期检查** 解析后可检查 `exp` 字段（Expiration Time）判断是否过期： ```typescript if (payload.exp && payload.exp * 1000 < Date.now()) { throw new Error('Token expired'); } ``` 3. **浏览器兼容性** `atob` 在浏览器中可用，Node.js 环境需使用 `Buffer`： ```typescript // Node.js 替代方案 const jsonPayload = Buffer.from(paddedPayloadBase64, 'base64').toString('utf-8'); ```
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值