axios帮助类

import Vue from "vue";
import axios from 'axios'

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const request = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    baseURL: process.env.BASE_API,
    // 超时
    timeout: 10000
});

// 跨域认证信息 header 名
const authorizationKey = 'Authorization'

// request拦截器
request.interceptors.request.use(config => {
    // 是否需要设置 token
    const isToken = (config.headers || {}).isToken === false
    if (getAuthorization() && !isToken) {
        config.headers[authorizationKey] = getAuthorization()
    }
    // get请求映射params参数
    if (config.method === 'get' && config.params) {
        let url = config.url + '?';
        for (const propName of Object.keys(config.params)) {
            const value = config.params[propName];
            var part = encodeURIComponent(propName) + "=";
            if (value !== null && typeof (value) !== "undefined") {
                if (typeof value === 'object') {
                    for (const key of Object.keys(value)) {
                        let params = propName + '[' + key + ']';
                        var subPart = encodeURIComponent(params) + "=";
                        url += subPart + encodeURIComponent(value[key]) + "&";
                    }
                } else {
                    url += part + encodeURIComponent(value) + "&";
                }
            }
        }
        url = url.slice(0, -1);
        config.params = {};
        config.url = url;
    }
    return config
}, error => {
    console.log(error)
    Promise.reject(error)
});


// 响应拦截器
request.interceptors.response.use(res => {
    console.log(res);
    const code = res.data.code;
    let msg ="";
    if(code==403){
        //无接口访问权限
        msg = window.vm.$i18n.t("globalLang.Messages.M000007");
    }
    if(code==407){
        //登录凭证已经失效
        msg = window.vm.$i18n.t("globalLang.Messages.M000008");
    }
    if(msg!=""){
        Vue.prototype.$message.error(msg);
        return Promise.reject(msg)
    }
    return res.data;
},
    error => {
        console.log('err' + error)
        let { msg } = error;
        if (msg == "Network Error") {
            //"后端接口连接异常";
            msg = window.vm.$i18n.t("globalLang.Messages.M000004");
        }
        else if (msg.includes("timeout")) {
            //"系统接口请求超时";
            msg = window.vm.$i18n.t("globalLang.Messages.M000005");
        }
        else if (msg.includes("Request failed with status code")) {
            //"系统接口" + msg.substr(message.length - 3) + "异常";
            msg = window.vm.$i18n.t("globalLang.Messages.M000005") + ":" + msg.substr(msg.length - 3);
        }
        Vue.prototype.$message.error(msg);
        return Promise.reject(error)
    }
)

//获取认证信息
function getAuthorization() {
    return sessionStorage.getItem(authorizationKey);
}
//设置认证信息
function setAuthorization(token) {
    sessionStorage.setItem(authorizationKey, token);
}
//清除认证信息
function removeAuthorization() {
    sessionStorage.removeItem(authorizationKey);
}

export {
    request, setAuthorization, removeAuthorization, getAuthorization
}

接口方法

import {request} from '@/utils/request'

// 登录
export function login(username, password) {
    return request({
        url: '/login',
        method: 'post',
        data: { username, password }
    })
}
// 退出
export function logout(token) {
    return request({
        url: '/logout',
        method: 'post',
        data:{token}
    })
}

使用

login(values.name, values.password).then((data)=> {
              if(data.code!=200){
                this.$message.warning({
                  content: this.$t("globalLang.Messages.M000002"),//登录失败，账号或密码不正确
                  key: this.loadingKey,
                  duration: 2,
                });
                return;
              }
              this.$message.success({
                content: this.$t("globalLang.Messages.M000001"),//您好，欢迎回来
                key: this.loadingKey,
                duration: 2,
              });
              //设置登录信息
              setAuthorization(data.data.token);
              //初始化菜单数据
              MenuUtil.clearData();
              //菜单数据
              var menuList = []
              //设置菜单显示的状态
              MenuUtil.initMenus(menuList);
              this.$router.push(MenuUtil.getHomeUrl());
            }).finally (()=>{
               this.NProgress.done();
               this.logging = false;
            });