在搞前端开发的时候,页面上有很多的地方是需要用户输入信息的,但是有些信息又很敏感,比如客户的姓名、电话号码、身份证号码、银行卡号及密码等等这些,如果没有进行加密处理,很容易被别人截取到,项目中应用到cryptoJS的AES模式加密,然后自己就抽空研究了下,下面是学习的过程

参考文章:

关于CryptoJS中md5加密以及aes加密的随笔

前后端AES加密解密,前端使用CryptoJS,后端Java实现

如何使用CryptoJS的AES方法进行加密和解密

(一)通过cnpm或者npm引入cryptoJS

  npm install crypto-js --save-dev或cnpm install crypto-js --save-dev

(二)在src文件夹下创建一个叫tools的文件夹,然后在tools下创建一个js文件,这里我直接叫jiami.js了(简单粗暴点),目录结构如下:

(三)实现AES加密解密方法

①先引入cryptoJS

  import cryptoJs from 'crypto-js'

②添加加密解密方法并将它们暴露出来,方便引入,代码如下:

'use strict'

import cryptoJs from 'crypto-js'
let keyOne = '313233343536373a' export default {
// 加密函數
jiami (word) {
console.log(word)
console.log('秘钥长度为:', keyOne.length)
let key = cryptoJs.enc.Hex.parse(keyOne)
let enc = ''
if (typeof word === 'string') {
enc = cryptoJs.AES.encrypt(word, key, {
// iv: iv
mode: cryptoJs.mode.ECB,
padding: cryptoJs.pad.Pkcs7
})
} else if (typeof word === 'object') {
let data = JSON.stringify(word)
enc = cryptoJs.AES.encrypt(data, key, {
// iv: iv
mode: cryptoJs.mode.ECB,
padding: cryptoJs.pad.Pkcs7
})
}
let encResult = enc.ciphertext.toString()
return encResult
},
// 解密函數
jiemi (word) {
console.log('传入的密文:', word)
let key = cryptoJs.enc.Hex.parse(keyOne)
let dec = cryptoJs.AES.decrypt(cryptoJs.format.Hex.parse(word), key, {
// vi: vi
mode: cryptoJs.mode.ECB,
padding: cryptoJs.pad.Pkcs7
})
let decData = cryptoJs.enc.Utf8.stringify(dec)
return decData
}
}

(四)引入加密解密方法

  在需要的组件中,引入加密文件即可,这里我是通过别名配置的方法引入进来的,别名配置在另一篇随笔(vue aliasConfig(模块别名配置))中有说明,引入如下:

  import jm from 'jm'

  然后通过jm.jiami和jm.jiemi即可调用jiami.js中的加密和解密方法了,下面放一张效果图:

 注意的地方有几点:(1)加密的秘钥的长度必须是8的整数倍,如果不是,解码的结果为空,这里我还没理解,后面再慢慢学了;(2)我们加密的可能会是字符串或者一个对象,所以加密时得做判断先,方法已经写好了,注意下就行了;(3)实际开发肯定是前后端一起的,所以前后端统一秘钥进行加解密即可

 总结:这是我根据项目中鹏哥写好的应用和网上参考了很多方法后的一种实现方法,看了好多大佬的文章,发现还有许多的加密方式,等后续有空了再慢慢多学习补充下了...

  

vue 中引入cryptoJS的更多相关文章

  1. vue中引入babel步骤

    vue中引入babel步骤 vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5. 1.安装babel-polyfill插件 npm ...

  2. vue中引入json数据,不用本地请求

    1.我的项目结构,需要在Daily.vue中引入daily.js中的json数据 2.把json数据放入一个js文件中,用exports导出,vscode的json格式太严格了,很多数据,调了一个多小 ...

  3. vue中引入mintui、vux重构简单的APP项目

    最近在学习vue时也了解到一些常用的UI组件,有用于PC的和用于移动端的.用于PC的有:Element(饿了么).iView等:用于移动端APP的有Vux.Mint UI(饿了么).Vant(有赞团队 ...

  4. vue中引入mui报Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them的错误

    在vue中引入mui的js文件的时候,报如下的错误: 那是因为我们在用webpack打包项目时默认的是严格模式,我们把严格模式去掉就ok了 第一步:npm install babel-plugin-t ...

  5. vue中引入swiper(vue中的滑块组件vue-awesome-swiper)

    第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import VueAwesomeSwiper from 'vue-awesome ...

  6. Vue中引入bootstrap导致的CSS问题

    最近在进行vue.js+webpack进行模块化开发的时候,遇到一个奇怪的问题. 问题是这样的: 1. 在main.js文件中引入bootstrap的js和css. 2. 自己写了一个Header.v ...

  7. vue中引入js,然后new js里的方法

    阿里云Web播放器Web端使用SDK说明:https://help.aliyun.com/document_detail/51991.html?spm=5176.11065259.1996646101 ...

  8. vue中引入css文件

    两种方式引入css文件,一种是直接在main.js中引入(也可以在其他的.vue文件中的<script></script>标签中),即下面这种写法: import 'eleme ...

  9. vue中引入awesomeswiper的方法以及编写轮播组件

    1.先安装less-loader npm install less less-loader --save 2.再安装css-loader npm install css-loader --save 3 ...

随机推荐

  1. [Git 系列] WIN7下Git的安装

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/monkey7777/article/details/32155833 1.下载git win7版本号 ...

  2. MySQL的共享锁与排它锁编码演示

    一.行锁之MySQL  使用SELECT ... FOR UPDATE 做事务写入前的确认 以MySQL 的InnoDB 为例,预设的Tansaction isolation level 为REPEA ...

  3. vue,数组循环中src路径下图片总是不展示

    每次数组中带图片的src,图片总是不展示,搞得都怀疑是不是姿势不对.经过各方查看,还真不对 原因是因为图片路径在assets,所以需要require一下.其实就是require('path') 如a[ ...

  4. WPF多线程更新UI的一个解决途径

    那么该如何解决这一问题呢?通常的做法是把耗时的函数放在线程池执行,然后切回主线程更新UI显示.前面的updateTime函数改写如下: private async void updateTime()  ...

  5. ng2-file-upload插件在ionic3中的使用方法

    本文主要说明在ionic3中使用ng2-file-upload插件,上传多种类型文件(图片.word.excel.ppt.mp4等)的使用方法. 1.html代码: <button ion-bu ...

  6. 团队作业Bata冲刺-第二天

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2 这个作业要求在哪里 https://edu.cnblo ...

  7. 15.stop引发的数据不一致

    /** * 数据不一致问题 * stop */ public class StopDemo { public static Student student = new Student(); publi ...

  8. OpenCV常用基本处理函数(1)读写

    图像的基本操作 cv.imread()      读取图片 cv.imshow()     显示图片 cv2.imwrite()    保存图像 使用摄像头捕获实时图像 OpenCV 为这中应用提供了 ...

  9. 理解CSV格式规范(解析CSV必备)

    什么是CSV逗号分隔值(Comma-Separated Values,CSV),其文件以纯文本形式存储表格数据(数字和文本),文件的每一行都是一个数据记录.每个记录由一个或多个字段组成,用逗号分隔.使 ...

  10. iOS 获取self类型

    类型转换快速写法 typeof(self) bself = self; 版权声明:本文为博主原创文章,未经博主允许不得转载.