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

签名步骤:

1、 按照参数首字母进行排序, 并拼接为字符串, 并用&链接
2、追加密钥&key=xxxxxxx到字符串(具体加密密钥每个项目不同)
3、把得到的字符串进行md5加密,并转大写
4、把计算得到的签名追加到 GETPOST请求中即可: 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一样就说明正确

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐