vue中axios的配置文件

import axios from 'axios'  								// 导入axios
import qs from 'qs'										// 导入qs
import Vue from 'vue'									// 导入vue
import router from '../router'							// 导入路由文件
import md5 from 'md5'									// 导入md5加密
import JSEncrypt from 'jsencrypt'						// 导入rsa加密
import { Toast, Indicator } from 'mint-ui'				// 导入UI框架
import apis from './api'								// 导入接口文件
import BASE_URL from '../config' 						// 导入配置文件

// 发送请求前的动作
axios.interceptors.request.use(config => { 
    // 可以显示loading 
    Indicator.open(); 
    return config  
}, error => {  
    return Promise.reject(error)  
})

// 接收响应前的动作
axios.interceptors.response.use(response => {  
    // 可以清除loading 
    Indicator.close(); 
    return response  
}, error => {  
    return Promise.resolve(error)  
})

// 对需要提交的data做筛选,根据配置文件apis的常量,筛选出不需要加密的字段
function dataScreen(data, body){
    let obj = {};
    let o = {};
    for(let item in data){
        if(~body.indexOf(item)){
            o[item] = data[item];
        }else{
            obj[item] = data[item];
        }
    }
    o.data = obj;
    return o;
}

// 对需要sign的参数进行字段名称排序,把对应的值进行拼接
function getObjSort(obj) {
    let keys = Object.keys(obj).sort();
    if(arguments.length <= 0) return false;
    let str = '';
    for(let i = 0; i < keys.length; i++) {
        str += obj[keys[i]];
    }
    return str;
}

// 对拼接好的字符串进行公钥加密,返回sign字符串
function getSign(str){
    let encrypt = new JSEncrypt();
    let sign = '';
    
    encrypt.setPublicKey(apis.PUBLIC_KEY); //设置公钥key
    str = encodeURI(str);
    for(var i = 0; i <= parseInt(str.length / 117); i++) {
        sign += encrypt.encrypt(str.substr(i * 117, 117))
    }
    return sign;
}

const vueAjax = (opts, data, body, describe) => {
    let o = dataScreen(data, body);           // 发送前对参数进行处理
    let sign = md5(getObjSort(o.data));                  // 进行md5加密
    // console.log("【sign前】" + getObjSort(o.data))
    console.log("【加密前】" + JSON.stringify(o.data))
    o.data = getSign(JSON.stringify(o.data));               // 用JSEncrypt进行RSA加密


    // console.log("【request】" + JSON.stringify(o))

    let publicOpts = {                  // 传给后台的公共参数
        // username: '1234567890'
    }

    let headers = {}
    headers.sign = sign;

    let defaultOpts = {                                     // 请求的配置
        url: opts.url,                                      // 请求的url
        method: opts.method,                                // 请求的类型
        baseURL: BASE_URL,									// 请求地址前缀
        timeout: 10000,                                     // 超时的时间
        headers: Object.assign(headers, apis.HEADERS),
        params: Object.assign(publicOpts, o),               // get请求的参数序列
        data: qs.stringify(Object.assign(publicOpts, o)),   // post请求的参数序列
    }

    if(opts.method=='get') delete defaultOpts.data;   
    else delete defaultOpts.params;

    let promise = new Promise((resolve, reject) => {
        // 发起请求 给请求建立一个promise,方便页面中处理异步
        axios(defaultOpts).then(
	        // 请求成功后,根据与后台的协定,编写对应逻辑
            (res) => {
                let d = res.data;
                if (d.msg == 1) {  
                    resolve(d);  // promise成功后的回调
                }else if(d.msg == 3){
                    router.push({name:'error',params:{type:'token'}})   // 这里是登录超时后跳转致错误页
                }else{
                    reject(d);  
                }
                // console.log(describe + "——" + JSON.stringify(res.data))
            }
        ).catch(
            (error) => {
                Indicator.close();
                //errorFn(error);
                reject(error); // promise失败后的回调
            }
        )
    })
      
    return promise;
}

export default vueAjax;

config.js

let BASE_URL = ""; //这里是一个默认的url,可以没有
switch (process.env.NODE_ENV) {
    case 'development':
        BASE_URL = "http://192.168.13.195:8080" //这里是本地的请求
        break
    case 'test':
        BASE_URL = "http://bhrbeta.bhome.com.cn/workers_attendance" // 自定义的测试环境
        break
    case 'production':
        BASE_URL = "http://attendance.bhome.com.cn/workers_attendance" //生产环境
        break
}

export default BASE_URL;

再在package.json加入

{
	"serve": "vue-cli-service serve",
    "test": "vue-cli-service build --mode test",
    "build": "vue-cli-service build"
}

有不明白,或者更好的建议,请留言,谢谢
注:爱护原创,转载请说明出处

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

云端君

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值