记录一下cryptoJs使用

使用场景：可以加密localStorage，这样数据就不会裸奔了

// 安装crypto-js
npm install crypto-js
// 引入 crypto-js 有以下两种方式
import CryptoJS from "crypto-js";
// 或者
const CryptoJS = require("crypto-js");

设置密钥和密钥偏移量

// 可以采用将一个私钥经 MD5 加密生成16位密钥获得
// 十六位十六进制数作为密钥
const SECRET_KEY = CryptoJS.enc.Utf8.parse("3333e6e143439161");
// 十六位十六进制数作为密钥偏移量
const SECRET_IV = CryptoJS.enc.Utf8.parse("e3bbe7e3ba84431a");

加密方法封装

/**
 * 加密方法
 * @param data
 * @returns {string}
 */
export function encrypt(data) {
  if (typeof data === "object") {
    try {
      data = JSON.stringify(data);
    } catch (error) {
      console.log("encrypt error:", error);
    }
  }
  const dataHex = CryptoJS.enc.Utf8.parse(data);
  const encrypted = CryptoJS.AES.encrypt(dataHex, SECRET_KEY, {
    iv: SECRET_IV,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  });
  return encrypted.ciphertext.toString();
}

解密方法封装

/**
 * 解密方法
 * @param data
 * @returns {string}
 */
export function decrypt(data) {
  const encryptedHexStr = CryptoJS.enc.Hex.parse(data);
  const str = CryptoJS.enc.Base64.stringify(encryptedHexStr);
  const decrypt = CryptoJS.AES.decrypt(str, SECRET_KEY, {
    iv: SECRET_IV,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  });
  const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
  return decryptedStr.toString();
}

使用方法

import { encrypt, decrypt } from '@/utils/encrypt';

实战

import { encrypt, decrypt } from './CryptoJS';
class FnStorage {
    set(key: string, obj) {
        // 这个是base64加密方法
        // localStorage.setItem(key, window.btoa(window.encodeURIComponent(JSON.stringify(obj))));
        localStorage.setItem(key, encrypt(JSON.stringify(obj)));
    }
    get(key: string) {
        if (localStorage.getItem(key) === null) {
            return '';
        }
        // 这个是base64解密方法
        // return JSON.parse(decodeURIComponent(window.atob(localStorage.getItem(key))));
        return JSON.parse(decrypt(localStorage.getItem(key)));
    }
    remove(key: string) {
        localStorage.removeItem(key);
    }
    clear() {
        localStorage.clear();
    }
};
export default FnStorage;