vue使用AES.js
AES加密的使用
对数据传输加密、解密处理---AES.js
第一步:
在vue中安装crypto-js依赖
npm install crypto-js --save-dev
第二步:
在static目录下新建一个AES.js文件,例如:

第三步:
在AES.js中填写如下代码
import CryptoJS from "crypto-js";
// npm install crypto-js --save-dev
//随机生成指定数量的32进制key
export default {
generatekey(num) {
let library =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
let key = "";
for (var i = 0; i < num; i++) {
let randomPoz = Math.floor(Math.random() * library.length);
key += library.substring(randomPoz, randomPoz + 1);
}
return key;
},
//加密
encrypt(word, keyStr) {
keyStr = keyStr ? keyStr : "CXMGNcYwTrtsadQmV935ONNXMUycpG1g"; //判断是否存在ksy,不存在就用定义好的key
var key = CryptoJS.enc.Utf8.parse(keyStr);
var srcs = CryptoJS.enc.Utf8.parse(word);
var encrypted = CryptoJS.AES.encrypt(srcs, key, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
return encrypted.toString();
},
//解密
decrypt(word, keyStr) {
keyStr = keyStr ? keyStr : "CXMGNcYwTrtsadQmV935ONNXMUycpG1g";
var key = CryptoJS.enc.Utf8.parse(keyStr);
var decrypt = CryptoJS.AES.decrypt(word, key, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
return CryptoJS.enc.Utf8.stringify(decrypt).toString();
}
};
第四步:
在需要使用加密的地方引入
import AES from "@/common/AES.js";
第五步:
调用
//如果是对象/数组的话,需要先JSON.stringify转换成字符串
//调用加密方法
var encrypts = AES.encrypt(JSON.stringify(cars),keys);
//调用解密方法
var dess = JSON.parse(AES.decrypt(encrypts,keys));
console.log(encrypts)
console.log(encrypts.length)
console.log(dess)

vue使用AES.js的更多相关文章
- vue中使用AES.js和crypto.js加密
一:crypto-js加密 1.1:安装依赖 npm install crypto-js --save-dev 1.2 :在项目目录上创建一个js文件里面写入加密,解密的代码 mport Crypto ...
- 前端(小程序)项目Aes.js/Md5.js加密的处理方法
做项目中需要对前端数据加密传输这个时候需要用到前端加密的算法主要是:Aes.js,Md5.js 一.Vue项目用到的aes.js加密. 1.直接在index.html引入aes.js或者在npm in ...
- Vue过渡效果之JS过渡
前面的话 与CSS过渡不同,JS过渡主要通过事件进行触发.本文将详细介绍Vue过渡效果之JS过渡 事件钩子 JS过渡主要通过事件监听事件钩子来触发过渡,共包括如下的事件钩子 <transitio ...
- 使用 Vue 和 epub.js 制作电子书阅读器
ePub 简介 ePub 是一种电子书的标准格式,平时我看的电子书大部分是这种格式.在手机上我一般用"多看"阅读 ePub 电子书,在 Windows 上找不到用起来比较顺心的软件 ...
- socket应用(vue、node.js、M站)
socket应用(vue.node.js.M站) 前言:我们在做一些项目的时候需要做到实时变化, 比如我们有时候有需求会要求我们做一个类似于聊天室的页面 比如有些时候我们对某些东西进行点赞和刷票,需要 ...
- vue项目中主要文件的加载顺序(index.html、App.vue、main.js)
先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...
- vue.runtime.esm.js:593 [Vue warn]: Invalid prop: custom validator check failed for prop "value".报错解决
在uni中使用 picker组件,一直报错 vue.runtime.esm.js:593 [Vue warn]: Invalid prop: custom validator check failed ...
- 最新的vue没有dev-server.js文件,如何进行后台数据模拟?
https://blog.csdn.net/qq_34645412/article/details/78833860 https://blog.csdn.net/qq_34645412/article ...
- vue中使用js动画与velocity.js
一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...
随机推荐
- Eclipse插件 -- 阿里巴巴扫描编码规插件
一.github地址: https://github.com/alibaba/p3c 二..eclipse插件的安装 此处示例采用eclipse,版本为 Neon.1 Release RC3 (4.6 ...
- C语言格式化输出语句
%d:带符号十进制整数 : %c:单个字符: %s:字符串: %f:6位小数:float; %.2f表示小数点后精确到两位 %lf:6位小数:double;
- Verilog实例数组
编写 Verilog 代码多年,至今才无意中发现了一种奇怪的语法,估计见过的这种的写法的人,在 FPGA 开发者中不会超过 20% 吧. 直接来看代码吧.先定义了一个简单的模块,名为 mod. mod ...
- IDEA 创建Maven Web工程
一.Maven环境搭建 二.Maven常用命令 mvn clean 清除生成的target文件 mvn install 生成target文件 mvn clean install 相当于先删除targe ...
- 🏆【Alibaba微服务技术系列】「Dubbo3.0技术专题」回顾Dubbo2.x的技术原理和功能实现及源码分析(温故而知新)
RPC服务 什么叫RPC? RPC[Remote Procedure Call]是指远程过程调用,是一种进程间通信方式,他是一种技术的思想,而不是规范.它允许程序调用另一个地址空间(通常是共享网络的另 ...
- vue3.0入门(四):组件
组件 组件基础 <my-counter></my-counter> const app = Vue.createApp({ // 根组件 data() { return {} ...
- 细说Typescript类型检查机制
上一篇文章我介绍了Typescript的基础知识,回顾一下,有基础数据类型.数组.函数.类.接口.泛型等,本节内容将述说一下Typescript为方便我们开发提供了一些类型检查机制. 类型检查机制 类 ...
- TCP通信的实现代码
TCP通信 概念 传输控制协议(TCP,Transmission Control Protocol)是一种面向连接的.可靠的.基于字节流的传输层通信协议. 从百科定义中就可以看出,TCP通信的基本条件 ...
- Typora + PicGo做个人知识库
最近在做个人知识库,考察了一圈各种平台和工具,发现还是直接用文件系统管理Markdown文件更符合我当前的需求.以Markdown文件作为文字载体,以文件目录作为分类结构,承载以计算机知识为主的学习笔 ...
- centos7修改服务器时区
查看时区设置 timedatectl 列出所有时区,通过键盘上下键进行浏览 timedatectl list-timezones 修改服务器时区为Africa/Lagos # 拉各斯的时区,UTC+1 ...