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 相关文章推荐
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
jQuery实现的倒计时效果实例小结
Apr 16 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 Javascript
node.js通过axios实现网络请求的方法
Mar 05 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
vue实现简单图片上传
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连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
jQuery 技巧小结
2010/04/02 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
解析Python中while true的使用
2015/10/13 Python
python开发之基于thread线程搜索本地文件的方法
2015/11/11 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
python实现维吉尼亚加密法
2019/03/20 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
Python如何读取文件中图片格式
2020/01/13 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
django的autoreload机制实现
2020/06/03 Python
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
项目计划书范文
2014/01/09 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
业务内勤岗位职责
2014/04/30 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
工作表扬信范文
2015/01/17 职场文书
学校社团活动总结
2015/05/07 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
毕业欢送会致辞
2015/07/29 职场文书
原生JS实现分页
2022/04/19 Javascript