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对象和Dom对象的区别分析
Nov 20 Javascript
简介JavaScript中Boolean.toSource()方法的使用
Jun 05 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 Javascript
JS实现的排列组合算法示例
Jul 16 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 Javascript
JavaScript Image对象实现原理实例解析
Aug 26 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
adodb与adodb_lite之比较
2006/12/31 PHP
Dedecms常用函数解析
2008/02/01 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
php递归函数怎么用才有效
2018/02/24 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
Laravel5.5 实现后台管理登录的方法(自定义用户表登录)
2019/09/30 PHP
Javascript Math对象
2009/08/13 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
python自定义类并使用的方法
2015/05/07 Python
python处理html转义字符的方法详解
2016/07/01 Python
Python端口扫描简单程序
2016/11/10 Python
python安装scipy的方法步骤
2019/06/26 Python
python网络编程之五子棋游戏
2020/05/14 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
大专计算机个人求职的自我评价
2013/10/21 职场文书
学校花圃的标语
2014/06/18 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS