vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)

 更新时间:2019年08月12日 15:31:45   作者:艾欢欢  
这篇文章主要介绍了vue项目中使用AES实现密码加密解密的方法,主要是通过ecb和cbc两种模式,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

vue项目中使用AES实现密码加密解密

区别

ECB:是一种基础的加密方式,密文被分割成分组长度相等的块(不足补齐),然后单独一个个加密,一个个输出组成密文。

CBC:是一种循环模式,前一个分组的密文和当前分组的明文异或或操作后再加密,这样做的目的是增强破解难度。(不容易主动攻击,安全性好于ECB,是SSL、IPSec的标准)

代码实现

先安装 crypto-js

npm install crypto-js --save-dev

ECB模式:

import CryptoJS from "crypto-js";

export default {
 // 加密
 encrypt(word, keyStr) {
 keyStr = keyStr ? keyStr : "absoietlj32fai12";
 let key = CryptoJS.enc.Utf8.parse(keyStr);
 let srcs = CryptoJS.enc.Utf8.parse(word);
 let encrypted = CryptoJS.AES.encrypt(srcs, key, {
 mode: CryptoJS.mode.ECB,
 padding: CryptoJS.pad.Pkcs7
 });
 return encrypted.toString();
 },
 // 解密
 decrypt(word, keyStr) {
 keyStr = keyStr ? keyStr : "absoietlj32fai12";
 var key = CryptoJS.enc.Utf8.parse(keyStr);
 var decrypt = CryptoJS.AES.decrypt(word, key, {
 mode: CryptoJS.mode.ECB,
 padding: CryptoJS.pad.Pkcs7
 });
 return CryptoJS.enc.Utf8.stringify(decrypt).toString();
 }
};

CBC模式:

import CryptoJS from "crypto-js";

export default {
 // 加密
 encrypt(word, keyStr, ivStr) {
 keyStr = keyStr ? keyStr : "absoietlj32fai12";
 ivStr = ivStr ? ivStr : "absoietlj32fai12";
 let key = CryptoJS.enc.Utf8.parse(keyStr);
 let iv = CryptoJS.enc.Utf8.parse(ivStr);
 let srcs = CryptoJS.enc.Utf8.parse(word);

 let encrypted = CryptoJS.AES.encrypt(srcs, key, {
 iv,
 mode: CryptoJS.mode.CBC,
 padding: CryptoJS.pad.ZeroPadding
 });
 return encrypted.toString();
 },
 // 解密
 decrypt(word, keyStr, ivStr) {
 keyStr = keyStr ? keyStr : "absoietlj32fai12";
 ivStr = ivStr ? ivStr : "absoietlj32fai12";
 var key = CryptoJS.enc.Utf8.parse(keyStr);
 let iv = CryptoJS.enc.Utf8.parse(ivStr);

 var decrypt = CryptoJS.AES.decrypt(word, key, {
 iv,
 mode: CryptoJS.mode.CBC,
 padding: CryptoJS.pad.ZeroPadding
 });
 return decrypt.toString(CryptoJS.enc.Utf8);
 }
};

以上两种模式中的 keyStr 的长度要不小于14位,否则解密时会显示空白

总结

以上所述是小编给大家介绍的vue项目中使用AES实现密码加密解密(ECB和CBC两种模式),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • 基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式

    基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式

    本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果
    2018-01-01
  • 一文带你掌握 Vue3.5常用特性

    一文带你掌握 Vue3.5常用特性

    Vue3.5 发布已近半年,这篇文章主要来和大家技术一下它常用的新增和改动特性,文中的示例代码讲解详细,有需要的小伙伴可以跟随小编一起学习一下
    2025-01-01
  • Vue3组合式API之getCurrentInstance详解

    Vue3组合式API之getCurrentInstance详解

    我们可以通过 getCurrentInstance这个函数来返回当前组件的实例对象,也就是当前vue这个实例对象,下面这篇文章主要给大家介绍了关于Vue3组合式API之getCurrentInstance的相关资料,需要的朋友可以参考下
    2022-09-09
  • vue  elementUI 表单嵌套验证的实例代码

    vue elementUI 表单嵌套验证的实例代码

    这篇文章主要介绍了vue + elementUI 表单嵌套验证,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • 解决el-upload批量上传只执行一次成功回调on-success的问题

    解决el-upload批量上传只执行一次成功回调on-success的问题

    这篇文章主要介绍了解决el-upload批量上传只执行一次成功回调on-success的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue3实现长列表虚拟滚动的示例代码

    vue3实现长列表虚拟滚动的示例代码

    本文主要介绍了vue3实现长列表虚拟滚动的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-01-01
  • Vue2 的12种组件通讯

    Vue2 的12种组件通讯

    之前文章我们描述给过Vue3 的七通信使用,今天中五篇文章我们再来看看Vue2 的通信使用写法的相关资料,需要的朋友可以参考下面文章的具体内容
    2021-09-09
  • Vue.nextTick纯干货使用方法详解

    Vue.nextTick纯干货使用方法详解

    这篇文章主要为大家介绍了Vue.nextTick使用方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue实现商品加减计算总价的实例代码

    vue实现商品加减计算总价的实例代码

    这篇文章主要介绍了vue实现商品加减计算总价的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08
  • 使用vue-infinite-scroll实现无限滚动效果

    使用vue-infinite-scroll实现无限滚动效果

    vue-infinite-scroll插件可以无限滚动实现加载更多,其作用是是当滚动条滚动到距离底部的指定高度时触发某个方法。这篇文章主要介绍了用vue-infinite-scroll实现无限滚动效果,需要的朋友可以参考下
    2018-06-06

最新评论