首页 > 技术文章 > Vue + Axios 请求服务器添加简单签名验证

wenhsing 2021-01-19 14:22 原文

后端进行接口签名了,前端自然而然的页要加上对应的签名,加密的方式和后端的要保持一致。

MD5

添加js-md5包

你不用去想服务端是怎么实现签名的,你只需要知道服务端用md5加密签名,剩下的我们通过社区的力量,找到对应的md5扩展包,安装到我们的项目即可。我这里用的是js-md5包,在命令行中运行对应命令安装:

npm install js-md5

编写全局Axios请求文件

import axios from 'axios'
// 引用js-md5包
import md5 from 'js-md5'

// 创建axios实例
const req = axios.create({
  // 设置基础url
  baseURL: '/api/v1',
  // 超时时间
  timeout: 5000
})

// 请求拦截器
req.interceptors.request.use(
  // 配置
  config => {
    // 合并参数
    var params = Object.assign(config.params || {}, {
      // 时间戳
      timestamp: parseInt(Date.now() / 1000)
    })

    // 处理待签名的数据
    var item = []
    for (const k in params) {
      if (Object.hasOwnProperty.call(params, k) && k != 'sign') {
        item.push(k + params[k])
      }
    }
    var str = item.sort().join('')

    // 拼接你的密钥然后进行签名
    params.sign = md5(str + '')
    config.params = params

    return config
  },
  // 错误处理
  error => {
    return Promise.reject(error)
  }
)

export default req

剩下的,你只要正常调用对应的 axios 实例发起请求就可以了。

推荐阅读