前端加解密（MD5，AES，DES）

叙述：

• 前端的两种加密方案，一种是可逆的加密算法，另一种是不可逆的加密算法，
• DES与AES是可逆的，因此可以通过密钥进行加密和解密，
• MD5是不可逆的，只能通过再次加密才能判断明文是否相同。

1. MD5前端加密（不可逆）

• 安装MD5包

npm install --save js-md5

• 在main.js中引入，并挂载到Vue的prototype上

// 引入md5加密
import md5 from 'js-md5';
Vue.prototype.$md5 = md5;

• 发送请求时加密

this.login({
    username: that.formLogin.username,
    password: that.$md5(that.formLogin.password),
    captcha: that.formLogin.captcha,
    captchaKey: that.captchaKey
})

2. AES/DES加密解密

• 安装依赖包

 npm install crypto-js

• 封装加解密公共方法

import CryptoJS from 'crypto-js';

//随机生成指定数量的16进制key
export const  generatekey=(num)=> {
    let library = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    let key = "";
    for (var i = 0; i < num; i++) {
      let randomPoz = Math.floor(Math.random() * library.length);
      key += library.substring(randomPoz, randomPoz + 1);
    }
    return key;
  }
//加密
export const  encrypt=(word, keyStr)=> {
    keyStr = keyStr ? keyStr : 'XXXXXXXXXXXXX'; //判断是否存在ksy，不存在就用定义好的key
    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 });
    return encrypted.toString();
  }
//解密
export const  listdecrypt=(word, keyStr)=>{
    keyStr = keyStr ? keyStr : 'XXXXXXXXXXXXX';
    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();
  }

• Vue文件中使用

//如果是对象/数组的话，需要先JSON.stringify转换成字符串
			addAES() {
				const aseKey = "12345678"; //秘钥必须为：8/16/32位
				const message = "2836879147@qq.com";
				this.password = encrypt(message,aseKey);
				console.log(this.password);
				// console.log(password);
			},
			addAESJIEmi() {
				const aseKey = "12345678"; //秘钥必须为：8/16/32位
				const data = listdecrypt(this.password,aseKey);
				console.log(data);
			},