1. 执行npm i crypto-js 下载js包
  2. 新建一个js文件夹命名des.js,在js文件中引入crypto-js 即: import cryptoJs from ‘crypto-js’
  3. 对加密解密文件进行封装:
  4. 在这里插入图片描述
  5. 代码如下
    export const encryptDes = (message, key) => {
    var keyHex = cryptoJs.enc.Utf8.parse(key)
    var option = { mode: cryptoJs.mode.ECB, padding: cryptoJs.pad.Pkcs7 }
    var encrypted = cryptoJs.DES.encrypt(message, keyHex, option)
    return encrypted.ciphertext.toString()
    }
  6. 在这里插入图片描述
    7.代码如下:
    export const decryptDes = (message, key) => {
    var keyHex = cryptoJs.enc.Utf8.parse(key)
    var decrypted = cryptoJs.DES.decrypt(
    {
    ciphertext: cryptoJs.enc.Hex.parse(message)
    },
    keyHex,
    {
    mode: cryptoJs.mode.ECB,
    padding: cryptoJs.pad.Pkcs7
    }
    )
    return decrypted.toString(cryptoJs.enc.Utf8)
    }
  7. 在main.js中引入des.js文件夹 以下是我自己的路径
    import { encryptDes, decryptDes } from ‘./api/des’
  8. 将封装的加密和解密函数绑定到vue的原型中
    Vue.prototype. e n c r y p t D e s = e n c r y p t D e s ; V u e . p r o t o t y p e . encryptDes = encryptDes; Vue.prototype. encryptDes=encryptDes;Vue.prototype.decryptDes = decryptDes;
  9. 在vue的原型链中调取加密解密函数
    加密: this. e n c r y p t D e s ( 需 要 加 密 内 容 , 内 容 的 密 匙 ) 解 密 : t h a t . encryptDes(需要加密内容,内容的密匙) 解密: that. encryptDes(,)that.decryptDes(需要解密内容.内容的密匙)

内容如有修改的地方 请联系本人修改,谢谢

Logo

前往低代码交流专区

更多推荐