CryptoJS 加密的使用方法

2023-11-19

因为公司的项目中用到了接口加密解密,所以百度了一下前端JS加密相关的文章,发现谷歌的CryptoJS挺好用的,因为项目用的是vue框架,记录一下项目中使用经验:

首先使用npm安装CryptoJS
npm install crypto-js
引用
import CryptoJS from 'crypto-js/crypto-js'

在此我引用的是总文件,如果只是用到个别的加密方式,可以单独引用对应的加密JS文件;

加密代码实现

项目中需要将所有传到后台的参数分5个步骤处理:

第一步:排序
第二步:将排序好的参数进行MD5加密作为接口的签名
第三步:将排序好的参数和接口签名拼接上进行AES加密
第四部:将AES加密后的密文Base64加密
第五步:将最终的密文encodeURIComponent;

代码如下:

function encryption(data) {
    let strs=[];
    for(let i in data){
        strs.push(i+'='+data[i]);
    }
    strs.sort();  // 数组排序
    strs=strs.join('&'); // 数组变字符串
    let endData=strs+'&sign='+CryptoJS.MD5(strs+'ADfj3kcadc2349akvm1CPFFCD84f')
    .toString(); // MD5加密
    let key = CryptoJS.enc.Utf8.parse("0880076B18D7EE81"); // 加密秘钥
    let iv = CryptoJS.enc.Utf8.parse("CB3EC842D7C69578");  //  矢量
    let encryptResult = CryptoJS.AES.encrypt(endData,key, {   //  AES加密
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7  // 后台用的是pad.Pkcs5,前台对应为Pkcs7
    });
    return encodeURIComponent(CryptoJS.enc.Base64.stringify(encryptResult.ciphertext));  // Base64加密再 encode;
}

加密最终的密文拼接在接口地址后面,请求接口。后台返回的数据也是密文;解密方法如下:

function decryption(data) {
    let key = CryptoJS.enc.Utf8.parse("0880076B18D7EE81");  // 加密秘钥
    let iv = CryptoJS.enc.Utf8.parse("CB3EC842D7C69578");   //  矢量
    let baseResult=CryptoJS.enc.Base64.parse(data);   // Base64解密
    let ciphertext=CryptoJS.enc.Base64.stringify(baseResult);     // Base64解密
    let decryptResult = CryptoJS.AES.decrypt(ciphertext,key, {    //  AES解密
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });
    let resData=decryptResult.toString(CryptoJS.enc.Utf8).toString();

    return JSON.parse(resData);

}
备注:因为后台返回的数据是json格式;所以做种return的时候使用JSON.parse();如果解密的目标为字符串,比如说需要解密的是一个加密的token值。那就要做相应的改动:
function decryption(data) {
    let key = CryptoJS.enc.Utf8.parse("0880076B18D7EE81");  // 加密秘钥
    let iv = CryptoJS.enc.Utf8.parse("CB3EC842D7C69578");   //  矢量
    let baseResult=CryptoJS.enc.Base64.parse(data);   // Base64解密
    let ciphertext=CryptoJS.enc.Base64.stringify(baseResult);     // Base64解密
    let decryptResult = CryptoJS.AES.decrypt(ciphertext,key, {    //  AES解密
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });
    return CryptoJS.enc.Utf8.stringify(decryptResult)

}

因为项目比较赶,这个加密解密的过程虽然捣鼓出来了,但是还有很多东西不求甚解,以后会细致研究该加密方式的使用方法,再做补充。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CryptoJS 加密的使用方法 的相关文章

  • 环信IM Demo登录方式如何修改为自己项目的?

    在环信即时通讯云IM 官网下载Demo 本地运行只有 手机 验证码 的方式登录 怎么更改为自己项目的Appkey和用户去进行登录呢 本文以Web端为例 教大家如何更改代码来实现 1 VUE2 Demo vue2 demo源码下载 vue2
  • vue 点击改变数组中选中的icon颜色(结合拖拽实现)

    1 vue 点击改变数组中选中的icon颜色 在Vue中 可以通过使用v bind指令来动态地修改元素的样式 要根据点击事件来改变数组中选中图标的颜色 首先需要定义一个data属性来存储当前被选中的索引值或者其他相关信息 然后 在模板中使用
  • uni.ownloadFile下载下来的文件没有后缀名

    let filepathss plus io convertLocalFileSystemURL data tempFilePath plus io resolveLocalFileSystemURL filepathss function
  • Typecho 最新XC主题 去除域名授权全解密源码

    简介 Typecho 最新XC主题 去除域名授权全解密源码 这是一款多样式主题 首页支持六种主题样式 支持Pjax优化访问速度 多种单页 如友链 说说等 评论支持表情 自定义编辑器 支持其他样式功能 该主题功能性挺高 比较花里胡哨 感觉有一
  • CMAKE_MAKE_PROGRAM is not set 解读

    目录 CMAKE MAKE PROGRAM 未设置 错误原因 解决方案 示例1 GNU Make 示例2 Ninja CMakeLists txt 的结构 示例 CMakeLists txt 文件 总结 CMAKE MAKE PROGRAM
  • 前端必备的 web 安全知识手记

    前言 安全这种东西就是不发生则已 一发生则惊人 作为前端 平时对这方面的知识没啥研究 最近了解了下 特此沉淀 文章内容包括以下几个典型的 web 安全知识点 XSS CSRF 点击劫持 SQL 注入和上传问题等 下文以小王代指攻击者 话不多
  • 每天10个前端小知识 <Day 8>

    1 Javascript中如何实现函数缓存 函数缓存有哪些应用场景 函数缓存 就是将函数运算过的结果进行缓存 本质上就是用空间 缓存存储 换时间 计算过程 常用于缓存数据计算结果和缓存对象 缓存只是一个临时的数据存储 它保存数据 以便将来对
  • 前端基础:回顾es6相关知识

    Author note 题记 ECMAscript is international standard of javascript ECMA 是 js的国际标准版语言 let and const 为什么之前用var现在需要用let cons
  • 基于java的饮食分享平台系统设计与实现

    基于java的饮食分享平台系统设计与实现 I 引言 A 研究背景和动机 近年来 随着人们生活水平的提高和健康意识的增强 饮食健康已经成为越来越多人的关注焦点 因此 一个方便快捷的饮食分享平台就显得尤为重要 基于Java的饮食分享平台系统设计
  • 基于java的web仓库管理系统设计与实现

    基于java的web仓库管理系统设计与实现 I 引言 A 研究背景和动机 基于Java的Web仓库管理系统是近年来快速发展的领域之一 它提供了丰富的功能 如数据存储 数据检索 数据分析和数据可视化等 本文将重点介绍基于Java的Web仓库管
  • 探索Web开发的未来——使用KendoReact服务器组件

    Kendo UI 是带有jQuery Angular React和Vue库的JavaScript UI组件的最终集合 无论选择哪种JavaScript框架 都可以快速构建高性能响应式Web应用程序 通过可自定义的UI组件 Kendo UI可
  • 低代码-添加按钮组件设计

    效果图 可拆分为以下细节 按钮列表 删除 两个操作需同步删除 点击外侧删除 点击复选框删除 添加 点击复选框添加 示例代码 技术栈 vue3 arco design ts less tailwindcss
  • Vue中下载不同文件常用的方式

    1 使用window open方法下载文件
  • 深入解析 YAML 配置文件:从语法到最佳实践

    一 认识YAML YAML YAML Ain t Markup Language 是一种人类可读的数据序列化语言 它的设计目标是使数据在不同编程语言之间交换和共享变得简单 YAML采用了一种简洁 直观的语法 以易于阅读和编写的方式表示数据结
  • 如何在 Python 脚本中使用 Google OAuth2

    在使用 Python 脚本将视频上传到 YouTube 频道时 若希望将视频上传到第二个频道 需要解决 OAuth2 授权的问题 解决方案 创建新的 Google Cloud 项目 from google oauth2 import ser
  • Crypto++ AES 解密如何?

    那里几乎没有关于 crypto 的菜鸟指南 或者无论如何我都没有找到 我想要做的是解密使用另一个 AES 加密器生成的 uchar 数组 我该从哪里开始呢 我已经建立了图书馆并链接了盛大的图书馆 我是否需要设置任何内容 或者只是在数组上调用
  • 创建ECDSA公钥给定曲线和公共点?

    我正在努力从公钥的字符串表示形式创建 ECDSA 公钥 即 string devicePublicKey 86FB5EB3CA0507226BE7197058B9EC041D3A3758D9D9C91902ACA3391F4E58AEF13
  • 如何解码非关键ASN1数据?

    是否可以使用 crypto 库来解码字节数组中的任意 ASN1 数据 其中有几个序列和整数 ash h 包含所有以 BufferedTransformation 作为输入的方法 但该类是不同密码和哈希的接口 这似乎与我的简单情况根本无关 我
  • 在 Mac OS X 上安装 Crypto++ 5.6.2

    我正在尝试在我的 Mac 上安装 Crypto 5 6 2 当我跑步时 make j4 libcryptopp a 我收到以下错误 libtool unrecognized option static libtool Try libtool
  • 由于 targetSdkVersion 未找到库(armeabi-v7a 和 libcryptopp.so)

    我创建了一个示例项目 它使用 Crypto 的本机 C 库和 NDK 来生成一些 ECDH 密钥对 你可以找到该项目here http github com tcolligan ap ECDHTest 该项目在大多数 Android 设备上

随机推荐

  • Thrift、Dubbo、Spring Cloud 和 gRPC

    何为RPC RPC Remote Procedure Call 远程过程调用 是一种进程间通信方式 是一种技术的思想 而不是规范 它允许程序调用另一个地址空间 通常是共享网络的另一台机器上 的过程或函数 而不用程序员显式编码这个远程调用的细
  • 计算机常用函数及写法,计算机常用的函数公式有哪些?

    01 计算机常用的函数公式包括RANK函数 COUNTIF函数 IF函数 ABS函数 AND函数 AVERAGE函数 COLUMN 函数等 RANK函数是Excel计算序数的主要工具 它的语法为 RANK number ref order
  • 现代OpenGL教程 01 - 入门指南

    文章转载自 http huangwei pro 2015 05 modern opengl1 以下是我学习opengl得到的启示最多的一篇文章 我强烈地建议大家去读一下这位大神的相关系列的文章 还有https github com tomd
  • Allegro约束管理器的设置

    1 打开约束管理器 2 设置管理器 黄色表示未打开 右击 选择analysis mode打开 3 添加物理规则 修改的数据 4 建立组 同时选中几个网络 右击选择Create New Group新建一个组 修改组的规则里面的网络也都跟着修改
  • Orangepi Zero2 全志H616 的初识

    Q 为什么要学习香橙派 A 在之前对于Linux系统的学习 其内容主要是对于系统API的掌握 而很难进行外设的交互 Linux系统很强大 如果能够结合外设 可以做出STM32 C52等单片机无法实现的复杂项目 而我们可以通过将Linux系统
  • Python 中导入csv数据的三种方法

    这篇文章主要介绍了Python 中导入csv数据的三种方法 内容比较简单 非常不错 具有一定的参考借鉴价值 需要的朋友可以参考下微点阅读小编收集的文章介绍 Python 中导入csv数据的三种方法 具体内容如下所示 1 通过标准的Pytho
  • lnmp集群的搭建及优化

    文章目录 lnmp 名词解释 搭建 mysql nginx php 一键安装 优化及应用 Discuz论坛搭建 php增加memcache模块 nginx添加memcache模块 tomcat lnmp 名词解释 LNMP是指一组通常一起使
  • 服务器上配置jupyter并使用浏览器远程连接

    一 服务器上配置jupyter 1 安装jupyter 执行两条安装命令 conda install ipykernel conda install jupyter 2 添加配置文件 jupyter notebook generate co
  • vi vim快捷键

    快捷键 行为 x 删除光标所在后面的字符 X 删除光标所在前面的字符 d e 删除光标所在位置到本单词末尾 d E 删除光标所在位置到本单词末尾包括标点符号 d b 删除光标所在位置到前面单词 d B 删除光标所在位置到前面单词包括标点符号
  • 机器学习——Boosting、提升树、随机森林(Random Forest)学习笔记

    大数据工作室学习打卡 第 N 次 一 Boosting 提升 1 什么是集成学习 首先 我们得先了解什么是集成学习 集成学习是一种通过组合弱学习器来产生强学习器的通用且有效的方法 简单来说 就是通过训练多个分类器 然后将其组合起来 从而达到
  • 定时开机电路设计

    在一些情况下 比如电池供电 需要定时采集数据并传输 并且对功耗要求比较高时 就需要电路实现采集完成后关机 且能够定时自动启动的功能 一种方法是 采集完成后 通过单片机关闭外围电路的电源 且单片机本身处于低功耗模式 只保留RTC工作 设置定时
  • 为女朋友写一个小程序(四)— —前端小程序的设计与实现

    为女朋友写一个小程序 一 目的与需求 为女朋友写一个小程序 二 数据库设计 为女朋友写一个小程序 三 基于springboot的服务器端接口设计与实现 为女朋友写一个小程序 四 前端小程序的设计与实现 本文 为女朋友写一个小程序 五 如何用
  • Tensorflow常见报错

    1 SyntaxError Non ASCII character xe5 in file 弹出的错误提示 这个错误是初学者常犯的错误 在写代码时一定要注意 问题原因 Python默认是以ASCII作为编码方式的 如果在自己的Python源
  • train loss 和 test loss的关系与作用(总结)

    train loss 不断下降 test loss不断下降 说明网络仍在学习 最好的 train loss 不断下降 test loss趋于不变 说明网络过拟合 max pool或者正则化 train loss 趋于不变 test loss
  • 【云原生之kubernetes】kubernetes集群下的健康检查使用方法

    云原生之kubernetes kubernetes集群下的健康检查使用方法 一 k8s健康检查介绍 1 k8s健康检查简介 2 k8s健康检查作用 二 检查本地kubernetes集群状态 1 检查工作节点状态 2 检查系统pod状态 三
  • 以太坊如何发布NFT到opensea

    前提说明 此篇文章主要讲解 如何发布类似于网址 https killaznft com 或者 https thesevensofficial com 这种基于项目方的NFT 进行网页售卖以及上架到OpenSea上进行展示和售卖的过程 对技术
  • 记录帖——项目中出现的某些问题

    1 问题 自制的PCB板串口出现某些未知的错误 硬件平台 芯片是STM32F103RBT6 引出了3个串口 1个I2C SWD烧写 USART1接ESP8266 用于输出字符串 USART2接MPU6050 串口输出 USART3接GPS
  • leetcode刷题(77)——312. 戳气球

    一 题目 有 n 个气球 编号为0 到 n 1 每个气球上都标有一个数字 这些数字存在数组 nums 中 现在要求你戳破所有的气球 每当你戳破一个气球 i 时 你可以获得 nums left nums i nums right 个硬币 这里
  • jenkins项目配置的gitee显示无法连接到仓库

    jenkins项目配置的gitee显示无法连接到仓库 stderr fatal Unable to read current working directory No such file or directory 排查了半天发现git配置啥
  • CryptoJS 加密的使用方法

    因为公司的项目中用到了接口加密解密 所以百度了一下前端JS加密相关的文章 发现谷歌的CryptoJS挺好用的 因为项目用的是vue框架 记录一下项目中使用经验 首先使用npm安装CryptoJS npm install crypto js