vue+axios全局注册环境变量和全局接口拦截黑科技

axios 用了有一段时间了，可能对于刚入手的同学来说，和vue-resource没啥区别。但是有没有相关，为啥那么多人喜欢用axios，而不用vue-resource啦。axios有很多的黑科技，比如全局注册变量，全局拦截等等，对于开发来说，可以节省很多事儿！！！

一、安装axios

老规矩，要想使用axios，我们得安装它，安装方式：npm install axios --save

二，在入库文件main.js（我的是main.js）中引入axios

import axios from 'axios'

然后注册到vue的全局变量上，就可以在别的任何组件中使用了。 

Vue.prototype.$axios = axios

三，在组件HelloWorld.vue中使用axios

这里我用的csdn的一个接口"https://www.csdn.net/api/articles?type=more&category=home&shown_offset=1531884384612144"

如果拿来直接用，会报跨域错误，我想大家应该都知道原因吧！！!

那么怎么办啦，可能你首先会想到jsonp，或者代理的方式。不过这里jsonp就行不通了。具体原因自己思考。

下面用代理的方式解决这个跨域的问题。

首先，在config目录下的index文件中dev下找到proxyTable 这个地方，添加如下代码：

    proxyTable: { // 在这里配置如下代码
        '/api': {
            target:'https://www.csdn.net/api/articles?type=more&category=home&shown_offset=1531884384612144', // 你请求的第三方接口
            changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
            pathRewrite:{  // 路径重写，
                '^/api': '/api'  // 替换target中的请求地址，也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api即可。
            }
        }
    },

然后在组件中调用接口：

这时在浏览器查看发现正常返回了数据，样式没做处理，自己做可以美化一下。

 四，本文的重点：接口全局注册参数变量和添加全局拦截

第一步，axios全局注册参数变量，本文以登录为例，通常最常用的token形式。为了安全，通常token都是放在header中的，做过的同学都知道。

首先在入口文件mian.js中添加如下代码

//添加全局token
Vue.prototype.$axios.defaults.headers['authorization'] = "my token";

然后重启，在浏览器查看，header中已经有了这个参数authorization。

第二步，axios添加全局接口拦截

同样也是在入口文件mian.js中添加代码：

//添加全局拦截
Vue.prototype.$axios.interceptors.response.use(function (response) {
  let rps = response.data;
  //假设token失效 返回的code是401
  console.log(rps);
  if(rps.ret == 401){
    //具体的处理逻辑代码写在此处

  }
  return response;
}, function (err) {
  console.log(err);
});

到此，本文的重点全部讲完了，是不是觉得axios很强大。

源码下载地址github:https://github.com/catbea/px2rem

看了此文，有收货的话，可以关注一下。后面还有很多黑科技哦