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 React, { useState, useContext } from "react";
import { Image, StyleSheet } from "react-native";
import * as Yup from "yup";
import { jwtDecode } from "jwt-decode";
import "core-js/stable/atob"; // <- polyfill here

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);
};

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

Answer 2

可以解决但安装

npm install core-js
import "core-js/stable/atob";

这会有帮助..