做项目中需要对前端数据加密传输这个时候需要用到前端加密的算法主要是: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. dubbo介绍及实战

    1. dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案.其核心部分包含: 远程通讯: 提供对多种基于长连接的NIO框架抽象封 ...

  2. Interrupt中断线程

    package com.wistron.swpc.ecs.util; public class WrongWayStopThread extends Thread{ public static voi ...

  3. 编程领域中的 "transparent" 和 "opaque"

    引言 在学习计算机的过程中,经常会接触到 “透明” 和 “非透明” 的概念. 刚开始理解 “透明” 这个概念的时候,认为 “透明” 就是程序员可以看见其中的构造,但是老师却说透明是程序员意识不到其中的 ...

  4. String类练习统计一个字符串中大小写字母及数字字符个数

    public class StringPractice { public static void main(String[] args) { //创建一个文本扫描器 Scanner sc = new ...

  5. Day 1 初识python

    1.Python简介 Python的历史 1989年圣诞节:Guido von Rossum开始写Python语言的编译器. 1991年2月:第一个Python编译器(同时也是解释器)诞生,它是用C语 ...

  6. 【剑指Offer】36、两个链表的第一个公共结点

      题目描述:   输入两个链表,找出它们的第一个公共结点.   解题思路:   本题首先可以很直观的想到蛮力法,即对链表1(假设长度为m)的每一个结点,遍历链表2(假设长度为n),找有没有与其相同的 ...

  7. Java核心技术读书笔记01

    Volume I Chapter 1  An Introduction to Java  • 1.1 Java as a Programming Platform• 1.2 The Java ‘Whi ...

  8. bpm被攻击事件

    bpm登录不上,服务器是windows2008,从深信服上面设置了ddos每秒钟连接超5000次封锁,阻断后面的IP连接,,深信服DDOS日志没有记录 在bpm服务器上面通过netstat -a查看发 ...

  9. svg文件报错

    错误:The content of element type "font-face" is incomplete, it must match "((font-face- ...

  10. linux配置Jdk1.8

    Jdk1.8:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html cd /usr/ ...