vue中使用crypto-js加密密码等信息

crypto-js加密AES

最近项目中需要在登陆请求时将密码加密，要求使用aes方式加密官方的一种说法：

高级加密标准（英语：Advanced Encryption Standard，缩写：AES），在密码学中又称Rijndael加密法，是美国联邦政府采用的一种区块加密标准。这个标准用来替代原先的DES，已经被多方分析且广为全世界所使用。经过五年的甄选流程，高级加密标准由美国国家标准与技术研究院（NIST）于2001年11月26日发布于FIPS PUB 197，并在2002年5月26日成为有效的标准。2006年，高级加密标准已然成为对称密钥加密中最流行的算法之一。

于是用到了crypto-js完美解决，亲测有效

github链接:https://github.com/brix/crypto-js

要注意前端和后端的加密配置要保持一致

1.安装crypto-js

  npm install crypto-js --save

2.编写encrypt.js

在Api文件夹中新建encrypt.js文件
（此为较简洁方法，未处理数据，未用到密钥偏移量）

 const CryptoJS = require('crypto-js') // 引用AES源码js

// const key = CryptoJS.enc.Utf8.parse('1234123412ABCDEF') // 十六位十六进制数作为密钥
// const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412') // 十六位十六进制数作为密钥偏移量

// 解密方法
function Decrypt (word, key) {
  let ckey = CryptoJS.enc.Utf8.parse(key) // 十六位十六进制数作为密钥
  // let encryptedHexStr = CryptoJS.enc.Hex.parse(word)
  // let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr)

  let decrypt = CryptoJS.AES.decrypt(word, ckey, {

    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  })
  let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
  console.log('decryptedStr', decryptedStr.toString())

  return decryptedStr.toString()
}

// 加密方法
function Encrypt (word, key) {
  let ckey = CryptoJS.enc.Utf8.parse(key)
  // let srcs = CryptoJS.enc.Utf8.parse(word)
  let encrypted = CryptoJS.AES.encrypt(word, ckey, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  })
  console.log('encrypted', encrypted.toString())
  return encrypted.toString()
}
export default {
  Decrypt,
  Encrypt
}

3.页面用法

在.vue页面中：

<template>
  <div>
  </div>
</template>
<script>
import encrypt from "@/api/encrypt";//根据实际路径引入encrypt.js文件
//....
//....
export default {
  data() {
    return {
      ruleForm: {
        userName: "",
        password: "",
      },
    }
  }
  //.....
  //....
  login() {
  //....
    let key="123456789"//设置密钥
    this.ruleForm.password = encrypt.Encrypt(this.ruleForm.password, key);//加密
    let psd = encrypt.Decrypt(this.ruleForm.password, key);//解密
  //....
  }
  //...
  //....
}
 
</script>