vue 中引入cryptoJS
在搞前端开发的时候,页面上有很多的地方是需要用户输入信息的,但是有些信息又很敏感,比如客户的姓名、电话号码、身份证号码、银行卡号及密码等等这些,如果没有进行加密处理,很容易被别人截取到,项目中应用到cryptoJS的AES模式加密,然后自己就抽空研究了下,下面是学习的过程
参考文章:
前后端AES加密解密,前端使用CryptoJS,后端Java实现
(一)通过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的更多相关文章
- vue中引入babel步骤
vue中引入babel步骤 vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5. 1.安装babel-polyfill插件 npm ...
- vue中引入json数据,不用本地请求
1.我的项目结构,需要在Daily.vue中引入daily.js中的json数据 2.把json数据放入一个js文件中,用exports导出,vscode的json格式太严格了,很多数据,调了一个多小 ...
- vue中引入mintui、vux重构简单的APP项目
最近在学习vue时也了解到一些常用的UI组件,有用于PC的和用于移动端的.用于PC的有:Element(饿了么).iView等:用于移动端APP的有Vux.Mint UI(饿了么).Vant(有赞团队 ...
- 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 ...
- vue中引入swiper(vue中的滑块组件vue-awesome-swiper)
第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import VueAwesomeSwiper from 'vue-awesome ...
- Vue中引入bootstrap导致的CSS问题
最近在进行vue.js+webpack进行模块化开发的时候,遇到一个奇怪的问题. 问题是这样的: 1. 在main.js文件中引入bootstrap的js和css. 2. 自己写了一个Header.v ...
- vue中引入js,然后new js里的方法
阿里云Web播放器Web端使用SDK说明:https://help.aliyun.com/document_detail/51991.html?spm=5176.11065259.1996646101 ...
- vue中引入css文件
两种方式引入css文件,一种是直接在main.js中引入(也可以在其他的.vue文件中的<script></script>标签中),即下面这种写法: import 'eleme ...
- vue中引入awesomeswiper的方法以及编写轮播组件
1.先安装less-loader npm install less less-loader --save 2.再安装css-loader npm install css-loader --save 3 ...
随机推荐
- 删除文件时提示“找不到该项目”,怎么解决? 转摘自:http://jingyan.baidu.com/article/e4d08ffdf5ab470fd2f60df4.html
故障现象:在使用Windows系统删除文件或者文件夹的时候,有时会出现“找不到该项目”的错误提示,可能再次“重试”也无济于事. 那么,接下来T库小编就为库友们简单概括一下出现该问题的原因. 故障原因: ...
- Juqery插件编写 基础说明
<!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...
- 关于UITableViewAutomaticDimension的产生的bug
一.下面这句代码要想有作用 在iOS11之前需要适配,两个代理都需要实现 - (CGFloat)tableView:(UITableView *)tableView heightForHeader ...
- linux100day(day6)--shell脚本简单逻辑
if语句: if条件语句的使用格式: 1.单分支语句 if 条件;then 执行语句 fi 2.双分支语句 if 条件;then 执行语句1 else 执行语句2 fi 3.多分支语句 if 条件;t ...
- maven3常用命令、java项目搭建、web项目搭建详细图解(转)
转自:http://blog.csdn.net/edward0830ly/article/details/8748986 maven3常用命令.java项目搭建.web项目搭建详细图解 2013-0 ...
- 力扣—set matrix zeroes (矩阵置零) python实现
题目描述: 中文: 给定一个 m x n 的矩阵,如果一个元素为 0,则将其所在行和列的所有元素都设为 0.请使用原地算法. 英文: Given a m x n matrix, if an eleme ...
- hadoop 2.7 添加或删除datanode节点
1.测试环境 ip 主机名 角色 10.124.147.22 hadoop1 namenode 10.124.147.23 hadoop2 namenode 10.124.147.32 hadoop3 ...
- iterators和generators
iterators >>> mylist=[x*x for x in range(3)] >>> mylist [0, 1, 4] generators >& ...
- iframe中涉及父子页面跨域问题
什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器施加的安全限制.所谓同源是指相同的域名.协议和端口,只要其中一项不同就为跨域. 举几个例子: http:/ ...
- vue2 — vuex状态管理
一.为什么使用vuex : https://www.cnblogs.com/goloving/p/9080005.html vuex的功能 和 localstorage 的作用是一样,把数据在一个所有 ...