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,这样可以动态设置样 ...
随机推荐
- 单例模式-案例Runtime
package d.create_type_single; import java.io.IOException; /** * Runtime类就是使用的单例:并且是饿汉式 * (原因考虑是因为:多线 ...
- Linkerd 2.10(Step by Step)—配置超时
Linkerd 2.10 系列 快速上手 Linkerd v2 Service Mesh(服务网格) 腾讯云 K8S 集群实战 Service Mesh-Linkerd2 & Traefik2 ...
- 最全华为鸿蒙 HarmonyOS 开发资料汇总
开发 本示例基于 OpenHarmony 下的 JavaScript UI 框架,进行项目目录解读,JS FA.常用和自定义组件.用户交互.JS 动画的实现,通过本示例可以基本了解和学习到 JavaS ...
- Go定时器--Timer
目录 前言 Timer 定时器 简介 使用场景 1. 设定超时时间 2. 延迟执行某个方法 Timer对外接口 1. 创建定时器 2. 停止定时器 3. 重置定时器 其他接口 1. After() 2 ...
- springcloud <zuul2.0静态配置>
server: port: 9006 spring: application: name: cloud-zuul-wangbiao # zipkin: # base-url: http://local ...
- Java集合的使用
创建和使用集合 定义:集合是一个可变数组 List集合存储有序可重复序列 点击查看详细代码 import java.util.*; public class List01 { public stati ...
- 10个最酷的Linux单行命令
下面是来自 Commandlinefu 网站由用户投票决出的 10 个最酷的 Linux 单行命令,希望对你有用. sudo !! 以 root 帐户执行上一条命令. python -m Simpl ...
- Dapper同时操作任意多张表的实现
1:Dapper的查询帮助类,部分代码,其它新增更新删除可以自行扩展 using Microsoft.Extensions.Configuration; using System; using Sys ...
- openswan协商流程之(五):main_inR2_outI3()
主模式第五包:main_inR2_outI3 文章目录 主模式第五包:main_inR2_outI3 1. 序言 2.函数调用关系 3. 第五个报文流程图 4. main_inR2_outI3()源码 ...
- python库--pandas--写入文本文件
pandas.DataFrame.to_csv 参数 说明 path_or_buf=None 文件路径或对象, 若果为None, 则结果作为字符串返回 sep=',' 分隔符 na_rep='' 缺失 ...