Vue + Axios 請求伺服器新增簡單簽名驗證
阿新 • • 發佈:2021-01-19
後端進行介面簽名了,前端自然而然的頁要加上對應的簽名,加密的方式和後端的要保持一致。
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 例項發起請求就可以了。