5、axios网络请求封装以及登录前后端对接

前端网络访问，主流方案就是Ajax，Vue也不例外，在Vue2.0之前，网络访问较多的采用vue-resources,Vue2.0以后，官方不再建议使用vue-resourves,这个项目也停止维护，目前建议使用的方案是axios。
axios是一个第三方的网络请求库，很多人一说Ajax就想到$ .Ajax()、$ .Post()、$ .Get(),这些是Ajax没错，但这些都是jQuery中封装的Ajax,并不是最原始的写法，如果用JavaScript，不用任何外部依赖的库一样也可以发送一个Ajax请求，那个对象就是JavaScript里面有个对象叫XMLHttpRquest,它才是最原始的Ajax请求，它里面有一些回调如onsuccess、onerror等等，那么这样就会有点麻烦，所以才会有一些封装的东西($ .Ajax()、$ .Post()、$ .Get())。那么JavaScript里面既然可以封装成这些，那当然也能封装成其他的，axios就是其中之一。
axios使用步骤很简单，首先在前端项目中引入axios

1、axios引入
安装axios网络请求库(npm install axios -S)，安装完成后，按理说可以直接使用了，但是，一般在生产环境中，我们都需要对网络请求进行封装，因为网络请求可能会出错，这些错误有的是代码错误，也有的是业务错误，不管是哪一种错误，都需要开发者去处理，而我们不可能在每一次发送请求时，都去枚举各种错误情况，因此我们需要对前端请求进行封装，封装完成后，将 前端错误统一处理，这样开发者只需要在每一次发送请求的地方处理请求成功的情况。失败的情况统一去处理。
2、请求封装
在axios中，我们可以使用axios自带的拦截器来实现对错误的统一处理，axios中有请求拦截器，也有响应拦截器，请求拦截器中可以统一添加公共的请求参数，例如单点登陆这种token。响应拦截器则可以实现对错误的统一处理。另外一个需要注意的则是错误的展示需要使用一种通用的方式，而不可以和页面绑定（例如，登录失败在用户名或者密码输入框后面展示错误信息，不支持这种错误展示方式），这里推荐使用ElementUI中的MessageBox来展示错误信息，这是一个跟页面无关的组件。

封装后的axios如下：

import axios from 'axios'
import {Message} from 'element-ui'
axios.interceptors.request.use(config => {
  return config;
}, err => {
  Message.error({message: '请求超时!'});
  // return Promise.resolve(err);
})

axios.interceptors.response.use(data => {//{data:{status:200,msg"",obj:{}},status:200}
  if (data.status && data.status == 200 && data.data.status == 500) {
    //业务逻辑错误
    Message.error({message: data.data.msg});
    return;
  }
  if (da