前端項目中使用aes加密解密-對稱加密

本文介紹的rsa加解密方法，適合react，vue，angular框架的前端項目

 

1. 安裝cryto-js：npm install crypto-js

2. rsa加密解密函數：(cbc模式，base64格式，zeroPadding，16位)

import CryptoJS from 'crypto-js/crypto-js'

// 默認的 KEY 與 iv 如果沒有給
const KEY = CryptoJS.enc.Utf8.parse("1234567890123456");
const IV = CryptoJS.enc.Utf8.parse('1234567890123456');
/**
 * AES加密 ：字符串 key iv  返回base64 
 */
export function Encrypt(word, keyStr, ivStr) {
  let key = KEY
  let iv = IV

  if (keyStr) {
    key = CryptoJS.enc.Utf8.parse(keyStr);
    iv = CryptoJS.enc.Utf8.parse(ivStr);
  }

  let srcs = CryptoJS.enc.Utf8.parse(word);
  var encrypted = CryptoJS.AES.encrypt(srcs, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.ZeroPadding
  });
 // console.log("-=-=-=-", encrypted.ciphertext)
  return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);

}
/**
 * AES 解密 ：字符串 key iv  返回base64 
 *
 */
export function Decrypt(word, keyStr, ivStr) {
  let key  = KEY
  let iv = IV

  if (keyStr) {
    key = CryptoJS.enc.Utf8.parse(keyStr);
    iv = CryptoJS.enc.Utf8.parse(ivStr);
  }

  let base64 = CryptoJS.enc.Base64.parse(word);
  let src = CryptoJS.enc.Base64.stringify(base64);

  var decrypt = CryptoJS.AES.decrypt(src, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.ZeroPadding
  });

  var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
  return decryptedStr.toString();
}

3. 在組件中使用：

import {Decrypt, Encrypt} from '剛剛封裝的js'

var parm1 = Decrypt('加密的字段', key, iv)
console.log('加密之后的字段：', parm1)

var parm2 = Decrypt('解密的字段', key, iv)
console.log('解密之后的字段：', parm2)

 

備注：密鑰最好是數字，不然可能會報錯(報代碼的錯誤，其實代碼沒問題)