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中的作用域
Apr 07 Javascript
jQuery实现用户注册的表单验证示例
Aug 28 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
node.js中的http.request方法使用说明
Dec 14 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
JavaScript构造函数详解
Dec 27 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 Javascript
JS数组方法slice()用法实例分析
Jan 18 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 常用字符串函数总结
2008/03/15 PHP
使用php来实现网络服务
2009/09/15 PHP
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
ThinkPHP安装和设置
2015/07/27 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
vue初始化动画加载的实例
2018/09/01 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
Python中zfill()方法的使用教程
2015/05/20 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
PyQt5每天必学之布局管理
2018/04/19 Python
Python读写zip压缩文件的方法
2018/08/29 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
财务会计专业毕业生自荐信
2013/10/19 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书
运动会闭幕词
2015/01/28 职场文书
客户付款通知书
2015/04/23 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
php访问对象中的成员的实例方法
2021/11/17 PHP