第一个Vue项目mjdai_auto_office之配置路由和拦截器

前言

一直想开发一个功能比较强大的项目，但是一直没有动手，最近终于有点时间来折腾它了。由于时隔两年没有接触前端了，所以需要一个小项目先练练手感。等这个项目完工之后在着手搞一个大工程。都说好记星不如烂笔头，现在就将这一个过程记录下来，万一有什么踩坑的地方，也可以提示后来人。

接上一篇

配置拦截器并封装post请求

import axios from 'axios'
import { Message } from 'element-ui';
import router from '../router'

// 效应的拦截器
axios.interceptors.response.use(
    success => {
        if(success.status && success.status == 200){
            if(success.data.code == 500 || success.data.code == 401 || success.data.code == 403){
                Message.error({message: success.data.message});
                return;
            }
            if(success.data.message){
                Message.success({message: success.data.message})
            }
        }
        return success.data;
    },
    error => {
        if(error.response.code == 504 || error.response.code == 404){
            Message.error({message: '服务异常了...'});
        }else if(error.response.code == 403){
            Message.error({message: '对不起,你现在没有权限...'});
        }else if(error.response.code == 401){
            Message.error({message: '尚未登陆,请登陆...'});
            router.replace('/')
        }else{
            if(error.response.data.message){
                Message.error({message: error.response.data.message});
            }else{
                Message.error({message: '未知错误...'});
            }
        }
    }
);

// axios.interceptors.request

let base = '';

// post请求
export const postRequest = (url,param) => {
    return axios({
        method:'post',
        url:`${base}${url}`,
        data: param
    })
}

配置代理

let proxyObj = {};

proxyObj['/']={
    // websocket
    ws:false,

    // 目标地址
    target:'http://localhost:8081',

    // 发送请求头host 会被设置target
    changeOrigin: true,

    //重写后端的路径
    pathRewrite:{
        '*/':'/'
    }
}


module.export = {
    devServer: {
        host: 'localhost',
        port: '8080',
        proxy: proxyObj
    }
}