做项目中需要对前端数据加密传输这个时候需要用到前端加密的算法主要是: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加密的处理方法的更多相关文章

  1. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  2. 微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记4)支持React.js语法的Taro框架

    Taro本身实现的情况类似于mpvue,mpvue的未来展望中也包含了支付宝小程序,现在的版本中,也可以使用不同的构建命令来构建出百度小程序的支持,如第10章所示,但是现在Taro先于mpvue实现了 ...

  3. 使用uni-app(Vue.js)创建运行微信小程序项目步骤

    使用uni-app(Vue.js)开发微信小程序项目步骤 1. 新建一个uni-app项目   创建完成后的目录结构 2. 打开微信小程序开发工具端的端口调试功能 3. 运行创建的项目 效果

  4. 微信小程序项目实战之天气预报

    概述 微信小程序项目实战之天气预报 详细 代码下载:http://www.demodashi.com/demo/10634.html 一.准备工作 1.注册微信小程序 2.注册和风天气账号 3.注册百 ...

  5. 开发一个微信小程序项目教程

    一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可.2.注册成功后进入首页,在 小程序发布流程->小程序开 ...

  6. 微信小程序开发01 --- 微信小程序项目结构介绍

    一.微信小程序简单介绍: 微信官方介绍微信小程序是一个不需要下载安装就可使用(呵呵,JS代码不用下载吗?展示的UI不用下载吗?)的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用. ...

  7. 微信小程序项目实战之豆瓣天气

    概述 微信小程序项目实战之豆瓣天气 详细 代码下载:http://www.demodashi.com/demo/10943.html 一.准备工作 1.注册微信小程序 2.在小程序设置中设置reque ...

  8. 微信小程序 使用HMACSHA1和md5为登陆注册报文添加指纹验证签名

    对接口请求报文作指纹验证签名相信在开发中经常碰到, 这次在与java后端一起开发小程序时,就碰到需求对登陆注册请求报文添加指纹验证签名来防止信息被修改 先来看下我们与后端定制签名规则 2.4. 签名规 ...

  9. 《微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记1)WePY开发环境的安装

    WePY的安装或更新都通过npm进行,全局安装或更新WePY命令行工具,使用以下命令: npm install wepy-cli -g 稍等片刻,成功安装后,即可创建WePY项目. 注意:如果npm安 ...

随机推荐

  1. 安卓Java读取SD卡文本文件

    在进行序列识别时,需要对多个模式串进行识别,需要对多行浮点数进行读取,并进行解析. 所以使用的方法为: 使用文本多行读取的方式:对每行文本进行正则表达式匹配:再进行字符转换. 代码如下:        ...

  2. 闲着无聊时写的一个调用天气 API 的小 Demo

    分为两个部分--调用以及实现,并且由于不想折腾,直接使用了 Console 来调用. 通过firefox直接调用 Main 入口,调用以及输出 调用部分没什么好说的,主要是针对 dynamic 类型的 ...

  3. BZOJ 4327: JSOI2012 玄武密码 后缀自动机

    Code: #include<bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) # ...

  4. PAT_A1151#LCA in a Binary Tree

    Source: PAT A1151 LCA in a Binary Tree (30 分) Description: The lowest common ancestor (LCA) of two n ...

  5. 数据结构总结(UPDATING......)

    目标: 1.栈........√ 2.队列......√ 3.堆.........× 4.并查集...× 栈: #define MAXN 65536 struct stack{ int sz[MAXN ...

  6. [POI2012]OKR-A Horrible Poem

    正解:对于一个区间l,r,它的循环节长度一定是它的因数. 然后如果循环节是这个长度,那么[l+len,r]一定等于[l,r-len]. 然后每次询问的时候就把它的长度的最小质因子提出来. BZOJ上都 ...

  7. Pyhton高级-Socket

    1,UDP实现收发数据 import socket def send_msg(udp_socket): """获取键盘数据,并将其发送给对方""&qu ...

  8. (15)Spring Boot使用Druid和监控配置【从零开始学Spring Boot】

    Spring Boot 系列博客] 更多查看博客:http://412887952-qq-com.iteye.com/blog Spring Boot默认的数据源是:org.apache.tomcat ...

  9. [bzoj1001][BeiJing2006]狼抓兔子_网络流_最小割转对偶图

    狼抓兔子 bzoj-1001 BeiJing2006 Description 现在小朋友们最喜欢的"喜羊羊与灰太狼",话说灰太狼抓羊不到,但抓兔子还是比较在行的, 而且现在的兔子还 ...

  10. 洛谷 P3252 [JLOI2012]树

    P3252 [JLOI2012]树 题目描述 在这个问题中,给定一个值S和一棵树.在树的每个节点有一个正整数,问有多少条路径的节点总和达到S.路径中节点的深度必须是升序的.假设节点1是根节点,根的深度 ...