前后端通讯:非敏感信息Cookie的"强化"之路

<script>
import {nanoid} from 'nanoid'
import AES from "crypto-js/aes";
import EncUTF8 from "crypto-js/enc-utf8";
export default {
  name: "App",
  data() {
    return {
      info: Object.freeze({
        version: "v1.0.0",
        EngineCode: "312312fasdfasrewrwe",
      }), // 需要加密的文本
      tempInfo: {}, // 中间变量,缓存转换的
    };
  },
  methods: {
    isJSON(str) {
      if (!str) return false;
      if (typeof str === "string") {
        try {
          let obj = JSON.parse(str);
          if (typeof obj === "object" && obj) {
            return true;
          } else {
            return false;
          }
        } catch (e) {
          console.log("error：" + str + "!!!" + e);
          return false;
        }
      }
    },
  },
  created() {
    console.time('nanoid 8位数生成时间')
      console.log(nanoid(8));
    console.timeEnd('nanoid 8位数生成时间')
    console.time('加密时间')
    console.log('%c 🍩 加密前信息: ', 'font-size:20px;background-color: #33A5FF;color:#fff;', this.info);
    // aes加密后的纯文本
    let encryptText = AES.encrypt(JSON.stringify(this.info), "cqmyg").toString();
    console.log('%c 🍩 encryptText: ', 'font-size:20px;background-color: #33A5FF;color:#fff;', encryptText);
    // 拼接八位数的随机字符作为前缀(用来混淆)
    let UUIDText = `${nanoid(8)}${encryptText}`
    console.log('%c 🥡 UUIDText: ', 'font-size:20px;background-color: #42b983;color:#fff;', UUIDText);
    // base64
    this.tempInfo = window.btoa(UUIDText);
    console.log(
      "%c 🌰 AES+NanoID+Base64加密后的文本: ",
      "font-size:20px;background-color: #EA7E5C;color:#fff;",
      this.tempInfo
    );
    console.timeEnd('加密时间')
  },
  mounted() {
    console.time("解密时间");
    if(this.tempInfo && typeof this.tempInfo === 'string'){
      let aesText = window.atob(this.tempInfo).slice(8);
      console.log('%c 🥫 aesText: ', 'font-size:20px;background-color: #ED9EC7;color:#fff;', aesText);
      let infoText = AES.decrypt(aesText, "cqmyg").toString(EncUTF8);
      console.log('%c 🍨 infoText: ', 'font-size:20px;background-color: #E41A6A;color:#fff;', infoText);
      let rawInfo = this.isJSON(infoText) ? JSON.parse(infoText): infoText;
      console.log('%c 🍐 解密得出的信息: ', 'font-size:20px;background-color: #EA7E5C;color:#fff;', rawInfo);
    }
    console.timeEnd("解密时间");
  },
  render(){
    return <div class="app">
      我是app
    </div>
  }
};
</script>