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中this关键字(翻译+自我理解)
Oct 20 Javascript
纯js实现背景图片切换效果代码
Nov 14 Javascript
javascript编码的几个方法详细介绍
Jan 06 Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
AngularJS基础学习笔记之表达式
May 10 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 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
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
javascript 短路法代码精简
2009/08/20 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
浅谈es6 javascript的map数据结构
2017/12/14 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
Bootstrap4如何定制自己的颜色和风格
2018/02/26 Javascript
Vue仿支付宝支付功能
2018/05/25 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
python中id函数运行方式
2020/07/03 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
新年团拜会主持词
2014/04/02 职场文书
2014年清明节寄语
2014/04/03 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
美术指导助理求职信
2014/04/20 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
教师个人年终总结
2015/02/11 职场文书
2015年党建工作总结
2015/03/30 职场文书
教师继续教育反思周记
2015/06/25 职场文书
2016年父亲节寄语
2015/12/04 职场文书
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server