Front-end encryption and decryption (MD5, AES, DES)

Narration:

• There are two encryption schemes on the front end, one is a reversible encryption algorithm and the other is an irreversible encryption algorithm.
• DESand AESis reversible, so encryption and decryption can be performed by the key,
• MD5It is irreversible, and it can only be determined whether the plaintext is the same by encrypting it again.

1. MD5 front-end encryption (irreversible)

• Install MD5 package

npm install --save js-md5

• Introduced in main.jsand mounted Vue的prototypeon

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

• Encrypt when sending request

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

2. AES/DES encryption and decryption

• Install dependency packages

 npm install crypto-js

• Encapsulate encryption and decryption public methods

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

• Used in Vue files

//如果是对象/数组的话，需要先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);
			},