前端实现请求签名

前端对请求参数进行加密作为签名。

1、思路

一般请求参数种类

1. 路径参数

• 会出现在url上

2. params参数

• 会出现在url上
• 所以可以将url一起进行签名

3. post的请求体参数（body）

• 可以将post请求的data数据进行排序、然后拼接成一个字符串然后与其他参数一起进行签名

防止重复请求

• 可以添加时间戳，1分钟内相同的请求为重复请求不给予放行
• 将每个请求添加唯一id，存入redis设置1分钟过期

密钥

因为加密算法是公开的，所以我们可以添加密钥进入签名，这样即使对方知道签名的加密算法，但是没有密钥也是无法串改请求的

• RSA 加密算法 （非对称加密算法）
  • 通过公钥加密私钥解密，来增加安全性。
• 简化：也可以使用随机数作为密钥，这样安全系数较低，但容易实现

加密

• 选择MD5算法对参数进行加密，会使用到js-md5库

经过以上的梳理，我们可以大致明白，需要将可以被修改的参数进行加密成签名。

签名：MD5( postData ? + url + 时间戳 + 请求唯一id + 密钥 )

2、Vue实现添加请求签名

代码如下：

3、axios请求拦截器实现

import axios from 'axios"
import {signatureGenerate} from "../utils/signatureUtil"

const request = new axios.create({
    timeout: 3000
})

// 请求拦截器
request.interceptors.request.use((config) => {

  // 获取请求头参数
  const {signature, timestamp, secret} = signatureGenerate(config)
  // 分别将签名、密钥、时间戳 至请求头 
  if(signature) config.headers["signature"] = signature
  if(secret) config.headers["key"] = secret
  if(timestamp) config.headers["timestamp"] = timestamp 
  // 这里未添加请求唯一id 各位可以自己实现以下，作者偷下懒 ~ ~
    
  return config
});

export default request

4、生成签名工具类

// signatureUtil.js
import md5 from "js-md5";
export function signatureGenerate({data, url, headers}){
    // 参数签名 密钥 + 时间戳 + header参数 + url

    // 密钥
    let secret = Math.random().toString(36).substr(2)
    // 时间戳
    let timestamp = new Date().getTime()     
    // token
    let token = headers.Authorization
    // post参数
    let dataStr = dataSerialize(dataSort(data))
    // 生成签名
    let str = dataStr + "secret=" + secret + "&timestamp=" + timestamp + "&url=" + url
    
    const sign = md5(str)
    
    return {
        signature: sign.toUpperCase(), // 将签名字母转为大写
        timestamp,
        secret
    }
}

// 参数排序
function dataSort(obj){
    if (JSON.stringify(obj) == "{}" || obj == null) {
        return {}
    }
    let key = Object.keys(obj)?.sort()
    let newObj = {}
    for (let i = 0; i < key.length; i++) {
        newObj[key[i]] = obj[key[i]]        
    }
    return newObj
}

// 参数序列化
function dataSerialize(sortObj){
    let strJoin = ''
    for(let key in sortObj){
        strJoin += key + "=" + sortObj[key] + "&"
    }

    // return strJoin.substring(0, strJoin.length - 1)
    return strJoin
}

总结：

​ 其实前端实现起来比较简单，但是还可以继续对axios进行封装，其实并不是所有的请求都需要签名。大家可以自行思考~~

​ 我的问题就是卡在后端获取这些参数的时候浪费了很多时间。

​ 后端API接口校验签名的实现也会陆续发布！