无法使用jwt-decode解码jwt

8 浏览
0 Comments

无法使用jwt-decode解码jwt

我正在尝试使用jwt-decode解码我的令牌，但是无法成功。它给出了以下错误。有人知道为什么吗？

错误错误：未捕获（在承诺中）：TypeError：jwt_decode_1.default不是一个函数TypeError：jwt_decode_1.default不是一个函数

在RoleGuardService.canActivate(role-guard.service.ts?d7c4:19)处

import jwt_decode from 'jwt-decode';
canActivate(route: ActivatedRouteSnapshot): boolean {
    // 这将从路由配置中传递
    // 在数据属性上
    const expectedRole = route.data.expectedRole;
    const token = localStorage.getItem('token');
    // 解码令牌以获取其有效载荷
    const tokenPayload = jwt_decode(token);
    console.log(tokenPayload);
    if (
        !this.auth.isAuthenticated() ||
        tokenPayload.role !== expectedRole
    ) {
        this.router.navigate(['login']);
        return false;
    }
    return true;
}

0

3 答案

0 Comments

无法解码jwt与jwt-decode的问题可能出现的原因是：jwt-decode方法无法正确解码jwt令牌。解决方法是使用另一种方法来解码jwt令牌，即通过将令牌拆分为头部、负载和签名，并使用atob函数进行Base64解码，然后使用JSON.parse解析负载部分。

以下是解决问题的代码示例：

private decode(token: string) {
    try {
        return JSON.parse(atob(token.split(".")[1]));
    } catch (e) {
        console.log("error decoding token");
    }
}

在这个方法中，我们首先将jwt令牌通过split函数拆分为头部、负载和签名，然后使用atob函数对负载部分进行Base64解码。最后，我们使用JSON.parse方法将解码后的负载部分转换为JavaScript对象。

atob函数是一个内置的JavaScript方法，用于对Base64编码的字符串进行解码。你可以在MDN文档中找到更多关于atob函数的信息。

通过使用这种方法，我们可以成功解码jwt令牌，并将其转换为JavaScript对象，以便进一步处理和使用。如果解码出现错误，我们可以在控制台输出错误消息。

希望这个解决方法对你有帮助！

0
0 Comments

根据文档和互联网搜索，正确的方法如下：

1. 安装包 + 类型

npm install --save jwt-decode

npm install --save /jwt-decode

2. 当导入jwt_decode时，应该遵循tslint的规则。代码将如下所示（上方是注释的行）：

// -ignore  
import jwt_decode from "jwt-decode";

否则，将会出现如下错误：

enter image description here

你也可以在tsconfig.json中为此添加规则，但这只是一次性的例外。

这种方法是可行的，但为什么不能使用import { JwtDecode } from 'jwt-decode'的表示方式呢？

0
0 Comments

Unable to decode jwt with jwt-decode问题的出现的原因是在Angular 10中无法正确导入jwt-decode库。当调用jwt_decode函数时，会收到一个运行时错误，指出jwt_decode__WEBPACK_IMPORTED_MODULE_4__不是一个函数。

同样的问题也出现在其他地方，但我忽略了jwt_decode 3的新导入方式。通过按照下面的建议进行导入，问题得到了解决。

警告：从版本2升级到版本3时，可能会有一个潜在的破坏性变化。如果之前将库导入为import * as jwt_decode from 'jwt-decode'，则需要将导入更改为import jwt_decode from 'jwt-decode'。

解决方法：将导入方式更改为import jwt_decode from 'jwt-decode'。

0