tduck-front/src/api/index.js

import axios from 'axios'
// import qs from 'qs'
import {MessageBox, Message} from 'element-ui'
import Verification from '@/components/verifition/verification.js'
import router from '@/router/index'
import store from '@/store/index'
import signMd5Utils from '@/utils/sign'

const toLogin = () => {
    router.push({
        path: '/login',
        query: {
            redirect: router.currentRoute.fullPath
        }
    })
}

const api = axios.create({
    baseURL: process.env.VUE_APP_API_ROOT,
    timeout: 10000,
    responseType: 'json',
    withCredentials: false,
    headers: {
        'Content-Type': 'application/json'
    }
})

api.interceptors.request.use(
    request => {
        /**
         * 全局拦截请求发送前提交的参数
         * 以下代码为示例，在登录状态下，分别对 post 和 get 请求加上 token 参数
         */
        if (store.getters['user/isLogin']) {
            request.headers.token = store.state.user.token
        }
        signRequest(request)
        return request
    }
)

function signRequest(request) {
    // 签名验证
    if (request.params == undefined) {
        request.params = {}
    }
    let timestamp = new Date().getTime()
    request.params.timestamp = '' + timestamp
    let sign = signMd5Utils.getSign(request.url, request)
    request.params.sign = sign
}

api.interceptors.response.use(
    response => {
        /**
         * 全局拦截请求发送后返回的数据，如果数据有报错则在这做全局的错误提示
         * 假设返回数据格式为：{"code":500,"msg":"邮箱地址不正确","data":null}
         * 规则是当 code 为 200 时表示请求成功，500 发生错误
         * 为 401 时表示接口需要登录或者登录状态失效，需要重新登录
         * 请求出错时 msg 会返回错误信息
         * 则代码如下
         */
        console.log(response)
        let errCodes = [500, 405, 403]
        const res = response.data
        // eslint-disable-next-line no-debugger
        debugger
        if (res.code === 200) {
            return Promise.resolve(res)
        } else if (errCodes.includes(res.code)) {
            // eslint-disable-next-line no-debugger
            debugger
            // 这里做错误提示，如果使用了 element ui 则可以使用 Message 进行提示
            Message({
                message: res.msg || 'Error',
                type: 'error',
                duration: 5 * 1000
            })
            return Promise.reject(res)
        } else if (res.code === 401) {
            // 有一个接口进入该方法 其他接口则不在进入
            let reLogin = store.getters['global/isReLogin']
            if (!reLogin) {
                store.dispatch('global/loginExpired', true).then(() => {
                    // to re-login
                    MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
                        confirmButtonText: '重新登录',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        toLogin()
                        // 重置状态
                        this.$store.dispatch('global/loginExpired', false).then(() => {
                        })
                    }).catch(() => {

                    })
                })
            }
            return Promise.reject(res)
        } else if (res.code === 416) {
            console.log('validate')
            Verification().then(value => {
                console.log(value)
                setTimeout(function() {
                    response.config.params.slideCode = value
                    delete response.config.params.sign
                    response.config.data = JSON.parse(response.config.data)
                    signRequest(response.config)
                    return axios(response.config)
                }, 1000)
            })
            return Promise.reject(res)
        }
        return Promise.resolve(res)
    },
    error => {
        Message({
            message: '服务开小差了，请稍后再试',
            type: 'error',
            duration: 5 * 1000
        })
        return Promise.reject(error)
    }
)

export default api