做项目中需要对前端数据加密传输这个时候需要用到前端加密的算法主要是: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. 关于Arrays协助类中的排序方法

    sort方法是优化的快速排序,不稳定. paralleSort是多线程排序,稳定,但是有长度限制.

  2. 【转载】JSP详解(四大作用域九大内置对象等)

    前面讲解了Servlet,了解了Servlet的继承结构,生命周期等,并且在其中的ServletConfig和ServletContext对象有了一些比较详细的了解,但是我们会发现在Servlet中编 ...

  3. PAT_A1076#Forwards on Weibo

    Source: PAT A1076 Forwards on Weibo (30 分) Description: Weibo is known as the Chinese version of Twi ...

  4. web自动化的行为驱动

    1.新建一个features包,在新建一个steps包 2.新建一个register.features文件 #coding=utf-8Feature:Register User As a develo ...

  5. TensorFlow技术解析与实战学习笔记(15)-----MNIST识别(LSTM)

    一.任务:采用基本的LSTM识别MNIST图片,将其分类成10个数字. 为了使用RNN来分类图片,将每张图片的行看成一个像素序列,因为MNIST图片的大小是28*28像素,所以我们把每一个图像样本看成 ...

  6. SQL第一节课

    phpmyadmin create table 表名( 列名 数据类型 是否为空 (是否主键|是否唯一|外键关系), 列名 数据类型...(最后一列不加逗号)) create database 数据库 ...

  7. 第2章 this 、 call 和 apply

    第一部分 基础知识 第2章  this . call 和 apply 2.1  this JavaScript的 this 总是指向一个对象,而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的, ...

  8. 提高生产力:文件和IO操作(ApacheCommonsIO-汉化分享)

    复制.移动.删除.比较.监控.文件读写 等文件和IO操作是编程中比较常用的功能.        幸运的是,Apache Commons IO等开源组件已经帮我们实现了.        我们可以不用重复 ...

  9. JS-正则表达式实战篇(Angel著)

    JS-正则表达式实战篇(Angel著) 大家会看到我最新的系列博客都是spring boot怎么突然来了一个js的呢,而且这个貌似对大家而言好像很简单的嘛,所以在写之前我说说我写这一篇文章的初衷.公司 ...

  10. Spring 属性输入和实例化操作_总结

    Spring 之 applicationContext.xml  配置 默认实例化(无参构造) //被实例化对象 package cn.ibbidream.Bean; public class Bea ...