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的更多相关文章

  1. vue中使用AES.js和crypto.js加密

    一:crypto-js加密 1.1:安装依赖 npm install crypto-js --save-dev 1.2 :在项目目录上创建一个js文件里面写入加密,解密的代码 mport Crypto ...

  2. 前端(小程序)项目Aes.js/Md5.js加密的处理方法

    做项目中需要对前端数据加密传输这个时候需要用到前端加密的算法主要是:Aes.js,Md5.js 一.Vue项目用到的aes.js加密. 1.直接在index.html引入aes.js或者在npm in ...

  3. Vue过渡效果之JS过渡

    前面的话 与CSS过渡不同,JS过渡主要通过事件进行触发.本文将详细介绍Vue过渡效果之JS过渡 事件钩子 JS过渡主要通过事件监听事件钩子来触发过渡,共包括如下的事件钩子 <transitio ...

  4. 使用 Vue 和 epub.js 制作电子书阅读器

    ePub 简介 ePub 是一种电子书的标准格式,平时我看的电子书大部分是这种格式.在手机上我一般用"多看"阅读 ePub 电子书,在 Windows 上找不到用起来比较顺心的软件 ...

  5. socket应用(vue、node.js、M站)

    socket应用(vue.node.js.M站) 前言:我们在做一些项目的时候需要做到实时变化, 比如我们有时候有需求会要求我们做一个类似于聊天室的页面 比如有些时候我们对某些东西进行点赞和刷票,需要 ...

  6. vue项目中主要文件的加载顺序(index.html、App.vue、main.js)

    先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...

  7. 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 ...

  8. 最新的vue没有dev-server.js文件,如何进行后台数据模拟?

    https://blog.csdn.net/qq_34645412/article/details/78833860 https://blog.csdn.net/qq_34645412/article ...

  9. vue中使用js动画与velocity.js

    一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...

随机推荐

  1. 对于Oracle、mysql和sql server中的部分不同理解

    1.在mysql中事务默认是自动提交的,只有设置autocommit为0的时候,才用自己commit:(提到commit不要忘了rollback哦,回滚)2.但是在oracle中必须自己commit: ...

  2. 跟我一起用unity做小地图!

    lol的小地图 转载爬虫请自重,未问先转没排面 不爱多做铺垫,小地图对于一些游戏来说多重要大家都懂,不然你也不会来看我这篇文章的,对不对? 话不多说,开搞! 一.主体功能 一般来说,游戏里的迷你地图都 ...

  3. WIN7下安装Python3.7和labelImg-1.7.0

    安装python3.7 官方https://www.python.org/downloads/windows/,下载windows 64bit python3.7版本 用Administrator权限 ...

  4. BUUCTF-[CISCN2019 华东南赛区]Web4

    BUUCTF-[CISCN2019 华东南赛区]Web4 看题 点击Read somethings,会跳转到 http://3fd8b1f9-614f-47ff-8e79-0f678e7bb4eb.n ...

  5. Linux系统的高级网络配置(bond、team、网桥)

    1.bond接口 Red Hat Enterprise Linux 允许管理员使用 bonding 内核模块和称为通道绑定接口的特殊网络接口将多个网络接口绑定 到一个通道.根据选择的绑定模式 , 通道 ...

  6. openresty lua_ssl_trusted_certificate 问题

    lua_ssl_trusted_certificate 语法: lua_ssl_trusted_certificate 默认: no 环境: http, server, location 指定一个 P ...

  7. ArcEngine+C# 森林资源仿真系统 核心代码

    目录 第一章 基础功能的核心代码 实现滚轮缩放事件 创建或获取地理数据(导入前询问用户是否覆盖) 创建要素类(Shape) 点列数据创建要素类 Shape文件创建要素类 GDB中取出要素类 创建栅格数 ...

  8. 洛谷P2338 Bessie Slows Down S 题解

    题目 [USACO14JAN]Bessie Slows Down S 题解 这道题其实蛮简单的,不知道为什么难度划到了提高+,个人觉得这难度大概就是普及左右. 具体说说怎么做吧,简单模拟一下即可,始终 ...

  9. 利用Struts2拦截器完成文件上传功能

    Struts2的图片上传以及页面展示图片 在上次的CRUD基础上加上图片上传功能 (https://www.cnblogs.com/liuwenwu9527/p/11108611.html) 文件上传 ...

  10. UNION / UNION ALL 区别

    Union:对两个结果集进行并集操作,不包括重复行,同时进行默认规则的排序: Union All:对两个结果集进行并集操作,包括重复行,不进行排序: 使用union all: select top 5 ...