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 相关文章推荐
Ext JS 4官方文档之三 -- 类体系概述与实践
Dec 16 Javascript
阻止子元素继承父元素事件具体思路及实现
May 02 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 Javascript
vuejs2.0子组件改变父组件的数据实例
May 10 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
Vue如何实现监听组件原生事件
Jul 03 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
微信小程序地图导航功能实现完整源代码附效果图(推荐)
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
单位速度在实战中的运用
2020/03/04 星际争霸
为查询结果建立向后/向前按钮
2006/10/09 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
javascript string字符串优化问题
2011/07/31 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
跟老齐学Python之数据类型总结
2014/09/24 Python
解读! Python在人工智能中的作用
2017/11/14 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
Servlet如何得到服务器的信息
2015/12/22 面试题
工艺工程师工作职责
2013/11/23 职场文书
高中毕业自我鉴定
2013/12/19 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书