axios请求拦截器+封装接口

新建utils文件夹

新建request.js存放在utils文件夹中

import router from '../router'
import axios from 'axios'
// import qs from 'qs'
import { Message, MessageBox } from 'element-ui'

axios.defaults.baseURL = '/api' //上传到服务器时地址应更换为http://...
axios.defaults.timeout = 20000
// axios.defaults.headers = {
//     'Content-Type': 'application/json'
// }

// 添加请求拦截器
axios.interceptors.request.use(
    (config) => {
        // if(getToken()) {
        //     config.headers['Authorization'] = getToken()
        // }
        console.log('请求拦截器正常');
        return config;
    },
    (error) => {
        console.log('请求拦截器错误');
        return Promise.reject(error);
    }
)
  
// 添加响应拦截器
axios.interceptors.response.use(
    (response) => {
        const res = response.data;
        // if(response.headers['Authorization']) {
        //     res['Authorization'] = response.headers['Authorization'];
        // }
        if(res.code && res.code !== 200) {
            console.log('响应拦截器正常但code不为200');
             // 需要重新登录
            if(res.code === 401) { 
                MessageBox.alert('页面超过30分钟未操作，为保证账户安全，即将退出系统，请重新登录后操作', '', {
                    confirmButtonText: '确定',
                    callback: (action) => {
                        // dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('action方法名',值)
                        // commit：同步操作，写法：this.$store.commit('mutations方法名',值)
                        // 调用退出登录接口
                        // Vue.$store.dispatch('user/logout')
                        // 跳转到登录页面
                        router.replace({
                            path: '/'
                        })
                    }
                })
            } else {
                Message({
                    message: res.msg,
                    type: 'error',
                    center: true
                })
                return Promise.reject('error')
            }
        } else {
            console.log('响应拦截器正常200');
            return response.data
        }
    },
    (error) => {
        console.log('响应拦截器错误');
        if(error.message && (error.message.indexOf('404') > 10 || error.message.indexOf('406') > 10)) {
            error.message = '数据读取错误，请联系管理员'
        }
        Message({
            message: error.message,
            type: 'error',
            center: true
        })
        return Promise.reject(error)
    }
)


export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, {params: params}).then(res => {
            console.log(res, 'get请求获取到的')
            resolve(res.data);
        }).catch(err => {
            reject(err.data)
        })
    })
}
export function post(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url, params).then(res => {
            console.log(res, 'post请求获取到的res')
            resolve(res.data);
        }).catch(err => {
            reject(err.data)
        })
    })
}
export function put(url, params) {
    return new Promise((resolve, reject) => {
        axios.put(url, params).then(res => {
            console.log(res, 'put请求获取到的res')
            resolve(res.data);
        }).catch(err => {
            reject(err.data)
        })
    })
}
export function deleted(url, params) {
    return new Promise((resolve, reject) => {
        axios.delete(url, params).then(res => {
            console.log(res, 'delete请求获取到的res')
            resolve(res.data);
        }).catch(err => {
            reject(err.data)
        })
    })
}

新建api.js存放在utils文件夹中

import { get, post, put, deleted} from './request'
export const login = p => post('ideacreated/login', p) //登录
export const loginInfo = p => get('ideacreated/login-info', p) //登录信息
// 账号管理
export const addUsers = p => post('ideacreated/users', p)
export const usersList = p => get('ideacreated/users', p)
export const updateUsers = p => put('ideacreated/users', p)
export const deleteUsers = p => deleted('ideacreated/users', p)
// 生产仓库
export const freeDevices = p => get('ideacreated/company/free-devices', p)

登录页面login.vue

// 页面样式省略
<script>
import { login } from '@/utils/api';
export default {
    data () {
        return {
            formLogin: {
                username: '',
                password: '',
            },
            rules: {
                username: [
                    { validator: validateUsername, trigger: 'blur'}
                ],
                password: [
                    { validator: validatePassword, trigger: 'blur'}
                ]
            }
        }
    },
    methods: {
        login(formName) {
            this.$refs[formName].validate(async(valid) => {
                if (valid) {
                    await login(this.formLogin);
                    this.$router.push("/main");
                } else {
                    return false;
                }
            });
        }
    }
}
</script>