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两种模式）,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 在Vue项目中使用jsencrypt.js对数据进行加密传输的方法

    项目需求中需要对用户登录时的密码进行加密,在网上查询些许文章后,最终与后端协商使用jsencrypt.js. jsencrypt.js的github地址: https://github.com/travist/js... 使用yarn安装至Vue项目 yarn add jsencrypt --dep 或者使用npm npm install jsencrypt --dep 引入jsencrypt import { JSEncrypt } from 'jsencrypt' 可封装为全局混合,便于调用

  • vue的Virtual Dom实现snabbdom解密

    vue的Virtual Dom实现snabbdom解密

    vue在官方文档中提到与react的渲染性能对比中,因为其使用了snabbdom而有更优异的性能. JavaScript 开销直接与求算必要 DOM 操作的机制相关.尽管 Vue 和 React 都使用了 Virtual Dom 实现这一点,但 Vue 的 Virtual Dom 实现(复刻自 snabbdom)是更加轻量化的,因此也就比 React 的实现更高效. 看到火到不行的国产前端框架vue也在用别人的 Virtual Dom开源方案,是不是很好奇snabbdom有何强大之处呢?不过正式

  • VueJs里利用CryptoJs实现加密及解密的方法示例

    第一步 安装 安装crypto-js 第二步 创建 在js文件目录下创建一个js文件secret /** * 对页面上输入的密码进行加密传输给后台进行验证,对返回的数据进行解密,在页面展示 */ let CryptoJS = require('crypto-js'); // 引入AES源码js export default { /* * 对密码进行加密,传输给后台进行验证 * @param {String} word 需要加密的密码 * @param {String} keyStr 对密码加密的

  • 在vue项目中使用md5加密的方法

    npm安装: npm install --save js-md5 1.在需要使用的项目文件中引入: import md5 from 'js-md5'; 使用: md5('hello world')  // 5eb63bbbe01eeed093cb22bb8f5acdc3 2.或者在main.js文件中将md5转换成vue原型: import md5 from 'js-md5'; Vue.prototype.$md5 = md5; 使用: this.$md5('hello world') // 5

  • vue.js使用3DES加密的方法示例

    本文实例讲述了vue.js使用3DES加密的方法.分享给大家供大家参考,具体如下: 如何在VUE-CLI手脚架建立的工程中使用3des加密: npm install crypto-js --save-dev import CryptoJS from 'crypto-js' //DES加密 Pkcs7填充方式 encryptByDES(message, key){ const keyHex = CryptoJS.enc.Utf8.parse(key); const encrypted = Cryp

  • vue项目中 使用 pako.js 解密 gzip加密字符串的代码详解

    前言 今天跟后台对接一个接口,接受到一个加密的值,说是通过gzip加密过的,然后就蒙蔽了, 赶紧上百度找了一下资料,通过一篇文章(原文在底部)发现有个js库可以解密,就下载轻松解密了 实现代码 poko.js可至Github下载 https://github.com/nodeca/pako or npm install pako import pako from 'pako' // 一个是加密:window.btoa(),一个是解密:window.atob() function decode(e

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

    vue项目中使用AES实现密码加密解密 区别 ECB:是一种基础的加密方式,密文被分割成分组长度相等的块(不足补齐),然后单独一个个加密,一个个输出组成密文. CBC:是一种循环模式,前一个分组的密文和当前分组的明文异或或操作后再加密,这样做的目的是增强破解难度.(不容易主动攻击,安全性好于ECB,是SSL.IPSec的标准) 代码实现 先安装 crypto-js npm install crypto-js --save-dev ECB模式: import CryptoJS from "cryp

  • vue项目在安卓低版本机显示空白的原因分析(两种)

    vue项目在安卓低版本机显示空白原因: 可能的原因一 查看安卓debug,报错,可能有箭头函数语法错误,或者其他语法问题,那可能是ES6语法问题. 这时候需要安装babel-pollyfill. 网上找到方法如下: https://www.jb51.net/article/146840.htm 1.安装babel-polyfill和es6-promise npm i babel-polyfill --save npm i es6-promise --save 2.main.js引入  impor

  • Vue项目中使用jquery的简单方法

    Vue项目中使用jquery的简单方法

    前言 在vue项目中,需要实现某些特定的功能时,使用mvvm模式不易实现.因此引入jquery包来完成需求 jquery中的触发事件可以自己定义在mounted中,如果需要使用vue中data的数据,直接使用this.msg是无法使用的,需要另外定义const _this = this, 存储this.之后便可以在事件中使用_this.msg数据了. 需求:在品牌处可以输入,并且会有模糊搜索的下拉框,也可下拉选择,在输入完毕后检验值是否在下拉框中存在,聚焦时蓝色边框,change时如果不存在则红

  • Java使用Hutool实现AES、DES加密解密的方法

    在Java世界中,AES.DES加密解密需要使用Cipher对象构建加密解密系统,Hutool中对这一对象做再包装,简化了加密解密过程. 介绍 AES和DES同属对称加密算法,数据发信方将明文(原始数据)和加密密钥一起经过特殊加密算法处理后,使其变成复杂的加密密文发送出去.收信方收到密文后,若想解读原文,则需要使用加密用过的密钥及相同算法的逆算法对密文进行解密,才能使其恢复成可读明文.在对称加密算法中,使用的密钥只有一个,发收信双方都使用这个密钥对数据进行加密和解密,这就要求解密方事先必须知道加

  • vue项目中js-cookie的使用存储token操作

    1.安装js-cookie # npm install js-cookie --save # yarn add js-cookie 2.引用(需要的文件) import Cookies from 'js-cookie' const TokenKey = 'Admin-Token' export function getToken() { return Cookies.get(TokenKey) } export function setToken(tcuncuoken) { return Coo

  • Vue项目中添加锁屏功能实现思路

    1. 实现思路 ( 1 ) 设置锁屏密码 ( 2 ) 密码存localStorage (本项目已经封装h5的sessionStorage和localStorage) ( 3 ) vuex设置 SET_LOCK state.isLock = true (为true是锁屏状态) ( 4 ) 在路由里面判断vuex里面的isLock(为true锁屏状态不能让用户后退url和自行修改url跳转页面否则可以) (1)设置锁屏密码 handleSetLock() { this.$refs['form'].v

  • vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解

    vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解

    1.如果只使用config配置的相关js接口 可采用如下方式引入 执行 npm weixin-sdk-js --save 局部引入 在vue页面中 import wx from 'weixin-sdk-js'; 全局引入 在vue 的main.js 页面中 引入后编写到vue原型链上,然后全局调用 import wx from "weixin-sdk-js"; Vue.prototype.$wx = wx; 2.如果要使用agentConfig配置的相关接口 一定不要执行npm命令引入

随机推荐