前端(小程序)项目Aes.js/Md5.js加密的处理方法
做项目中需要对前端数据加密传输这个时候需要用到前端加密的算法主要是:Aes.js,Md5.js
一.Vue项目用到的aes.js加密。
1.直接在index.html引入aes.js或者在npm install 安装。
2.加密代码要放在Vue项目的assets目录这样build的时候可以压缩,在浏览器上不容易找到加密处理的方法。

3.使用的时候在调用接口的地方引入或者在main.js引入:

4.掉接口的时候使用

我项目aes_encrypted.js代码:
function aes_encrypted(encryptedParams) {
var milliseconds=Date.parse(new Date());
//以下为添加一些公共参数 根据自己项目来
/* var hospitalData = JSON.parse(localStorage.getItem("hospitalData"));
var userUUid;
if(hospitalData){
userUUid = hospitalData.sessionId;
}
if (null !=userUUid && userUUid != undefined && userUUid != 'undefined'){
encryptedParams.appId=userUUid;
}else {
var user_uuid=generateUUID();
localStorage.setItem("user_uuid",user_uuid);
encryptedParams.appId=user_uuid;
}
encryptedParams.reqToken=milliseconds;
encryptedParams.systemTag="feiyue";
encryptedParams.clientInfo=navigator.userAgent;
encryptedParams.language="zhcn";
encryptedParams.sign=CryptoJS.MD5(milliseconds+"123459A686111577F0A497C4EAB64621238900022D1D95B2EAE04").toString();
*/ //以上为添加一些公共参数 根据自己项目来
var str=JSON.stringify(encryptedParams);
// 密钥 16 位
var key = 'CCD43A0F3B989162';
//初始向量 initial vector 16 位
var iv = 'CCD43A0F3B989162';
//key 和 iv 可以一致
key = CryptoJS.enc.Utf8.parse(key);
iv = CryptoJS.enc.Utf8.parse(iv);
var encrypted = CryptoJS.AES.encrypt(str, key, {
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
return encrypted.toString();
}
//生成uuid
function generateUUID() {
var d = new Date().getTime();
var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = (d + Math.random()*)% | ;
d = Math.floor(d/);
return (c=='x' ? r : (r&0x3|0x8)).toString();
});
return uuid;
};
export default aes_encrypted;//抛出
附一个加密解密的例子:
//aes加密
function encrypt(word) {
var key = CryptoJS.enc.Utf8.parse("CCD43A0F3B000000"); //16位
var iv = CryptoJS.enc.Utf8.parse("CCD43A0F3B000000");
var encrypted = '';
if (typeof(word) == 'string') {
var srcs = CryptoJS.enc.Utf8.parse(word);
encrypted = CryptoJS.AES.encrypt(srcs, key, {
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
} else if (typeof(word) == 'object') {//对象格式的转成json字符串
var data = JSON.stringify(word);
var srcs = CryptoJS.enc.Utf8.parse(data);
encrypted = CryptoJS.AES.encrypt(data, key, {
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
})
}
return encrypted.ciphertext.toString();
}
// aes解密
function decrypt(word) {
var key = CryptoJS.enc.Utf8.parse("CCD43A0F3B000000");
var iv = CryptoJS.enc.Utf8.parse("CCD43A0F3B000000");
var encryptedHexStr = CryptoJS.enc.Hex.parse(word);
var srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
var decrypt = CryptoJS.AES.decrypt(srcs, key, {
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
return decryptedStr.toString();
}
console.log(encrypt({
appId: "b3b8-0abd-4696-9102-3129875070dd",
clientInfo: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36",
language: "zhcn",
reqToken: ,
sign: "9d88ced2cfc4fa7f253570063b44dd22",
systemTag: "test",
}))
var str = encrypt({
appId: "b3b8-0abd-4696-9102-3129875070dd",
clientInfo: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36",
language: "zhcn",
reqToken: ,
sign: "9d88ced2cfc4fa7f253570063b44dd22",
systemTag: "test",
})
console.log(str)
console.log(JSON.parse(decrypt(str)))
二. 小程序项目用到的aes.js加密。
1.小程序没法引入所以需要把源码弄到小程序里面然后修改

2.在加密的代码里面引入aes.js 注意使用的时候需要 CryptoJS.CryptoJS.***

3. 调用接口的时候,在需要的地方引入加密模块并使用:


前端(小程序)项目Aes.js/Md5.js加密的处理方法的更多相关文章
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- 微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记4)支持React.js语法的Taro框架
Taro本身实现的情况类似于mpvue,mpvue的未来展望中也包含了支付宝小程序,现在的版本中,也可以使用不同的构建命令来构建出百度小程序的支持,如第10章所示,但是现在Taro先于mpvue实现了 ...
- 使用uni-app(Vue.js)创建运行微信小程序项目步骤
使用uni-app(Vue.js)开发微信小程序项目步骤 1. 新建一个uni-app项目 创建完成后的目录结构 2. 打开微信小程序开发工具端的端口调试功能 3. 运行创建的项目 效果
- 微信小程序项目实战之天气预报
概述 微信小程序项目实战之天气预报 详细 代码下载:http://www.demodashi.com/demo/10634.html 一.准备工作 1.注册微信小程序 2.注册和风天气账号 3.注册百 ...
- 开发一个微信小程序项目教程
一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可.2.注册成功后进入首页,在 小程序发布流程->小程序开 ...
- 微信小程序开发01 --- 微信小程序项目结构介绍
一.微信小程序简单介绍: 微信官方介绍微信小程序是一个不需要下载安装就可使用(呵呵,JS代码不用下载吗?展示的UI不用下载吗?)的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用. ...
- 微信小程序项目实战之豆瓣天气
概述 微信小程序项目实战之豆瓣天气 详细 代码下载:http://www.demodashi.com/demo/10943.html 一.准备工作 1.注册微信小程序 2.在小程序设置中设置reque ...
- 微信小程序 使用HMACSHA1和md5为登陆注册报文添加指纹验证签名
对接口请求报文作指纹验证签名相信在开发中经常碰到, 这次在与java后端一起开发小程序时,就碰到需求对登陆注册请求报文添加指纹验证签名来防止信息被修改 先来看下我们与后端定制签名规则 2.4. 签名规 ...
- 《微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记1)WePY开发环境的安装
WePY的安装或更新都通过npm进行,全局安装或更新WePY命令行工具,使用以下命令: npm install wepy-cli -g 稍等片刻,成功安装后,即可创建WePY项目. 注意:如果npm安 ...
随机推荐
- Python3爬虫----爬取网页内的图片
无聊把公司内网爬了一遍. https://github.com/gig886/Python/tree/master/爬虫
- DB120连接TTL--OpenWRT
DB120 TTL线连接 1.解压文件安装USB TTL PL2303HX 驱动 2.插上usb转ttl设备 3.串口调试 4.连接ttl线到db120 5.The END
- Join 语句
select * from books as A join (select * from Orders) as B on A.BookId = B.BookId select A.BookId,Aut ...
- efcore 控制台迁移架构
添加 nuget 包: Microsoft.EntityFrameworkCore.Design Microsoft.EntityFrameworkCore.SqlServer Microsoft.E ...
- 深入了解Spring Boot 核心注解原理
SpringBoot目前是如火如荼,所以今天就跟大家来探讨下SpringBoot的核心注解@SpringBootApplication以及run方法,理解下springBoot为什么不需要XML,达到 ...
- C++ (带有默认参数的函数参数)缺省函数参数
缺省参数?在C++中,允许实参的个数与形参的个数不同.在声明函数原型时,为一个或者多个形参指定默认值,以后调用这个函数时,若省略某一个实参,c++则自动的以默认值作为相应参数的值. 实列说明:#inc ...
- PAT_A1108#Finding Average
Source: PAT A 1108 Finding Average (20 分) Description: The basic task is simple: given N real number ...
- BZOJ2212——线段树合并
学习线段树合并,以这道题为契机 多谢这篇博客 这里是通过对线段树合并时,顺手统计了对于一颗子树内,是否反转两种情况的逆序对数 这里只对代码进行详细分析,见注解好了 #include<cstdio ...
- HTTP 返回码中 301 与 302 的区别
转自:http://blog.csdn.net/qmhball/article/details/7838989 一.官方说法301,302 都是HTTP状态的编码,都代表着某个URL发生了转移,不同之 ...
- html表单练习(讲义中的方法)
用table作框体固定位置结构 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...