axios的请求拦截器和响应拦截器

1.axios.create()是添加了自定义配置的新的axios 


import axios from 'axios';
import { MessageBox,Message } from 'element-ui';
import db from '@/utils/localstorage';
var httpApi = axios.create({
 
    baseURL:process.env.VUE_APP_PROD_REQUEST_DOMAIN_PREFIX + process.env.VUE_APP_BASE_API,
    timeout: 10000,
    headers: {
        'Content-Type': 'application/json; charset=UTF-8'
    },
    validateStatus: function (status) {
        return status === 200
    },
})
httpApi.defaults.withCredentials = true

// http response 服务器响应拦截器,状态码为40001时说明登录失效,应该跳转到登录页
httpApi.interceptors.response.use(response => {
    const resData = response.data;
    //接口报错,抛出异常
    if (resData.isSuccess === false) {
        // 未登录
        if (resData.code === 40000 || resData.code === 40001
            || resData.code === 40002 || resData.code === 40003
            || resData.code === 40005 || resData.code === 40006
            || resData.code === 40008
        ) {
            MessageBox.alert(resData.msg, '提醒', {
                confirmButtonText: '确定',
                callback: () => {
                    window.location.hash = '/login'
                }
            })
        } else {
                Message.error(resData.msg);
        }
    }
    return response
}, (error) => {
    if (error.response) {
        const errorMessage = error.response.data === null ? '系统内部异常,请联系网站管理员' : error.response.data.errorMsg
        switch (error.response.status) {
            case 404:
                Message({
                    message: '很抱歉,资源未找到' || 'Error',
                    type: 'error',
                    duration: 5 * 1000
                })
                break
            case 403:
                Message({
                    message: '很抱歉,您暂无该操作权限' || 'Error',
                    type: 'error',
                    duration: 5 * 1000
                })
                break
            case 401:
                MessageBox.alert(errorMessage || '登录已失效,请重新登录', '提醒', {
                    confirmButtonText: '确定',
                    callback: () => {
                      db.clear();
                      localStorage.clear();
                      window.location.hash = '/login'
                    }
                  })
                break
            default:
                if (errorMessage) {
                    Message({
                        message: errorMessage,
                        type: 'error',
                        duration: 5 * 1000
                    })
                }
                break
        }
    }
    return Promise.reject(error)
})
//判断token,拼接地址的configApi
httpApi.interceptors.request.use(
    config => {
        // 判断是否存在token,如果存在的话,则每个http header都加上token
        // 在这里设置请求头
        let userInfo = localStorage.getItem("userInfo") ? JSON.parse(localStorage.getItem("userInfo")) : ''
        let tenantCode = localStorage.getItem("tenantCode")  //租户信息。我这个系统有租户
        const token = userInfo ? userInfo.token : '';
        let lamp_web = 'lamp_web';
        let clientSecret = 'lamp_web_secret';
        // 设置请求头
        if (token) {
            config.headers.token = `Bearer ${token}`;
            config.headers['Authorization'] = `Basic ${Base64.encode(`${lamp_web}:${clientSecret}`)}`;
        }
        if (tenantCode) {
            config.headers['Tenant'] = tenantCode ? `${tenantCode}` : 'eHB4eHQ';;
            console.log(config.headers['Tenant'],'config.headers')
        }
        config.headers['X-isTenant'] = false;
        return config;
    },
    error => {
        console.log(error, '[[[[[')
        return Promise.reject(error);
    });

export default httpApi;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值