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 相关文章推荐
jquery 简短右键菜单 多浏览器兼容
Jan 01 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
轻松搞定jQuery.noConflict()
Feb 15 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 Javascript
详解vue-cli之webpack3构建全面提速优化
Dec 25 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
layui使用label标签的方法
Sep 14 Javascript
Node.js API详解之 vm模块用法实例分析
May 27 Javascript
JavaScript 判断浏览器是否是IE
Feb 19 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的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
Python中turtle库的使用实例
2019/09/09 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
Oracle快照(snapshot)
2015/03/13 面试题
动态密码技术
2012/10/18 面试题
建筑设计学生的自我评价
2014/01/16 职场文书
毕业寄语大全
2014/04/09 职场文书
公共场所标语
2014/06/30 职场文书
承诺书范本大全
2015/05/04 职场文书
大学生暑假实习总结
2015/07/13 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
粗暴解决CUDA out of memory的问题
2021/05/22 Python
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android