Chiffrement et déchiffrement front-end (MD5, AES, DES)

Narration:

• Il existe deux schémas de cryptage sur le front-end, l’un est un algorithme de cryptage réversible et l’autre est un algorithme de cryptage irréversible.
• DESet AESest réversible, le cryptage et le déchiffrement peuvent donc être effectués par la clé,
• MD5C'est irréversible et on ne peut déterminer si le texte en clair est le même qu'en le chiffrant à nouveau.

1. Cryptage frontal MD5 (irréversible)

• Installer le package MD5

npm install --save js-md5

• Introduit main.jset monté Vue的prototypesur

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

• Chiffrer lors de l'envoi de la demande

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

2. Cryptage et décryptage AES/DES

• Installer les packages de dépendances

 npm install crypto-js

• Encapsuler les méthodes publiques de chiffrement et de déchiffrement

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

• Utilisé dans les fichiers 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);
			},