使用crypto-api在react中生成UUID

Question

根据MDM(https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID)大多数现代浏览器都支持javascript原生加密api，后者支持前者node-js加密标准。

根据这篇在普通js中的文章，我可以通过创建一个uuid

crypto.randomUUID()

有什么方法可以在react中使用这个接口吗？由于crypto似乎引用了react中完全不同的对象。

ps。我知道UUID包的存在，并且知道它是生成UUID的常见方法，我只是很好奇。

Answer 1

我想你是对的，React中的加密包是不同的。要使用NodeJ中的一个，您可以调用：

window.crypto

我把它放在if中以确保它只在浏览器中呈现。

if (window !== undefined) {
console.log('randomUUID', window.crypto.randomUUID());
}

或

import crypto from 'crypto';
console.log('crypto.randomUUID()', crypto.randomBytes(16).toString('hex'));

Answer 2

(2023年的现代解决方案(

1. Next.js在服务器上预渲染React页面组件(在TypeScript中表示为NextPage类型(，因此需要添加import crypto from 'crypto'; crypto.randomUUID()以在服务器上生成唯一的id。

2. HTML页面作为预渲染的结果返回到浏览器后，您需要使用window.crypto.randomUUID()，因为crypto.randomUUID()来自服务器环境中的Node.js包，而不是浏览器中的包。你可以在你的代码中添加以下检查：

// The following Node.js package is imported on the server-side 
// and not available in the browser
import nodeCrypto from 'crypto';
// Use the web browser Crypto API if you're on the client, 
// otherwise use the Node.js Crypto API on the server
typeof window !== 'undefined' ? window.crypto.randomUUID() : nodeCrypto.randomUUID()

请参阅Next.js文档中的"安全访问Web API"以了解更多信息。

Answer 3

window.crypto.randomUUID()很好。但请注意，crypto.randomUUID()仅在安全上下文(HTTPS(中可用。当您在HTTP站点上时，它将导致TypeError: window.crypto.randomUUID is not a function。

所以它应该是这样的：

if (typeof window !== "undefined" && typeof window.crypto.randomUUID === "function") {
console.log('randomUUID', window.crypto.randomUUID());
}