前端小程序接口参数签名验证，防止数据泄露

一般来说接口参数签名，是为了防止数据泄露，接口参数签名也有其默认的规则，接下来就一起来探讨吧，话不多说直接上代码！

//首先这是我在utilsjs文件里做参数签名需要的方法
timest(times){  //通过时间戳生成当前时间精确到秒，这是必要参数
        let date = new Date(times) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        let Y = date.getFullYear()
        let M =
          (date.getMonth() + 1 < 10 ?
            '0' + (date.getMonth() + 1) :
            date.getMonth() + 1)
        let D =
          (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) 
        let h =
          (date.getHours() < 10 ? '0' + date.getHours() : date.getHours())
        let m =
          (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) 
        let s =
          date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        return Y + M + D + h + m + s      //返回的数据形式是这种202105281420
    },
  
    sortObj(obj){  //需要给我们的参数按ascll码做升序排列
        var keysArr = Object.keys(obj).sort();
        var sortObj = {};
        for (var i in keysArr) {sortObj[keysArr[i]] = encodeURIComponent(obj[keysArr[i]]); }
        return sortObj;
      },
  
    generateSignText(params,key){  //排序后通过&符拼接
        let isthrim = true;
          for(var k in params){
            if(params[k] == '' || params[k] == null){
                isthrim = false
                break;
            }
          }
          if(isthrim == false){
            return;
          }
          let arr = [];
          for (var i in params) {
              arr.push((i + "=" + params[i]));
          }
            let newUrl = arr.join(("&")) + key; //这里的key是后端给的，固定值要拼到最后
          return newUrl
     },
  
    getsign(params,key){ //获取签名这也是最关键的一步
        let nonce1 = Math.random().toString(36).substr(2); //获取随机字符串
        let nonce2 = Math.random().toString(36).substr(2);//因为这个方法是我网上搜的，字符串长度不够
        let nonce =nonce1.concat("-").concat(nonce2)//所以这里我做了一下拼接
        let times = this.timest(Date.now())//获取当前时间
          if(params == undefined || params == null){ //这里的params也是接口需要穿的参数
             params = {};//如果是没有，那代表是get请求，就赋值为空对象
           } 
           params['x-nonce'] = nonce;//这里对象里加上随机字符串
           params['x-tmsp'] = times;//这里往对象里加上时间
           let obj = this.sortObj(params);//按升序排列
           let signText = this.generateSignText(obj,key);//获取拼接的文本
              let sign = md5.hexMD5(signText)//通过md5加密，MD5方法小程序需要引入一个js文件
              let headers = {//拿到签名后把数据格式整理一下
                'x-nonce': nonce,
                'x-tmsp': times,
                'x-sign':sign
              }
              return headers  //因为这些参数我们都要加到请求头里去的
      }

当我们所有的方法都准备好，怎么用呢？直接上代码

import utils from "../utils/util" //首先引入公共方法
let key = '这里是后端给的key'
let params = {} //提前准备一个空对象
export default function request(options){
  console.log(options);//options是我们发起请求传的所有数据
  if(!options.data){  //没有data代表是get请求
    params = {}  //把空对象传进函数
  }else{   //否则是post请求，有data数据
    params =JSON.parse(options.data); //有data把参数传进去拼接排序拿签名
  }
  let headers = utils.getsign(params,key) //这里拿到return出来的headers
  return new Promise((resolve,reject)=>{
    let user = utils.get('user');
      wx.showLoading({
        title: "加载中",
        mask: true,
      });
    wx.request({
      header:{
        "x-token":user['x-token'],
        'Content-Type': 'application/json',
        'x-nonce': headers['x-nonce'],//这里三个就是加到请求头里的数据
        'x-tmsp': headers['x-tmsp'],
        'x-sign':headers['x-sign'] //这个是签名
      }, 

这些配置好就可以正常请求接口啦，如若有错请多多指正，相互学习，谢谢。太热了，我要去喝肥宅水了，哈哈。。。。