基于axios实现API签名

前言

在前后端分离的架构中，前端需要向后端发送请求获取数据。而在实际开发中，我们经常会遇到需要对请求进行签名的情况，以保证请求的安全性和可靠性。本文将介绍一种基于axios的API签名算法。

签名算法

签名算法是一种将请求参数和密钥进行加密生成签名的算法。在请求中，将签名和请求参数一起发送给后端，后端通过验证签名的正确性来判断请求的合法性。

签名生成流程

1. 将请求参数按照参数名的字典序升序排列，并将参数名和参数值用等号连接成字符串，多个参数之间用&连接，得到待签名字符串。
2. 在待签名字符串末尾加上密钥，得到待加密字符串。
3. 对待加密字符串进行加密，生成签名。

签名验证流程

1. 将请求参数按照参数名的字典序升序排列，并将参数名和参数值用等号连接成字符串，多个参数之间用&连接，得到待签名字符串。
2. 在待签名字符串末尾加上密钥，得到待加密字符串。
3. 对待加密字符串进行加密，生成签名。
4. 将生成的签名和请求中的签名进行比对，如果一致，则请求合法，否则请求非法。

签名算法实现

在axios中，我们可以通过拦截器来实现签名算法。具体实现如下：

import axios from 'axios';
import md5 from 'md5';

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
});

// request拦截器
service.interceptors.request.use(config => {
  // 对请求参数进行签名
  const params = config.params;
  const keys = Object.keys(params).sort();
  let str = '';
  for (let i = 0; i < keys.length; i++) {
    const key = keys[i];
    str += `${key}=${params[key]}&`;
  }
  str += 'key=密钥';
  const sign = md5(str);
  config.params.sign = sign;
  return config;
}, error => {
  // 请求错误处理
  console.log(error);
  Promise.reject(error);
});

// response拦截器
service.interceptors.response.use(
  response => {
    const res = response.data;
    if (res.code !== 200) {
      // 请求失败处理
      console.log(res.message);
      return Promise.reject(res.message);
    } else {
      return res.data;
    }
  },
  error => {
    // 响应错误处理
    console.log(error);
    return Promise.reject(error);
  }
);

export default service;

在上述代码中，我们通过拦截器对请求参数进行签名，并将签名添加到请求参数中。在响应拦截器中，我们对响应进行处理，如果请求失败，则输出错误信息。

总结

本文介绍了一种基于axios的API签名算法，通过对请求参数进行签名，可以保证请求的安全性和可靠性。在实际开发中，我们可以根据具体需求进行调整和优化。