加密&解密

我们在写项目的时候有很多时候都会使用到加密数据，当然很多情况下都是后端给的我们加密的值，也有时候我们需要自己进行加密，下面我就给大家介绍一下在vue项目中是如何进行加密解密的

下载模块

cnpm i crypto-js -S

新建utils.js文件

import Vue from 'vue'
import CryptoJS from 'crypto-js'
export default {//加密
  encrypt(word, keyStr){
//word是需要解密的内容
//keyStr 必须是16位，不然可以加密，但是在解密的时候回出现问题 
    keyStr = keyStr ? keyStr : 'abcdefgabcdefg12';
    var key  = CryptoJS.enc.Utf8.parse(keyStr);
    var srcs = CryptoJS.enc.Utf8.parse(word);
    var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
    console.log(encrypted.toString())
    return encrypted.toString();
  },
  //解密
  decrypt(word, keyStr){  
    keyStr = keyStr ? keyStr : 'abcdefgabcdefg12';
    var key  = CryptoJS.enc.Utf8.parse(keyStr);
    var decrypt = CryptoJS.AES.decrypt(word, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
    return CryptoJS.enc.Utf8.stringify(decrypt).toString();
  }
}

页面中引入

import utils from "../utils/utils.js"//根据自己的路径来写

页面中使用

        //第一次加密，我传入了一个自己定义的16位key值
        var a=utils.encrypt("***","1324561546546546");
        //第二次加密，没有传值，使用默认key值
        var c=utils.encrypt(a);
        //这是解第二次密
        var b=utils.decrypt(c);
        //解第一次密，获取到加密的值
        var d=utils.decrypt(b,"1324561546546546")
        console.log(c);
        console.log(d);