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 相关文章推荐
js中的escape及unescape函数的php实现代码
Sep 04 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 Javascript
微信小程序 window_x64环境搭建
Sep 30 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
微信小程序支付及退款流程详解
Nov 30 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 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
第二节--PHP5 的对象模型
2006/11/16 PHP
PHP与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
PHP数据集构建JSON格式及新数组的方法
2012/11/07 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
jstree的简单实例
2016/12/01 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
python网络编程实例简析
2014/09/26 Python
朴素贝叶斯算法的python实现方法
2014/11/18 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
python re模块的高级用法详解
2018/06/06 Python
python开发游戏的前期准备
2019/05/05 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
口腔医学技术应届生求职信
2013/11/09 职场文书
公司庆典邀请函范文
2014/01/13 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
七一建党节慰问信
2015/02/14 职场文书
个人年终总结结尾
2015/03/06 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers