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
  • uni.ownloadFile下载下来的文件没有后缀名

    let filepathss plus io convertLocalFileSystemURL data tempFilePath plus io resolveLocalFileSystemURL filepathss function
  • CMAKE_MAKE_PROGRAM is not set 解读

    目录 CMAKE MAKE PROGRAM 未设置 错误原因 解决方案 示例1 GNU Make 示例2 Ninja CMakeLists txt 的结构 示例 CMakeLists txt 文件 总结 CMAKE MAKE PROGRAM
  • 浏览器缓存相关面试题一网打尽,理论结合实践,用代码学习缓存问题,建议关注+收藏,(含项目源代码)

    前言 浏览器缓存的问题是面试中关于浏览器知识的重要组成部分 也是性能优化题目的一部分 但是不要被吓到 我话放到这里 就那么点东西 我这一篇文章基本上就涵盖了所有相关的知识点 认真看一遍 所有的问题都是纸老虎 一 准备工作 1 1 拉取仓库
  • 如何给 unplugin-vue-components/vite 写一个简单的 resolver

    大部分工作 unplugin vue components 都已经处理好了 我们只需要接收组件名来判断是否是自己的组件 然后处理对应的导入逻辑 一共 3 个字段 as 重命名类似 import componentNameReName fro
  • 基于java的饮食分享平台系统设计与实现

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

    基于java的web仓库管理系统设计与实现 I 引言 A 研究背景和动机 基于Java的Web仓库管理系统是近年来快速发展的领域之一 它提供了丰富的功能 如数据存储 数据检索 数据分析和数据可视化等 本文将重点介绍基于Java的Web仓库管
  • 软件测试|web自动化测试神器playwright教程(三十八)

    简介 在我们使用selenium时 我们可以获取元素的属性 元素的文本值 以及输入框的内容等 作为比selenium更为强大的web自动化测试神器 playwright也可以实现对元素属性 文本值和输入框内容的抓取 并且实现比seleniu
  • 【gee】下载modis土地利用类型

    var china ee FeatureCollection projects assets china boundary var lc dataset ee ImageCollection MODIS 061 MCD12Q1 filter
  • Vue3 和Vue2的区别,以及钩子函数的使用

    Vue js 3 和 Vue js 2 是两个主要版本的流行前端框架 它们之间有很多区别 包括性能优化 新特性和改进的API等 以下是一些Vue 3与Vue 2之间的主要区别 以及一些示例代码来说明这些差异 1 性能优化 响应式系统 Vue
  • 低代码配置-列表页组件设计

    保存 表单属性存放 bill 筛选项配置存放 filterLayout 列表按钮存放 buttonLayout 列表布局存放 listLayout api存放 api 数据结构 layout 存放表单基础配置 bill 存放按钮基础配置 b
  • 低代码配置-属性配置面板设计

    模块设计 tab项切换 组件基础属性 组件数据属性 组件事件属性 表单属性 模块输出函数设计 tab切换函数 列表表单属性 数据来源 调用接口时一次赋予 无需使用selectItem 如需使用 归入基础属性 列表标题 是否展示筛选区域
  • 新手也能看懂的【前端自动化测试入门】!

    前言 最近在网上搜索前端自动化测试相关的文档 但是发现网上的文章都是偏使用 没有把一些基础概念说清楚 导致后续一口气遇到一些 karma Jasmine jest Mocha Chai BDD 等词汇的时候很容易一头雾水 这次一方面整理一下
  • chrome浏览器无法在地址栏输入内容搜索问题解决--图文

    关于日常遇到的小问题解决记录一下 1 导航栏录入信息后跳转错误 2 解决办法 默认百度搜索引擎地址错误 百度正确的搜索格式是 http www baidu com s wd s chrome浏览器中百度的搜索格式是 http www bai
  • 【js学习之路】遍历数组api之 `filter `和 `map`的区别

    一 前言 数组是我们在项目中经常使用的数据类型 今天我们主要简述作用于遍历数组的api filter 和 map 的区别 二 filter和map的共同点 首先 我们主要阐述一下 filter 和 map 的共同点 api的参数都是回调函数
  • 【前端】canvas图片加文字

    注释标记了操作步骤 import React Component createRef from react class CertifyImgRender extends Component bgRef createRef
  • Crypto++ AES 解密如何?

    那里几乎没有关于 crypto 的菜鸟指南 或者无论如何我都没有找到 我想要做的是解密使用另一个 AES 加密器生成的 uchar 数组 我该从哪里开始呢 我已经建立了图书馆并链接了盛大的图书馆 我是否需要设置任何内容 或者只是在数组上调用
  • Crypto++ 输出数据长度

    我正在尝试使用 Crypto 库中的 AES 加密 CBC Mode
  • 使用 Crypto++ 库以 CBC 模式实现 AES128

    在输入文件中我有 第一行是一个以十六进制编码的密钥 长度为 16 个字节 在第二行加密消息 CBC 模式下的 AES128 在加密消息前面添加随机 iv 这就是我尝试解密的方法 include
  • 跳过源无法按预期工作

    我使用 Crypto 5 6 3 并且我需要FileSource Skip 功能 不幸的是这个函数什么也没做 这是一个例子function https www cryptopp com wiki FileSource string file

随机推荐

  • 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