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检测是否联网的实现代码
Sep 28 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
关于vue表单提交防双/多击的例子
Oct 31 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实现即时输出、实时输出内容方法
2015/05/27 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
在小程序中使用canvas的方法示例
2018/09/17 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
python中的列表推导浅析
2014/04/26 Python
初步解析Python中的yield函数的用法
2015/04/03 Python
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
pip命令无法使用的解决方法
2018/06/12 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
Django发送邮件功能实例详解
2019/09/02 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
基于python调用psutil模块过程解析
2019/12/20 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
Python的信号库Blinker用法详解
2020/12/31 Python
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
护理学中专毕业生求职信
2013/11/11 职场文书
市场推广策划方案
2014/06/02 职场文书
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS