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


Posted in Javascript onApril 29, 2019

第一步 安装

安装crypto-js

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

第二步 创建

在js文件目录下创建一个js文件secret

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

/**
 * 对页面上输入的密码进行加密传输给后台进行验证,对返回的数据进行解密,在页面展示
 */
let CryptoJS = require('crypto-js'); // 引入AES源码js
export default {
/*
* 对密码进行加密,传输给后台进行验证
* @param {String}   word  需要加密的密码
* @param {String}   keyStr  对密码加密的秘钥
* @return {String}   加密的密文
* */
encrypt(word, keyStr) { // 加密
  keyStr = keyStr ? keyStr : 'ABGHNJHGSHUYG12';
  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();
},
/*
* 对加密之后的密文在页面上进行解密,以便用户进行修改
* @param {String}   word  需要加密的密码
* @param {String}   keyStr  对密码加密的秘钥
* @return {String}   解密的明文
* */
decrypt(word, keyStr) { // 解密
  keyStr = keyStr ? keyStr : 'ABGHNJHGSHUYG12';
  let key = CryptoJS.enc.Utf8.parse(keyStr);
  let decrypt = CryptoJS.AES.decrypt(word, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  });
  return CryptoJS.enc.Utf8.stringify(decrypt).toString();
},
};

第三步,引入

在具体的加解密模块中引入文件

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

并且对需要加密的密码使用加密函数进行加密

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

encrypt是加密函数

第一个参数是需要加密的明文

第二个参数是加密过程中使用的秘钥

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javaScript 数值型和字符串型之间的转换
Jul 25 Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
Jan 15 Javascript
基于Jquery实现的一个图片滚动切换
Jun 21 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
理解javascript中的原型和原型链
Jul 30 Javascript
浅析Bootstrap表格的使用
Jun 23 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 #Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 #Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 #Javascript
详解VUE项目中安装和使用vant组件
Apr 28 #Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
Apr 28 #Javascript
vue slot与传参实例代码讲解
Apr 28 #Javascript
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 #Javascript
You might like
php 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
基于PHP常用函数的用法详解
2013/05/10 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
PHP实现生成推广海报的方法详解
2018/03/14 PHP
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
python实现在pickling的时候压缩的方法
2014/09/25 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
Python 中Django验证码功能的实现代码
2019/06/20 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
应届毕业生个人自我评价
2013/09/20 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
2015年副班长工作总结
2015/05/15 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
mysql 带多个条件的查询方式
2021/06/05 MySQL