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 json 新手入门文档
Dec 03 Javascript
理解Javascript_12_执行模型浅析
Oct 18 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
Bootstrap模态对话框的简单使用
Apr 29 Javascript
前端jquery部分很精彩
May 03 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
如何使用puppet替换文件中的string
Dec 06 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+MySQL的聊天室设计
2006/10/09 PHP
php中namespace use用法实例分析
2016/01/22 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
jQuery最佳实践完整篇
2011/08/20 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
node获取客户端ip功能简单示例
2019/08/24 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
简单了解Python中的几种函数
2017/11/03 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
超市采购员岗位职责
2014/02/01 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
合作协议书模板2014
2014/09/26 职场文书
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python