crypto-js中AES的加解密封装

本文涉及的产品
密钥管理服务KMS,1000个密钥,100个凭据,1个月
简介: 文章介绍了如何在前端使用crypto-js库进行AES加密和解密,提供了加解密的函数封装示例,并演示了如何加密和解密字符串或对象。

在项目中安装依赖:

npm i crypto-js

在使用的页面引入:

import CryptoJS from 'crypto-js'

crypto-js中AES的加解密简单的封装了一下:

    //加密
    const KEY = '000102030405060708090a0b0c0d0e0f' // 秘钥  这两个需要和后端统一
    const IV = '8a8c8fd8fe33743d3638737ea4a00698' // 偏移量  这两个需要和后端统一
    const encrypt = (word, keyStr, ivStr) => {
   
        // 如果后端想要的是json串的话
        // JSON.stringify(word) // 当然也可以都json一下 不看是否原本是对象
        // 大多数 我们还是使用的 JSON
        word = typeof word === 'object' ? JSON.stringify(word) : word;

        keyStr = keyStr ?? KEY; //判断是否存在ksy,不存在就用定义好的key
        ivStr = ivStr ?? IV;

        // 字符串类型的key用之前需要用uft8先parse一下才能用
        const key = CryptoJS.enc.Utf8.parse(keyStr);
        const iv = CryptoJS.enc.Utf8.parse(ivStr);

        const srcs = CryptoJS.enc.Utf8.parse(word);
        const encrypted = CryptoJS.AES.encrypt(srcs, key,
            {
   
                iv,
                mode: CryptoJS.mode.CBC,
                padding: CryptoJS.pad.Pkcs7
            });
        return encrypted.toString();
    }
    console.log(encrypt({
    a: "zjq" }), '六卿1 加密')
    console.log(encrypt('zjq'), '六卿2 加密')

    // 解密
    const decrypt = (info, keyStr, ivStr) => {
   
        keyStr = keyStr ??  KEY; // 秘钥  这两个需要和后端统一
        ivStr = ivStr ?? IV; // 偏移量  这两个需要和后端统一
        // 字符串类型的key用之前需要用uft8先parse一下才能用
        const key = CryptoJS.enc.Utf8.parse(keyStr);
        const iv = CryptoJS.enc.Utf8.parse(ivStr);
        const decrypt = CryptoJS.AES.decrypt(info, key, {
   
            iv,//偏移量
            mode: CryptoJS.mode.CBC, //加密模式
            padding: CryptoJS.pad.Pkcs7,// 对应后端 PKCS5Padding  补码方式 
        });
        const CryptoJSDecrypt = CryptoJS.enc.Utf8.stringify(decrypt).toString();
        let returnData = null
        try {
   
            returnData = JSON.parse(CryptoJSDecrypt)
        } catch (err) {
   
            returnData = CryptoJSDecrypt
        }
        return returnData
    }
    console.log(decrypt('orYWcztZKmZO+P7UomQ5og=='), '六卿1 解密')
    console.log(decrypt('0WnM4/UsqpUGiJ79SCGTOg=='), '六卿2 解密')

可以直接用,可以加解密字符串或者对象,解密之后也是正常的格式;

在这里插入图片描述

参考:
https://www.cnblogs.com/huiguo/p/16601076.html
https://www.codenong.com/29512858/
https://blog.csdn.net/qq_34402069/article/details/126503916

目录
相关文章
|
7月前
sd.js 2.0封装:更加简化请求传参内容(逐步废弃、逐渐日落2024.01.02)
sd.js 2.0封装:更加简化请求传参内容(逐步废弃、逐渐日落2024.01.02)
|
4月前
|
JavaScript 算法 前端开发
采招网JS逆向:基于AES解密网络数据
采招网JS逆向:基于AES解密网络数据
77 0
|
3月前
|
设计模式 JavaScript
JS发布订阅模式封装(纯手工)
发布订阅模式是JS常用的设计模式,在面试中也会经常遇到,以下是我的手写实现方式,经测试效果不错,小伙伴们们可以直接拷贝使用。
|
4月前
|
JavaScript 数据安全/隐私保护 Python
网易云音乐搜索接口JS逆向: Params、encSecKey加密和AES实战
网易云音乐搜索接口JS逆向: Params、encSecKey加密和AES实战
288 4
|
4月前
|
JavaScript 数据安全/隐私保护 Python
东方财富股票数据JS逆向:secids字段和AES加密实战
东方财富股票数据JS逆向:secids字段和AES加密实战
106 0
|
5月前
|
JavaScript 前端开发 容器
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
218 2
|
5月前
|
JavaScript
js函数封装 —— 金额添加千分位分隔符
js函数封装 —— 金额添加千分位分隔符
74 2
|
6月前
|
自然语言处理 JavaScript 前端开发
JavaScript闭包是函数访问外部作用域变量的能力体现,它用于封装私有变量、持久化状态、避免全局污染和处理异步操作。
【6月更文挑战第25天】JavaScript闭包是函数访问外部作用域变量的能力体现,它用于封装私有变量、持久化状态、避免全局污染和处理异步操作。闭包基于作用域链和垃圾回收机制,允许函数记住其定义时的环境。例如,`createCounter`函数返回的内部函数能访问并更新`count`,每次调用`counter()`计数器递增,展示了闭包维持状态的特性。
57 5
|
6月前
|
存储 移动开发 JavaScript
uni-app 64聊天类chat.js封装(一)
`uni-app` 是一个使用 Vue.js 开发所有前端应用的框架,可以编译到iOS、Android、H5以及各种小程序等多个平台。当你提到“64聊天类`chat.js`封装”时,我假设你希望了解如
|
5月前
|
JavaScript
js 高频实用函数封装汇总(持续更新)
js 高频实用函数封装汇总(持续更新)
41 0