使用加密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 中引用了一个完全不同的对象。

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

Answer 1

（2023 年的现代解决方案）

1. Next.js 在服务器上预渲染你的 React 页面组件（NextPage在 TypeScript 中表示为类型），因此你需要添加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 2

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

窗口加密

我将其放在 if 中以确保它仅在浏览器中呈现。

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

或者

import crypto from 'crypto';

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