【干货】VueJs里利用CryptoJs实现Md5加密和3Des加密及解密

前言

前我们介绍的用于vue用于数据签名的操作,《【干货】Vue TypeScript根据类生成签名字符串》,其目的就是用于生成这个再转MD5加密的模式进行校验,原来我们在C#和Android里面已经实现这些方式,因为前端准备用Vue来做,所以加密这块少不了也需要实现的。

视频效果演示

视频内容

安装Crypto

Crypto里面可以把md5和3des都一起做了,所以我们直接安装这个比较方便

找到我们的程序目录,按住Shift加鼠标右键,选择在此处打开Powershell窗口

然后在cmd窗口里面输入npm install crypto-js -save-dev

安装完成后可以看到红框下面标注着成功了。

代码演示

MD5加密

我们还是用上次签名的那个项目里面,首先要先引用Crypto-js

getmd5,我们再写一个GetMd5的方法,传入的字符串直接生成MD5的字符返回,

接下来再定义一个双向绑定的字符串,在点击签名的时候同时生成md5的字符串显示的页面上

运行后的效果


3DES加密、解密

核心代码

加密

Encrypt3Des(str: string, aStrKey: string, ivstr: string): string { const KeyHex = CryptoJS.enc.Utf8.parse(aStrKey); const encrypted = CryptoJS.TripleDES.encrypt(str, KeyHex, { mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7, iv: CryptoJS.enc.Utf8.parse(ivstr) }); let hexstr = encrypted.ciphertext.toString().toUpperCase(); console.log(hexstr); return hexstr; }

一般网上的加解密最后红框这里我们直接是输出 return encrypted.tostring(),但是因为我们自己的C#和Android的3Des的加解密都是最后输出的16进制的字符串,所以我们改为红框这里输出的样式。


解密

Decrypt3Des(str: string, aStrKey: string, ivstr: string): string { const KeyHex = CryptoJS.enc.Utf8.parse(aStrKey); //因为我们加密的时候用到的16进制字符串,需要进行转换 //第一步把16进制字符串转为WordArray格式 const WordArray = CryptoJS.enc.Hex.parse(str); //第二步把WordArray再转为base64的字符串 const base64str = CryptoJS.enc.Base64.stringify(WordArray); //第三步再进行解密 const decrypted = CryptoJS.TripleDES.decrypt(base64str, KeyHex, { mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7, iv: CryptoJS.enc.Utf8.parse(ivstr) }); return decrypted.toString(CryptoJS.enc.Utf8); }

这里比较重要就是红框里面,因为我们的加密最后输出的是16进制的字符串,所以我们解密的时候首先要把16进制字符串转为WordArray格式,再转换为BASE64的字符串,最后再进行解密。因为我也是个前端小白,就是这个问题我也是研究了一下午才搞明白。

最后下面的黄框要注意输出的字符要转为Utf8。


其余设置

我们在test.ts里面定义了两个字符串,一个des3encryptstr的加密后的字符串,一个des3decryptstr是解密后的字符串,然后又加上了两个方法,一个是加密的方法btnencrypt,一个是解密的方法btndecrypt,分别调用的就是我们刚才写的两段核心代码。

然后在test.vue.html里面加上双向绑定显示以及一个加密按钮和一个解密按钮。

页面效果

未加密的效果

点击加密后的效果

点击解密后的效果

本文分享自微信公众号 - 微卡智享(VaccaeShare)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-06-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java技术栈

一文搞懂 Java 线程中断

在之前的一文《如何"优雅"地终止一个线程》中详细说明了 stop 终止线程的坏处及如何优雅地终止线程,那么还有别的可以终止线程的方法吗?答案是肯定的,它就是我们...

11040
来自专栏编程坑太多

『互联网架构』软件架构-分布式集中配置中心Spring Cloud Config详解(上)(103)

PS:分布式集中配置中心Spring Cloud Config 确实功能很强大,这次咱们主要说下,如果制作server,client端如何获取,而且还说了加密和...

13440
来自专栏JAVA葵花宝典

SpringBoot 2.x ShardingSphere分库分表实战

在之前我做项目的时候,数据量比较大,单表千万级别的,需要分库分表,于是在网上搜索这方面的开源框架,最常见的就是mycat,sharding-sphere,最终我...

47540
来自专栏Java技术栈

Java 中的 String 真的是不可变的吗?

我们都知道 Java 中的 String 类的设计是不可变的,来看下 String 类的源码。

6630
来自专栏Java技术栈

Netty 如何实现心跳机制与断线重连?

所谓心跳, 即在 TCP 长连接中, 客户端和服务器之间定期发送的一种特殊的数据包, 通知对方自己还在线, 以确保 TCP 连接的有效性.

17120
来自专栏Java技术栈

教你用 3 台机器搞定一个 Redis 高可用架构

基于内存的 Redis 应该是目前各种 Web 开发业务中最为常用的 key-value 数据库了。

9830
来自专栏Java技术栈

Java开发最常犯的10个错误,打死都不要犯!

原文:http://www.programcreek.com/2014/05/top-10-mistakes-java-developers-make/

6620
来自专栏Java技术栈

Java 11 正式发布,这 8 个逆天新特性教你写出更牛逼的代码

美国时间 09 月 25 日,Oralce 正式发布了 Java 11,这是据 Java 8 以后支持的首个长期版本。

10540
来自专栏Java技术栈

sleep( ) 和 wait( ) 的这 5 个区别,你知道几个?

sleep(休眠) 和 wait(等待) 方法是 Java 多线程中常用的两个方法,它们有什么区别及一些该注意的地方有哪些呢?下面给大家一一分解。

8640
来自专栏Java技术栈

深入浅出 Java 中的包装类

前阵子,我们分享了《Java中的基本数据类型转换》这篇文章,对许多粉丝还是有带来帮助的,今天讲一下 Java 包装类的的由来,及自动装箱、拆箱的概念和原理。

13030

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励