无法读取未定义的属性 'HmacSHA256'

Question

我正在尝试加密一个 id，以便我可以使用 crypto-js 在 vue.js 中用作参数，但我一直收到此错误。 无法读取属性 'HmacSHA256' of undefined 当我尝试 ASE 和 MD5 我有同样的错误，我做错了什么？这是我的代码

//in main.js
import CryptoJS from 'crypto-js'
Vue.use(CryptoJS)

//im my component
goToEvent (singleEvent) {
  const id = this.CryptoJS.HmacSHA256(singleEvent.id, 'mySecreteKey').toString(this.CryptoJS.enc.Hex)
  this.$store.commit('SET_SELECTED_EVENT', singleEvent)
  this.$router.push(`/admin/events/event/${id}`)
}

Answer 1

将 import CryptoJS from 'crypto-js' 添加到您的组件文件中，然后使用 CryptoJS.HmacSHA256(...) 如下所示：

goToEvent (singleEvent) {
  const id = CryptoJS.HmacSHA256(singleEvent.id, 'mySecreteKey').toString(CryptoJS.enc.Hex)
  this.$store.commit('SET_SELECTED_EVENT', singleEvent)
  this.$router.push(`/admin/events/event/${id}`)
}

BTW: Vue.use(CryptoJS) 将无法工作，因为 'crypto-js' 不是有效的 Vue 插件。

或者另一种解决方案是使用一个名为Vue CryptoJS的有效Vue插件，然后在您的单文件组件中，您将能够调用CryptoJS实例通过：

Vue.CryptoJS
this.CryptoJS
this.$CryptoJS

Answer 2

感谢您的帮助，我意识到我必须将我的值传递给 json 字符串，我还必须添加一些东西以获得 url 友好的值.这是我的最终解决方案

import CryptoJS from 'crypto-js'

const key = 'mysecrete'



 // encryption
   export function Encrypt (text) {
    const b64 = CryptoJS.AES.encrypt(JSON.stringify(text), key).toString()
      const e64 = CryptoJS.enc.Base64.parse(b64)
      return e64.toString(CryptoJS.enc.Hex)
    }
// decryption
export function Decrypt (text) {
  const reb64 = CryptoJS.enc.Hex.parse(text)
  const bytes = reb64.toString(CryptoJS.enc.Base64)
  const decrypt = CryptoJS.AES.decrypt(bytes, key)
  return decrypt.toString(CryptoJS.enc.Utf8)
}

现在我可以在任何组件中导入它

无法读取未定义的属性 'HmacSHA256'

Cannot read property 'HmacSHA256' of undefined

javascript

cryptojs

vue.js

无法读取未定义的 属性 'HmacSHA256'

Cannot read property 'HmacSHA256' of undefined

javascript

cryptojs

vue.js

无法读取未定义的属性 'HmacSHA256'