jwtDecode - InvalidTokenError：指定的令牌无效：第 2 部分的 base64 无效（属性“atob”不存在）]

Question

因此，我正在学习 Mosh 在 Code with Mosh 上开设的关于 React Native 的在线课程，尽管有些东西已经过时并且我必须找到解决方法，但一切都进展顺利。直到我读到最后一章“身份验证和授权”。我们在本地托管了一个预制的小型服务器，它为用户设置了 JWT 令牌系统，这一切都很好。我们做了一个 POST，发送了注册的电子邮件和密码，并取回了一个令牌。使用 jwt.io 我们可以解码令牌并获取所有信息。然而，当我尝试使用 jwt-decode 对其进行解码时，我只是收到此错误消息，而且我一生都无法理解为什么。

---

TLDR，令牌可以通过 jtw.io 等地方在线解码，但是安装和使用 jtw-decode 只会给我这条消息。

这是我的代码：（我跳过了一些与问题无关的内容。）

import React, { useState, useContext } from "react";
import { Image, StyleSheet } from "react-native";
import \* as Yup from "yup";
import { jwtDecode } from "jwt-decode";

const handleSumbit = async ({ email, password }) =\> {
const result = await authApi.login(email, password);
if (!result.ok) return setLoginFailed(true);
setLoginFailed(false);

const token = result.data;
const decoded = jwtDecode(token);
console.log(decoded);
};

预期输出：

{user: name, ...}

实际输出：

Warning: An unhandled error was caught from submitForm() \[InvalidTokenError: Invalid token specified: invalid base64 for part #2 (Property 'atob' doesn't exist)\]

• 我尝试直接记录令牌而不是记录到常量中。
• 我尝试了另一个解码器，发现也出现了类似的问题。
• 我已记录该令牌并在 jwt.io 上手动对其进行解码，并且它可以正常工作。

Answer 1

您需要使用core-js之类的东西来填充atob函数。

1. 使用core-js：

import "core-js/stable/atob";
import { jwtDecode } from "jwt-decode";

const token = "eyJ0eXAiO.../// jwt token";
const decoded = jwtDecode(token);

console.log(decoded);

2. 使用base-64：

import { decode } from "base-64";

global.atob = decode;

您的代码可能如下所示：

import { decode } from "base-64";

global.atob = decode;

参考： https: //github.com/auth0/jwt-decode#polyfilling-atob