Ich versuche, einen String mit crypto in einer Vue 3-Anwendung zu hashen.
asynchroner Funktions-Hash (Token) { const data = new TextEncoder().encode(token) const byteHash = waiting crypto.subtle.digest("SHA-256", Daten) // ^ Der folgende Fehler wird hier ausgegeben const arrayHash = Array.from(new Uint8Array(byteHash)) const hexHash = arrayHash.map(b => b.toString(16).padStart(2, '0')).join('').toLocaleUpperCase() hexHash zurückgeben } Soweit ich weiß, ist crypto jetzt in Browsern verfügbar, daher besteht keine Notwendigkeit, stattdessen browserify zu verwenden.
In meiner Browserkonsole ist jedoch der folgende Fehler aufgetreten:
Fehler: Das Modul „crypto“ wurde aus Gründen der Browserkompatibilität nicht aufgerufen.
Ich verstehe diesen Fehler als „Vite ist so konfiguriert, dass es das crypto-Modul während des Build-Prozesses externalisiert.“ Aber ich finde eine solche Einstellung nicht in meinem vite.config.js:
// Plugins: vue aus „@vitejs/plugin-vue“ importieren Vuetify aus „vite-plugin-vuetify“ importieren // Dienstprogramme: importiere { defineConfig } aus 'vite' importiere { fileURLToPath, URL } aus 'node:url' // https://vitejs.dev/config/ Standard exportieren defineConfig({ Plugins: [ vue(), // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin vuetify({ autoImport: true }) ], define: { 'process.env': {} }, lösen: { alias: { '@': fileURLToPath(neue URL('./src', import.meta.url)) }, Erweiterungen: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'] }, Server: { Hafen: 3000 }, prüfen: { setupFiles: ['../vuetify.config.js'], abhängig: { inline: ['vuetify'] }, Globals: wahr } }) Gibt es „integrierte“ Vite-Standardeinstellungen, die dieses Problem verursachen könnten? Ist dieses Problem woanders konfiguriert? Wie kann ich dieses Problem lösen und das Modul crypto
问题在于NodeJS和浏览器都有一个名为
crypto的模块（实现了webcrypto标准），它们是兼容的，但需要以不同的方式访问，因为在浏览器中它是由不存在于NodeJS中的window上下文提供的。如果您直接在浏览器中工作，您不会看到区别，因为
window是默认上下文。但是Vite是在NodeJS上下文中工作的，它（正确地）认为在浏览器中这个模块不可用作
crypto，因此会抛出错误。它不知道/不关心这个模块在浏览器中也存在，但是作为window.crypto。也许可以在
vite.config.js中进行配置，但我对此不太熟悉。我想到了以下解决方案，它在两个环境中都有效：
function getCrypto() { try { return window.crypto; } catch { return crypto; } }async function hash(token) { const compatibleCrypto = getCrypto(); const data = new TextEncoder().encode(token); const byteHash = await compatibleCrypto.subtle.digest('SHA-256', data); const arrayHash = Array.from(new Uint8Array(byteHash)); const hexHash = arrayHash .map(b => b.toString(16).padStart(2, '0')) .join('') .toLocaleUpperCase(); return hexHash; }现在这个函数在两个环境中都可以工作。