微信小程序 請求加簽名驗證（MD5）

第一步：創建request.js

const Promise = require('es6-promise').Promise

const util = require('./util.js');
const utils = util.default.util.prototype;

//簽名參數   這個兩個參數是後臺給的
const key = 'cdbbf90ec69b7f9df6ff301e58bbff1b';
const secret = 'e2f3efdd889e1bab39c981ad46993fda';

function wxPromisify(fn) {
	return function(obj = {}) {
		return new Promise((resolve, reject) => {
			obj.success = function(res) {
				//成功 (只返回res.data)
				resolve(res.data)
				setTimeout(function(){
					wx.hideLoading();
				},200)
			}
			obj.fail = function(res) {
				//失敗
				reject(res)
				setTimeout(function(){
					wx.hideLoading();
				},200)
			}
			fn(obj)
		})
	}
}
//無論promise對象最後狀態如何都會執行
Promise.prototype.finally = function(callback) {
	let P = this.constructor;
	return this.then(
		value => P.resolve(callback()).then(() => value),
		reason => P.resolve(callback()).then(() => {
			throw reason
		})
	);
};
/**
 * 微信請求get方法
 * url
 * data 以對象的格式傳入
 */
function getRequest(url, data) {
        //這裏的data是根據後臺需要傳
        //請求機型
        data.device = 'xcx';
        //版本號
	data.version = 'v1.0.3';
    //時間戳
    data.timestamp = Date.parse(new Date()) / 1000;
    //驗證key
    data.api_key = key;
        //這裏引用工具類的sign方法拼接 data數據/key/和祕鑰
	data.api_sign = utils.sign(data,key,secret);
	var getRequest = wxPromisify(wx.request)
	return getRequest({
		url: url,
		method: 'GET',
		data: data,
		header: {
			'Content-Type': 'application/json'
		}
	})
}

/**
 * 微信請求post方法封裝
 * url
 * data 以對象的格式傳入
 */
function postRequest(url, data) {
	data.device = 'xcx';
	data.version = 'v1.0.3';
    data.timestamp = Date.parse(new Date()) / 1000;
    data.api_key = key;
	data.api_sign = utils.sign(data,key,secret);
	var postRequest = wxPromisify(wx.request)
	return postRequest({
		url: url,
		method: 'POST',
		data: data,
		header: {
			"content-type": "application/x-www-form-urlencoded"
		},
	})
}



/**
   * 獲取get的URL
   */
 function  getRquestUrl(url, data) {
	var signArr = [];
	for(var x in data){
		let signStr = x +'='+ data[x];
		signArr.push(signStr)
	}
	
	var signString = '';
	for(var x in signArr){
		if(parseInt(x)+1 == 1){
			signString += signArr[x].toString();
		}
		else{
			signString += "&"+signArr[x].toString();
		}
	}
    return url + "?"+signString;
  }


	


module.exports = {
	postRequest: postRequest,
	getRequest: getRequest,
	getRquestUrl:getRquestUrl
}

這裏以微信自帶請求方法爲主

 

第二步:創建util.js

  1、先引入 md5 插件    

    $  yarn add md5 -s

//引入md5簽名
import md5 from 'js-md5'

class util {

	
	
	/**
     * 簽名
	 */
	sign(data,key,secret) {
	    var str = ''
	    var data = this.objKeySort(data);
	    for (var p in data) {
	      str = str + p + data[p];
	    }
	    var str = key + str + secret
	    return md5(str).toLowerCase();
	}
	
	objKeySort(arys) {
	    var newkey = Object.keys(arys).sort();
	    var newObj = {};
	    for (var i = 0; i < newkey.length; i++) {
	      newObj[newkey[i]] = arys[newkey[i]];
	    }
	    return newObj;
	}
		
		
		
}

export default {
	util: util
}

第三步：創建api.js 

import requestAll from './request' // 此處，引入存放對promise處理的文件


const apiUrl = process.env.BASE_URL+'qdapi/?act=';
const webUrl = process.env.BASE_URL;
const baseUrl = apiUrl + '?act=';
class api {
	
	//獲取url補充靜態資源
	getUrl() {
		return webUrl;
	}

	//登錄
	login(code,encryptedData,iv,phone){
		let data ={
			code,
			encryptedData,
			iv,
			phone
		};
		return requestAll.getRequest(apiUrl + 'passport/xcxLogin', data);
	}
	
}

export default {
	api:api
}

第四步：MpVue直接在main.js //接口
import api from './utils/api'
Vue.prototype.$api = api

 

然後再頁面直接調用 

this.$api.api.prototype.login('傳參’)

 .then(res =>{

});

 

以上內容只是個人記錄，不懂可以私信，