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新闻滚动插件 jquery.roller.js
Jun 27 Javascript
Jquery在指定DIV加载HTML示例代码
Feb 17 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
nginx配置React静态页面的方法教程
Nov 03 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
微信小程序8种数据通信的方式小结
Feb 03 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天翼开放平台短信发送接口实现方法
2014/12/22 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
微信小程序删除处理详解
2017/08/16 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
JS通过位运算实现权限加解密
2018/08/14 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
举例介绍Python中的25个隐藏特性
2015/03/30 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
在双python下设置python3为默认的方法
2018/10/31 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
python如何随机生成高强度密码
2020/08/19 Python
pandas实现导出数据的四种方式
2020/12/13 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
法律进学校实施方案
2014/03/15 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
正规借条模板
2015/05/26 职场文书
辩论赛新闻稿
2015/07/17 职场文书
实习感想范文
2015/08/10 职场文书
详解Python生成器和基于生成器的协程
2021/06/03 Python