Vue + Axios 請求服務器添加簡單簽名驗證

后端進行接口簽名了，前端自然而然的頁要加上對應的簽名，加密的方式和后端的要保持一致。

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 實例發起請求就可以了。