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 设计模式(二) 闭包
May 26 Javascript
javascript中length属性的探索
Jul 31 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 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 从数据库提取二进制图片的处理代码
2009/09/09 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
js实现表格筛选功能
2017/01/18 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
JS基于ES6新特性async await进行异步处理操作示例
2019/02/02 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
python封装对象实现时间效果
2020/04/23 Python
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
简单介绍Python中的decode()方法的使用
2015/05/18 Python
Python实现获取命令行输出结果的方法
2017/06/10 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
创业者是否需要商业计划书?
2014/02/07 职场文书
公司担保书范文
2014/05/21 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
爱国主义影片观后感
2015/06/18 职场文书