vue封装axiosapi模块化并使⽤⽅式MD5数据加密为了⽅便使⽤ axios 将其封装
httpService.js
import axios from 'axios' // 引⼊axios
import { Loading , Message } from 'element-ui' // 引⼊Elemente-ui （根据⾃⼰使⽤的UI框架引⼊）
const BASE_URL = v.BASE_API // 获取全局设置的请求地址
// 定义get请求数据处理函数 json对象转字符串
const formatParams = (data) => {
let arr = []
for (let name in data) {vue json字符串转数组
arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]))
}
return arr.join('&')
}
axios.defaults.timeout = 15000 // 设置请求超时时间
/**
* 请求时拦截
*/
quest.use(config => {
// 发送请求时设置头部数据
// if (Vuevm.$ken) {
//  config.headersmon['authorization'] =
//      Vuevm.$ken
/
/ }
return config
},
error => {
sponse)
})
/**
* 数据返回拦截
*/
sponse.use(function (response) {
// 获取服务端返回的头部数据
/
/ if (response.headers.authorization) {
//  Vuevm.$storemit('token', response.headers.authorization)
// }
return response
}, function (error) {
ject(error)
})
// 设置请求处理函数（get，post，put）
export const httpService = (url, params, method, loading=true) => {
let loadingInstance = null
console.log(BASE_URL + url)
if (loading) {
loadingInstance = Loading.service({
lock: true,
text: '加载中',
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)"
})
}
if (method === 'post') {
return new Promise((resolve, reject) => {
axios.post(BASE_URL + url, params).then(data => {
if (loading) loadingInstance.close()
resolve(data.data)
}).catch(error => {
if (loading) loadingInstance.close()
<('⽹络不给⼒')
reject(error)
})
})
} else if (method === 'get') {
return new Promise((resolve, reject) => {
<(BASE_URL + url + '?' + formatParams(params)).then(data => {
if (loading) loadingInstance.close()
resolve(data.data)
}).catch(error => {
if (loading) loadingInstance.close()
<('⽹络不给⼒')
reject(error)
})
})
} else if (method === 'put') {
return new Promise((resolve, reject) => {
axios.put(BASE_URL + url + '?' + formatParams(params)).then(data => {
if (loading) loadingInstance.close()
resolve(data.data)
}).catch(error => {
if (loading) loadingInstance.close()
<('⽹络不给⼒')
reject(error)
})
})
}
}
创建member.js （定义api模块⽅便接⼝统⼀管理）
import { httpService } from './httpService' // 引⼊httpService
/**
* @name 代理⽤户列表
* @param {*} params
*/
export const agencyList = (params) => {
return httpService('/web/user/list/agency', params, 'get')
}
页⾯使⽤
import { agencyList } from '@/api/member' // 引⼊定义的api模块获取对应的函数
// 定义请求接⼝函数使⽤async 异步
async getList () {
const listData = await agencyList(this.form)
console.log(listData)
}
axios MD5 加密封装
import axios from 'axios'
import Qs from 'qs'
import { appKey , calcuMD5 , decryptBy , encryptBy } from '../config'
window.Vuevm = Vuevm;
const BASE_URL = v.BASE_API //域名路径
const SEEDMD5 = calcuMD5("U2FsdGVkX189N3VRCrUckSMoQM98v8PB") //加密MD5
const formatParams = (data)=>{
let arr = [];
for (let name in data) {
arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]))
}
return arr.join("&")
}
axios.defaults.timeout = 15000 //超时时间
export const httpService = (url,params,method,loading=true) => {
let slol = JSON.stringify(params)
let data = encryptBy(slol, SEEDMD5)//加密参数
let t = Date.parse(new Date())//时间戳
let fString = appKey + "&" + t + "&" + data
let sign = encryptBy(fString, SEEDMD5)
let newParams = {
data,
appKey,
t,
sign,
token: ken?ken:''
}
if(method === 'post')
{
return new Promise((resolve, reject) => {
axios.post(BASE_URL+url, Qs.stringify(newParams),{
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(data=>{
          // 获取到的数据进⾏解密
data.data = JSON.parse(decryptBy(data.data,calcuMD5("U2FsdGVkXN32VRRCrUckSMoQM98v8PBHUHA")))                resolve(data.data)
}).catch(error=>{
reject(error)
})
})
}
}
config.js
import CryptoJS from 'crypto-js'
import md5 from 'js-md5'
export const appKey = 'cb6015828a44b5234ce9ed1c3bc7acb0'
export const calcuMD5 = (pwd) => { return md5(pwd) }
export const version = '1.0.1'
export const gaoDerKey = 'fee31a04c1acd1c809cb4b4958673864'
export const wxSecret = '4b200551ebef203582268ed45f149ada'
export const wxAppId = 'wxeacc6d8f0388b30c'
// MD5 加密
export const encryptBy =(plaintText,CRYPTOJSKEY) =>{
var plaintText = plaintText;
var options = {
mode: de.ECB,
padding: CryptoJS.pad.Pkcs7
};
var key = Utf8.parse(CRYPTOJSKEY);
var encryptedData = pt(plaintText, key, options);
var encryptedBase64Str = String();
return encryptedBase64Str;
}
export const decryptBy = (encryptedBase64Str,CRYPTOJSKEY, type) => {
var encryptedBase64Str = encryptedBase64Str;
var options = {
mode: de.ECB,
padding: CryptoJS.pad.Pkcs7
};
var key = Utf8.parse(CRYPTOJSKEY);
/
/ 解密
var decryptedData = CryptoJS.DES.decrypt(encryptedBase64Str, key, options); // 解密后，需要按照Utf8的⽅式将明⽂转位字符串
var decryptedStr = Utf8);
return decryptedStr;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。