vue中MD5 + RSA加密

一 引入依赖

npm install js-md5

npm install jsencrypt

二 md5加密

<template>
  <div class="hello">
    md5加密{
   
   {md5Val}}
  </div>
</template>

<script>
import md5 from 'js-md5'
import JSEncrypt from 'jsencrypt/bin/jsencrypt'

export default {
  data() {
    return {
      md5Val: null
    }
  },
  created() {
    this.deal()
  },
  methods: {
    deal() {
      let str = '1111'
      this.md5Val = md5(str)
    }
  }
}
</script>

三 md5  + RAS加密 + RAS解密

<template>
  <div class="hello">
    md5加密{
   
   {md5Val}} <br>
    RSA加密{
   
   {rsaVal}} <br>
    RSA解密{
   
   {openRas}}
  </div>
</template>

<script>
import md5 from 'js-md5'
import JSEncrypt from 'jsencrypt/bin/jsencrypt'

export default {
  data() {
    return {
      md5Val: null,
      rsaVal: null,
      openRas: null,
    }
  },
  created() {
    this.deal()
  },
  methods: {
    deal() {
      let str = '123456'
      this.md5Val = md5(str)

      let encryptor = new JSEncrypt() // 新建JSEncrypt对象
      let addkey = `MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCqtEnVQgX3NpD/zbUTkpaHoO0l
                    muCA6Xfers1NfR9YaiRhdqLbc3CTk+h0Gc4AsOfvwzEOwmMIan45vg7bB5TF5DA4
                    csh5Yb86zXUXmnlj22YRgyM81A18+uUyMM0rGtLYnKC15Qq9pFZ0n1EkXhOUV2x7
                    5s61F0j3EGtnpbLYNwIDAQAB`
      encryptor.setPublicKey(addkey) // 设置公钥
      this.rsaVal = encryptor.encrypt(this.md5Val)  //加密

      
      let decrypt = new JSEncrypt()
      let openKey = `MIICdgIBADANBgkqhkiG9w0BAQEFAASCAmAwggJcAgEAAoGBAKq0SdVCBfc2kP/N
                    tROSloeg7SWa4IDpd96uzU19H1hqJGF2ottzcJOT6HQZzgCw5+/DMQ7CYwhqfjm+
                    DtsHlMXkMDhyyHlhvzrNdReaeWPbZhGDIzzUDXz65TIwzSsa0ticoLXlCr2kVnSf
                    USReE5RXbHvmzrUXSPcQa2elstg3AgMBAAECgYBdSuTjGQ87mWXLd7gTt1RvUWLp
                    32f87Bun5u6q/8vmvTOe1ICS4NdQwFAVS5kLRaOspIemIlSPX+wWUKm7yLvkOh5T
                    4pN55nB+57P7enjQvsIs0nEpmEFgoAaWsiNP9hUIUV22lUzXc+vbOqc+UChKmlv1
                    7KdTP8MhJYZpjLQyUQJBAN9lStSaqqEqP5ry6vfbqacy06pTj/FgiLDvZZALRKD8
                    GJGzCkKI++AXO/IVAcrkMNNY8yBbqRiUFuFUenxC5I8CQQDDnkrZjqxsd89f+WR1
                    7Z60HlhwKmXHme25hBQN5+5e/Gg9moKjD7MjMP81Jba5a2v89tIq+8rd53rzNEtz
                    OrXZAkBDr7wxmL9UX6mv+CRLfynzOAo8FF+LwjUIbzC1qURdBqUnGDlmmXy/lCqc
                    mdLWN7e3gb8AseUVRmF8Wo1WMypvAkEAlYnFKEij0ItKMNDiFjBe2Mw1yRDwG0S1
                    cNLhzbuWAnCrcyRRZzuSMn27KjK5W0ceFxPLl+ZBr57L42z/nIeuCQJAWiZNQMgl
                    L+KI8MVCGM4FkmLqVFXvWSnZbVZTlShkBE8nThSSM/JvEkWss0Cy3cnr9Fau2kRi
                    r4m7Vwn8d4MaQQ==`
      decrypt.setPrivateKey(openKey)
      this.openRas = decrypt.decrypt(this.rsaVal) //解密
    }
  }
}
</script>

tips 公钥和私钥可以http://web.chacuo.net/netrsakeypair获取

在测试过程中前端加密的类型好像必须是要String类型的   没有深入了解后续有了解再更新

现在很多开发要求数据的安全性，所以进行二次加密一定程度上提高安全性