Cryptojs

在业务系统中，通常需要对用户的密码进行加密，再时行http的请求。加强系统登录的安全验证。 常用的加密方式有MD5, Base64, CryptoJS的 AES DES等。下面介绍我常用的几种加密方法的使用： MD5加密1. 安装模块 ts-md5$ npm install ts-md5 --save2. 使用md5进行加密import { Md5 } from 'ts-md5';// ...// 密码password: string = "12345";// 加密方法 - md5加密decode() { const passwordMd5 = Md5.hashStr(this.password).toString(); // 结果：827ccb0eea8a706c4c34a16891f84e7b}Base64加密1.安装模块 js-base64$ npm install js-base64 --save2.使用md5进行加密import { Base64 } from 'js-base64';// ...// 密码password: string = "12345";// 加密方法 - Base64加密decode() { const passwordBase64 = Base64.encode(password); // 结果：MTIzNDU=}DES加密DES对称加密，是一种比较传统的加密方式，其加密运算、解密运算使用的是同样的密钥key，信息的发送者和信息的接收者在进行信息的传输与处理时，必须共同持有该密码（称为对称密码），是一种对称加密算法。crypto-js Github: https://github.com/brix/crypt... 1.安装模块 crypto-js$ npm install crypto-js --save2.使用DES进行加密import CryptoJS from 'crypto-js';// ...// 密钥key: string = "abcdefg";// 密码password: string = "12345";// 加密方法 - des加密decode() { // key编码 const keyHex = CryptoJS.enc.Utf8.parse(this.key); console.log(keyHex.toString()); // 结果：61626364656667 // 加密 const passwordDES = CryptoJS.DES.encrypt(this.password, keyHex, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }).toString(); console.log(passwordDES); // 结果：zYGeIdaZpEM=}3. 使用AES进行加密加密用法基本与des一致。 ...

// 引入crypto-js包import CryptoJS from 'crypto-js'/** * AES加密 * @param {any} word 加密数据 */export const cryptoEncrypt = (word) => { var key = CryptoJS.enc.Utf8.parse('填写密钥'); var iv = CryptoJS.enc.Utf8.parse('填写偏移量'); var encrypted = ''; if (typeof(word) == 'string') { var srcs = CryptoJS.enc.Utf8.parse(word); encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }); } else if (typeof(word) == 'object') {//对象格式的转成json字符串 data = JSON.stringify(word); var srcs = CryptoJS.enc.Utf8.parse(data); encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }) } return encrypted.ciphertext.toString();}/** * AES解密 * @param {any} word 解密数据 */export const cryptoDecrypt = (word) => { var key = CryptoJS.enc.Utf8.parse('填写密钥'); var iv = CryptoJS.enc.Utf8.parse('填写偏移量'); var encryptedHexStr = CryptoJS.enc.Hex.parse(word); var srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr); var decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }); var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8); return decryptedStr.toString();}

一般情况下，很少会在前端进行加解密的操作，因为没有太大的必要性，前端的代码是很容易看到的，即使这样，我觉得还是有比较处理一下的，至少不让别人一眼就看到信息我使用localStorage存储了一些用户的用户名昵称等的信息，通过crypto-js进行加解密处理，这里我选用了AES加密算法对json对象数据进行处理按照官方的例子，如下var CryptoJS = require(“crypto-js”); var data = [{id: 1}, {id: 2}] // Encryptvar ciphertext = CryptoJS.AES.encrypt(JSON.stringify(data), ‘secret key 123’); // Decryptvar bytes = CryptoJS.AES.decrypt(ciphertext.toString(), ‘secret key 123’);var decryptedData = JSON.parse(bytes.toString(CryptoJS.enc.Utf8)); console.log(decryptedData);以上代码在chrome里运行没什么问题，可是在Safari的时候报了malformed utf-8 data可能是前端加解密的场景比较少，搜到若干报这个错的，但是鲜有解决方法，其中有一个说加密数据不是8的整数倍就会报上述错误解决方法：将数据加密后，再进行base64进行处理 let newUserInfo = {nickname:‘hello’,email:‘abc123@qq.com’}; //加密数据 let encJson = cryptoJS.AES.encrypt(JSON.stringify(newUserInfo), ‘aes’).toString(); //对加密数据进行base64处理, 原理：就是先将字符串转换为utf8字符数组，再转换为base64数据 let encData = cryptoJS.enc.Base64.stringify(cryptoJS.enc.Utf8.parse(encJson)); localStorage.setItem(‘userInfo’, encData); //将数据先base64还原，再转为utf8数据 let decData = cryptoJS.enc.Base64.parse(localStorage.getItem(‘userInfo’)).toString(cryptoJS.enc.Utf8); //解密数据 let decJson = cryptoJS.AES.decrypt(decData, ‘aes’).toString(cryptoJS.enc.Utf8); userInfo = JSON.parse(decJson); console.log(userInfo);以上，在safari，chrome，firefox运行没问题