CryptoJS实现vue项目路由传参AES加密

暗月Moon

已于 2023-04-20 13:51:38 修改

阅读量799

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue3 Vue 文章标签： vue.js javascript 前端

于 2022-10-17 11:46:44 首次发布

本文链接：https://blog.csdn.net/Anyuegogogo/article/details/127360710

Vue 同时被 2 个专栏收录

19 篇文章

订阅专栏

13 篇文章

订阅专栏

本文介绍了如何在JavaScript中使用CryptoJS库进行AES加密和解密操作，包括密钥和初始向量的设置，以及加密和解密函数的封装。在实际应用中，这些方法可以用于安全地在路由参数中传递敏感信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装：

npm i crypto-js

封装方法：

import CryptoJS from 'crypto-js/crypto-js';
// const CryptoJS = require("crypto-js");

const KEY = CryptoJS.enc.Utf8.parse('1234567890ABCDEF'); //  密钥        长度必须为16位
const IV = CryptoJS.enc.Utf8.parse('123456'); //  初始向量    长度随意

/*
 * AES加密 ：字符串 key iv  返回base64
 */
export function Encrypt(str) {
  let key = KEY;
  let iv = IV;
  let srcs = CryptoJS.enc.Utf8.parse(str);
  var encrypt = CryptoJS.AES.encrypt(srcs, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC, //这里可以选择AES加密的模式
    padding: CryptoJS.pad.Pkcs7
  });
  return CryptoJS.enc.Base64.stringify(encrypt.ciphertext);
}

/*
 * AES 解密 ：字符串 key iv  返回base64
 */
export function Decrypt(str) {
  let key = KEY;
  let iv = IV;
  let base64 = CryptoJS.enc.Base64.parse(str);
  let src = CryptoJS.enc.Base64.stringify(base64);
  var decrypt = CryptoJS.AES.decrypt(src, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC, //这里可以选择AES解密的模式
    padding: CryptoJS.pad.Pkcs7
  });

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

路由传参使用：

// 传参
const queryValue = Encrypt(JSON.stringify(detailInfo))
router.push({
  path: '/sign',
  query: {
    queryValue: queryValue
  }
});
// 接收参数
const queryValue = JSON.parse(Decrypt(router.currentRoute.value.query.queryValue))