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基本用法(一)

    一.简介 数据库:Oracle数据库的概念和其他数据库不一样,这里的数据库是一个操作系统只有一个库,可以看做Oracle就是一个大的数据库. 实例:一个Oracle实例有一系列的后台进程和内存结构组成 ...

  2. rollup 使用babel7版本的插件rollup-plugin-babel,rollup-plugin-babel使用报错解决办法。

    最近在研究rollup,想吐槽下rollup的官方文档写的真的太简单了,而且照着文档一步步来还报错,说明文档年代有点久远啊... 照着文档使用rollup-plugin-babel报错,首先打开rol ...

  3. mysql索引基本介绍

    转载:https://blog.csdn.net/weixin_34392906/article/details/93707682 转载于:https://www.cnblogs.com/maohui ...

  4. 微信小程序从入门到实践(一)-设置底部导航栏

    微信小程序最多能加5个导航图标.因为我们只有两个默认页面,这里我们就添加两个导航图标 先看我们要达到的就是这么一个效果 接下来开始实践: (1)准备工作 找几个图标,将上述起好名字的图标 保存到 小程 ...

  5. docker-harbor私有仓库使用笔记

    1. 登录harbor管理页面,创建项目,比如yuqx_test 2. admin登录,此处免密登录,正常情况下会输入账号密码 [root@k8s-rancher2 ~]# docker login ...

  6. canal数据同步

    前面提到数据库缓存不一致的几种解决方案,但是在不同的场景下各有利弊,而今天我们使用的canal进行缓存与数据同步的方案是最好的,但是也有一个缺点,就是相对前面几种解决方案会引入阿里巴巴的canal组件 ...

  7. Python之pytesseract模块-实现OCR

    在给PC端应用做自动化测试时,某些情况下无法定位界面上的控件,但我们又想获得界面上的文字,则可以通过截图后从图片上去获取该文字信息.那么,Python中有没有对应的工具来实现OCR呢?答案是有的,它叫 ...

  8. Java基础(三)——内部类

    一.内部类 内部类(Inner Class)就是定义在一个类里面的类.与之对应,包含内部类的类被称为外部类.内部类可以用private修饰. 1.为什么要定义内部类?或者内部类的作用是什么? 内部类提 ...

  9. HashMap 为什么线程不安全?

    作者:developer http://cnblogs.com/developer_chan/p/10450908.html 我们都知道HashMap是线程不安全的,在多线程环境中不建议使用,但是其线 ...

  10. Linux下ansible使用

    一.ansible的功能和意义 1.功能 ansible批量功能 ----------------------> 并行 01. 可以实现批量系统操作配置 02. 可以实现批量软件服务部署 03. ...