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 相关文章推荐
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
通过实例解析javascript Date对象属性及方法
Nov 04 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
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
php获取mysql数据库中的所有表名的代码
2011/04/23 PHP
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
JavaScript表格常用操作方法汇总
2015/04/15 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
layui时间控件选择时间范围的实现方法
2019/09/28 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
高考备战决心书
2014/03/11 职场文书
四群教育工作实施方案
2014/03/26 职场文书
演讲稿格式
2014/04/30 职场文书
企业法人代表证明书
2014/09/27 职场文书
学校捐款活动总结
2015/05/09 职场文书
python如何做代码性能分析
2021/04/26 Python