vue2 封装get post请求加密参数

最新推荐文章于 2024-06-04 17:40:48 发布

原创最新推荐文章于 2024-06-04 17:40:48 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #json #javascript

本文介绍了如何在Vue.js应用中使用Axios进行API请求的封装，包括设置默认配置、请求和响应拦截器，以及处理各种错误情况。同时展示了get和post请求的封装示例，涉及参数加密、登录超时和错误提示等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import axios from 'axios'
import { getStore, removeStroe } from '@/utils/storage'
import { TOKEN_NAME } from '@/config/base'
import app from '@/main'
import store from "../store/index"
import Qs from 'qs'
import Route from '@/router/index'
// 加密解密
import { encrypt, jsonEncrypt } from '@/utils/aesHelper'

axios.defaults.timeout = 30000;
axios.defaults.headers.post['Content-Type'] = 'application/json';
//请求拦截
axios.interceptors.request.use(config => {
        config.headers.Authorization = getStore(TOKEN_NAME);
        if (config.url.indexOf('lgApi') > 0) { //lgApi
            if (config.url.indexOf('checkCaptcha') > 0) {
                config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
            } else {
                config.headers['Content-Type'] = 'application/json'
                config.headers.Authorization = getStore(TOKEN_NAME);
            }
        } else if (config.url.indexOf('pubUpload/fileDownLoad/deleteFile') > 0) {
            config.headers['Content-Type'] = 'application/json'
        } else if (config.url.indexOf("/media/addZhgbMedia") > 0 || config.url.indexOf("/tyApi") > 0) {
            return config
        }

        //所有接口加密方法
        if (config.url.indexOf('checkCaptcha') == -1) {
            paramEncrypt(config);
        }
        return config
    }, error => {
        return Promise.reject(error)
    })
    //参数加密
function paramEncrypt(config) {
    if (config.method == 'get') {
        axios.defaults.headers.post['Content-Type'] = 'application/json';
        let param = Object.assign({}, config.params)
        config.params = jsonEncrypt(param)
    } else if (config.url.indexOf('lgApi') > 0) {
        if (config.url.indexOf('userLogin') > 0) {
            config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
            let jsonObj = Qs.parse(config.data);
            let encryptStr = Qs.stringify(jsonEncrypt(jsonObj))
            config.data = encryptStr
        } else {
            let jsonStr = JSON.stringify(Qs.parse(config.data))
            let encryptStr = encrypt(jsonStr)
            config.data = encryptStr
        }
    } else {
        let jsonStr = JSON.stringify(Qs.parse(config.data))
        let encryptStr = encrypt(jsonStr)
        config.data = encryptStr
    }
}

//响应拦截
axios.interceptors.response.use(response => {
    return response
}, error => {
    return Promise.reject(error.response.data)
})

//封装axios的get请求
export function get(url, params,config) {
    return new Promise((resolve, reject) => {
        axios.get(
                url, { params,...config }
            )
            .then(res => {
                if (validateData(res.data))
                    resolve(res.data)
                else
                    reject(res.data)
            })
            .catch((error) => {
                console.log(error);
                store.commit("SET_LOADING_SHOW", false);
                // 网络错误
                // app.$Message.error('网络错误!');
            })
    })
}

//封装axios的post请求
export function post(url, data = {}) {




    return new Promise((resolve, reject) => {

        axios({
                method: 'post',
                url: url,
                data: Qs.stringify(data)
            })
            .then(res => {
                if (validateData(res.data)) {
                    resolve(res.data);
                }
            })
            .catch((error) => {
                reject(error)
                if (error.error_description == 'Too many failures') {
                    if (document.getElementsByClassName('ivu-message-notice-content-error').length === 0) {
                        app.$Message.warning('用户名或密码错误次数超过5次，请一小时以后重新登录！');

                    }


                } else if (error.error_description == 'invalid username or password, Bad credentials') {
                    if (document.getElementsByClassName('ivu-message-notice-content-error').length === 0) {
                        app.$Message.warning('用户名或密码错误！');

                    }


                } else {
                    // 网络错误

                    // app.$Message.error('网络错误!');
                }
                store.commit("SET_LOADING_SHOW", false);
            })
    })
}

/**
 *
 * @param {校验ajax返回的数据} res
 */
function validateData(res) {
    //查找图片
    if (res == '{code: 500, data: [], msg: "fail"}')
        return true
            // if (!res.token) return true;

    if (!res.code) return true;

    let { code, msg, data } = res
    if (isNaN(code)) {
        return false
    }

    if (code == 2011) {
        removeStroe(TOKEN_NAME)
        if (document.getElementsByClassName('ivu-message-notice-content-error').length === 0) {
            app.$Message.error('登录超时，请重新登录！')

        }

        Route.push('/login')
    }
    if (!(code == 0 || code == 500 || code == -1)) {
        if (code == 2002) {
            removeStroe(TOKEN_NAME)

            if (document.getElementsByClassName('ivu-message-notice-content-error').length === 0) {
                app.$Message.error('该账号已在其他浏览器登录！如非本人操作，请立即重新登录并修改密码！')

            }

            Route.push('/login')
        } else {
            return true
        }
    }
    return true
}

使用

import { get,post } from "@/axios/http";
/**********************************************************************/
//一键报警列表
export function getAlarmInfoPage(pageObj) {
    return get("/informationApi/alarmInfo/getAlarmInfoPage", pageObj)
}
//一键报警审核详情
export function getAuditDetail(pageObj) {
    return get("/informationApi/alarmInfo/getAuditDetail", pageObj)
}
//保存党建活动
export function saveAlarmAuditInfo(pageObj) {
    return post("/informationApi/alarmInfo/auditSave", pageObj)
}