Cifrado y descifrado de front-end (MD5, AES, DES)

Narración:

• Hay dos esquemas de cifrado en la interfaz, uno es un algoritmo de cifrado reversible y el otro es un algoritmo de cifrado irreversible.
• DESy AESes reversible, por lo que el cifrado y descifrado se pueden realizar mediante la clave,
• MD5Es irreversible y solo se puede determinar si el texto sin formato es el mismo cifrándolo nuevamente.

1. Cifrado frontal MD5 (irreversible)

• Instalar el paquete MD5

npm install --save js-md5

• Introducido main.jsy montado Vue的prototypeen

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

• Cifrar al enviar la solicitud

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

2. Cifrado y descifrado AES/DES

• Instalar paquetes de dependencia

 npm install crypto-js

• Encapsular métodos públicos de cifrado y descifrado

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();
  }

• Utilizado en archivos Vue

//如果是对象/数组的话，需要先JSON.stringify转换成字符串
			addAES() {
    
    
				const aseKey = "12345678"; //秘钥必须为：8/16/32位
				const message = "[email protected]";
				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);
			},