uniapp封装md5请求加密

要求：要封装一个md5加密的请求头，加密部分：url 问号后面部分和data参数。

签名步骤：

1、按照参数首字母进行排序, 并拼接为字符串, 并用&链接
2、追加密钥&key=xxxxxxx到字符串(具体加密密钥每个项目不同)
3、把得到的字符串进行md5加密,并转大写
4、把计算得到的签名追加到 GET或POST请求中即可: sign=签名结果

前端封装步骤：

首先建一个common文件夹然后在里面建一个network.js文件。目录结构是这样：

封装的内容写在network.js里面。

1.要用到md5加密，要先下载一个md5.js。我这里没有下载，用了uView框架里面的md5,那么先把它引进来：

import md5Libs from "../uview-ui/libs/function/md5.js";

2.把data对象转换成数组，这里用 entries

let result = Object.entries(date);  //data参数对象转数组
console.log(result);

3.再把数组用&拼接成字符串（这里要做判断，判断数组里是否包含多个元素，若是，则要用+=，否则直接用=）

let dateStr = ""for(var i=0;i<result.length;i++){console.log(result[i]);if(result.length>1){dateStr += "&" + result[i][0] +"="+result[i][1];}else{dateStr = "&" + result[i][0] +"="+result[i][1]}}

4.然后再看url里面的（url里是否包含"?",若包含则截取下来）

截取下来后再与data里的参数按首字母排序，再拼接。

最后md5计算，转大写。

let urlStr = url;let md5Str = "";let key = "1^)(^*^$$#$%!@#$!@#$%";let sign = "";if(urlStr.indexOf("?")!=-1){  //url参数截取let index = urlStr.lastIndexOf("\?");urlStr = urlStr.substring(index+1,urlStr.length);console.log(urlStr);md5Str = urlStr+dateStr; //url参数和data字符串相加拼接console.log(md5Str);if(md5Str.indexOf("&")!=-1){md5Str= md5Str.split("&"); //分割成数组排序md5Str = md5Str.sort();md5Str = md5Str.join("&");//拼接成字符串用&连接console.log(md5Str);md5Str = md5Str+"&key="+key;sign= md5Libs.md5(md5Str).toUpperCase();}else{md5Str = md5Str+"&key="+key;sign= md5Libs.md5(md5Str).toUpperCase();}} console.log("sign="+sign);

完整代码为：

import md5Libs from "../uview-ui/libs/function/md5.js";
const baseUrl = '';//url域名这里省略let Token = uni.getStorageSync("Token")?uni.getStorageSync("Token") :"";
const request = (url = '', date = {}, type = 'POST', header = {
}) => {return new Promise((resolve, reject) => {let result = Object.entries(date);  //data参数对象转数组console.log(result);let dateStr = ""for(var i=0;i<result.length;i++){console.log(result[i]);if(result.length>1){dateStr += "&" + result[i][0] +"="+result[i][1];}else{dateStr = "&" + result[i][0] +"="+result[i][1]}}let urlStr = url;let md5Str = "";let key = "1^)(^*^$$#$%!@#$!@#$%";let sign = "";if(urlStr.indexOf("?")!=-1){  //url参数截取let index = urlStr.lastIndexOf("\?");urlStr = urlStr.substring(index+1,urlStr.length);console.log(urlStr);md5Str = urlStr+dateStr; //url参数和data字符串相加拼接console.log(md5Str);if(md5Str.indexOf("&")!=-1){md5Str= md5Str.split("&"); //分割成数组排序md5Str = md5Str.sort();md5Str = md5Str.join("&");//拼接成字符串用&连接console.log(md5Str);md5Str = md5Str+"&key=1^)(^*^$$#$%!@#$!@#$%";sign= md5Libs.md5(md5Str).toUpperCase();}else{md5Str = md5Str+"&key=1^)(^*^$$#$%!@#$!@#$%";sign= md5Libs.md5(md5Str).toUpperCase();}} console.log("sign="+sign);uni.request({method: type,url: baseUrl + url + '&sign='+sign,data: date,header: {"Token":Token},dataType: 'json',         }).then((response) => {setTimeout(function() {uni.hideLoading();}, 200);let [error, res] = response;        resolve(res.data);}).catch(error => {let [err, res] = error;reject(err)})});
}export default request;

效果为：

然后微信支付这里有个可以测试的测试加密是否正确

https://pay.weixin.qq.com/wiki/doc/api/app/app.php?chapter=20_1

把参数填进去，生成的sign一样就说明正确

uniapp封装md5请求加密相关推荐

uniapp 封装网络请求
文章目录一.前端 1. 封装网络请求 2. 封装模块请求方法二.后端 2.1. 返回对象 2.2. 热搜接口三.微信模拟请求 3.1. Network 3.2. Console 一.前端 1. ...
前端：uniapp封装网络请求笔记
uniapp作为开发移动端的前端框架,目前国内是非常流行的,使用HbuilderX开发工具基于uniapp框架开发的系统可以方便的转换为小程序.APP等移动端程序,大大降低了移动开发的成本.网络请求更 ...
uniapp封装网络请求_八张图带你走进“通过一个完美请求封装一个网络模块”
本文提供视频课程讲解,需要的小伙伴可以点赞+私信''网络模块''前往领取学习大纲 1.网络模块在应用中的地位 1.1当今占统治地位的网络组件 OKHttp OkHttp 是一个相对成熟的解决方案,据 ...
uniapp封装ajax请求
module.exports = { config: function (name) { var info = null; if (name) { var name2 = name.split(&qu ...
Uni-app 实现md5加密
写下这篇文章,记录自己走过的坑第一次尝试:参照博客uniapp使用md5_清雨小竹的博客-CSDN博客_uniapp md5 引入md5.js后,在main.js中import后,无法使用md5.h ...
一、uniapp项目（封装异步请求、moment.js时间处理、封装手势滑动组件、下载图片到本地）
一.封装异步请求: 1. 为什么要封装? 2. 封装的思路 export default (params) => {// 显示加载中uni.showLoading({title: "加 ...
uniapp封装请求的方法（luch-request插件使用）
1.安装luch-request npm i luch-request -S 2.设置根地址新建一个baseUrl目录 ,设置一个url.js //基础Api const BASE_API=&quo ...
php封装一个加密算法,PHP封装的非对称加密RSA算法示例
本文实例讲述了PHP封装的非对称加密RSA算法.分享给大家供大家参考,具体如下: 将php的openssl扩展中的非对称加密函数封装成一个Rsa类. 需要注意的是,在windows上,需要打开open ...
uniapp封装方法
uniapp封装方法参考:https://www.cnblogs.com/gqx-html/p/10967570.html 根据报错和实际情况作了一些修改 1.环境配置 common文件夹下新建co ...

uniapp封装md5请求加密

uniapp封装md5请求加密相关推荐

最新文章

热门文章