javascript 无法使用jwt-decode解码jwt

chhqkbe1  于 12个月前  发布在  Java
关注(0)|答案(7)|浏览(177)

我试图用jwt-decode解码我的令牌,但是我不能。它给了我以下错误。有人知道为什么吗?
ERROR错误:承诺(Promise):类型错误:jwt_decode_1.default不是函数类型错误:jwt_decode_1.default不是RoleGuardService的函数。canActivate(role-guard.service.ts?d 7 c4:19)

import jwt_decode from 'jwt-decode';

canActivate(route: ActivatedRouteSnapshot): boolean {
        // this will be passed from the route config
        // on the data property
        const expectedRole = route.data.expectedRole;
        const token = localStorage.getItem('token');
        // decode the token to get its payload
        const tokenPayload = jwt_decode(token);
        console.log(tokenPayload);
        if (
            !this.auth.isAuthenticated() ||
            tokenPayload.role !== expectedRole
        ) {
            this.router.navigate(['login']);
            return false;
        }
        return true;
    }

字符串

vhmi4jdf

vhmi4jdf1#

我认为你应该像这样导入:

import * as jwt_decode from 'jwt-decode';

字符串

e5njpo68

e5njpo682#

根据documentation +互联网搜索,正确的方法是:

1.安装包+类型

第一个月
npm install --save @types/jwt-decode
1.当你导入jwt_decode时,你应该超越tslint的一个规则,你的代码看起来会像这样(上面有注解行)

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

字符串
否则,您将得到这样的错误

你也可以在tslog.json上添加规则,但这是一次例外:)

iq3niunx

iq3niunx3#

我有同样的错误,但经过多次尝试,我没有设法解决这个问题,使用另一种方法:

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

字符串
函数atob()references

gt0wga4j

gt0wga4j4#

jwt_decode一直是CommonJS模块,通常作为const jwt_decode = require('jwt-decode');导入,这是Node.js使用的。

使用JS import语句导入CommonJS库的方法是import * as library-name from 'library-name;
像Angular 10这样的现代框架在使用CommonJS格式的包时会抛出一个警告,因为它们通常不能被树摇动。
这个库的第3版(现在是beta版)包含了一个更现代的ESM构建,这就是JS import语句的目的,所以导入现代ESM包可以使用import jwt_decode from 'jwt-decode';以常规方式完成。这是一个突破性的变化,这就是为什么我创建了一个新的主要版本3
我们仍然有一个CommonJS构建,但默认情况下,大多数现代Web构建系统(而不是Node)将使用ESM构建。
如果你在安装lib的时候 checkout package.json文件,你会注意到两个版本都在里面。

{
    ...
    "main": "build/jwt-decode.cjs.js",
    "module": "build/jwt-decode.esm.js",
    ...
}

字符串
references

y53ybaqx

y53ybaqx5#

这将为您解决问题:

import base64 from 'react-native-base64'; export const decode = (token) => {
    try {
        return JSON.parse(base64.decode(token.split(".")[1]));
    } catch (e) {
        console.log("Error decoding token:", e);
        return null;
    }
}

字符串

csga3l58

csga3l586#

npm install --legacy-peer-deps

npm install --save jwt-decode

npm install --save @types/jwt-decode

字符串
这解决了我的问题
reference

t30tvxxf

t30tvxxf7#

这在react-native CLI中很有用。
Package: npm i base-64

import {decode} from 'base-64';
global.atob = decode;

const decodeToken = (token: string) => {
  try {
    return JSON.parse(decode(token.split('.')[1]));
  } catch (err) {
    console.log('error', err);
    return null;
  }
};

const decodedResult = await decodeToken(token as string); // Your token

字符串

相关问题