Question

我是React本地和世博会的新手，但我开始在其上编写我自己的应用程序，使用与Cordova应用程序一样的后端。

不幸的是，我遇到了试图从浏览器重新创建btoa（）函数的障碍，我用它来验证使用基本授权的用户。

无论我尝试什么，我似乎都无法获得与btoa相同的结果。我尝试过研究这个主题，但是我无法找到一个可靠的答案，即Base64.encode（）和btoa（）之间的区别。

我知道我做错了什么。当我用Postman尝试发布请求时，我会得到正确的基本身份验证令牌。但是，当我使用base64编码（尝试多个库）的代码中执行此操作时，结果会有所不同。例如：

test@test.com：asdasd

邮递员中的

：＆＃34; dGVzdEB0ZXN0LmNvbTphc2Rhc2Rhc2Q =＆＃34;

app中的

（到utf8，然后是base64）：＆＃34; W29iamVjdCBBcnJheUJ1ZmZlcl0 =＆＃34;

我的代码的相关部分：

const utf8_enc = utf8.encode(email+':'+password);
const b64_enc = base64.encode(utf8_enc);
console.log(b64_enc);

使用过的库：

Base64- https://www.npmjs.com/package/base-64

UTF8 - https://github.com/mathiasbynens/utf8.js

请告诉我为什么两者不同，我如何重新创建Postman版本。

谢谢！

Answer 1

好的，我知道现在发生了什么。如果您遵循该utf8包的文档，则无法在React Native中正确导入。您可以通过尝试访问decode()或version来查看未正确导入，因为两者都会为您提供undefined。我认为原因是因为他们不支持es2015模块（see this rejected PR）。但是，这个包在Node.js或浏览器中可以正常工作。

奇怪的是，导入时您可以访问encode()。它只是没有做你认为它做的事情。当您尝试使用encode()时，它实际返回的只是字符串：[object ArrayBuffer]。事实上，无论你传递给它的是什么字符串，它都会返回相同的结果。现在，如果您对此字符串使用btoa()（有或没有UTF-8转换，因为在这种情况下没有区别），您将看到在浏览器中获得相同的输出：{{1} }

那么，如何解决这个问题呢？

如果你所期望的只是扩展的ASCII字符串，那么你就不需要用UTF-8对它进行编码，因为它们都在有效的字符集中。所以你可以这样做：

W29iamVjdCBBcnJheUJ1ZmZlcl0=

但是，如果您预计支持所有Unicode字符，那么您可以使用几个选项来转换该字符串：

分叉base64.encode(email+':'+password);包以使其支持模块/导出。
复制粘贴整个utf8来源并将其放入您自己的本地库并导出功能。
使用here建议的方法编写您自己的UTF-8编码器/解码器，the MDN Documentation来自webpack.config.prod.js。

所以有一个对 a 解决方案的引用，这里是MDN文档中代码的相关编码部分变成了一个函数：

utf8

Expo / React Native Basic授权

1 个答案: