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 相关文章推荐
javascript中的几个运算符
Jun 29 Javascript
关于js new Date() 出现NaN 的分析
Oct 23 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
利用python分析access日志的方法
Oct 26 Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 Javascript
javascript读取本地文件和目录方法详解
Aug 06 Javascript
vue实现列表拖拽排序的功能
Nov 02 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 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
虫族 Zerg 热键控制
2020/03/14 星际争霸
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
javascript处理table表格的代码
2010/12/06 Javascript
javascript中常用编程知识
2013/04/08 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
js获取系统的根路径实现介绍
2013/09/08 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
javascript中的previousSibling和nextSibling的正确用法
2015/09/16 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
Python 文件管理实例详解
2015/11/10 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
virtualenv介绍及简明教程
2020/06/23 Python
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
实习教师自我鉴定
2013/12/12 职场文书
工程资料员岗位职责
2014/03/10 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
钱学森观后感
2015/06/04 职场文书
SQL Server中搜索特定的对象
2022/05/25 SQL Server