1. 程式人生 > 實用技巧 >Vue + Axios 請求伺服器新增簡單簽名驗證

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 keyArr = Object.keys(params).sort()
    var newParams = {}
    for (var i = 0, len = keyArr.length; i < len; i++) {
      newParams[keyArr[i]] = params[keyArr[i]];
    }

    // 生成字串
    var str = ''
    for (const k in newParams) {
      if (Object.hasOwnProperty.call(newParams, k)) {
        const v = newParams[k];
        str += k + v
      }
    }
    // 拼接你的金鑰然後進行簽名
    params.sign = md5(str + '')
    config.params = params

    return config
  },
  // 錯誤處理
  error => {
    return Promise.reject(error)
  }
)

export default req

剩下的,你只要正常呼叫對應的 axios 例項發起請求就可以了。