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 相关文章推荐
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 Javascript
angular+ionic 的app上拉加载更新数据实现方法
Jan 16 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
Sep 30 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 Javascript
Vue.js的模板语法详解
Feb 16 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
Feb 24 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图片上传类带图片显示
2006/11/25 PHP
使用php重新实现PHP脚本引擎内置函数
2007/03/06 PHP
php 静态变量与自定义常量的使用方法
2010/01/26 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
Javascript的比较汇总
2016/07/25 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
Python之os操作方法(详解)
2017/06/15 Python
python求质数列表的例子
2019/11/24 Python
Python中的面向接口编程示例详解
2021/01/17 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
计算机学生求职信范文
2014/01/30 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
优秀工作者事迹材料
2014/12/26 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
浅析NIO系列之TCP
2021/06/15 Java/Android