vue中 aixos 常用配置 aixos拦截器 interceptors的使用

                            axios的配置   公共路径配置    拦截器的使用

 //这个文件是根组件 new Vue，所有所需的模块和对象都要在new Vue之前配置好

 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'

 //手动引入
 import axios from 'axios' //引入axios文件
 //将axios添加到vue的原型对象中，
 // 实例对象可以直接使用原型对象中的属性和方法
 //所有的组件都是vue的实例，所有组件都可通过 this.$http使用axios
 // 说明：只要是像axios这样得第三方库（与vue没有任何关系），都应该通过这种方式统一去导入
 Vue.prototype.$http=axios  //以后再组件中 使用 this.$http就可使用axios

 //配置公共路径
 // 配置好公共路径后，每次使用axios发送请求，只需要写当前接口的路径（比如'/product'）
 // axios在发送请求之前，会将baseUrl + '/product' 得到完整的路径，才会发送请求
 axios.defaults.baseURL='http://localhost:8888/api/private/v1'

 // axios.defaults.withCredentials=true //让axios的请求携带验证信息到服务端（钥匙）

 // 只要配置了拦截器，那么所有的请求都会走拦截器
 // 因此，可以在拦截器中统一处理headers（处理：除了登录接口以外的所以接口，都需要将token传递给服务器）
 // 请求拦截器(Add a request interceptor )
 axios.interceptors.request.use(
   function (config) {
     //在请求发送之前做一些事情
     // endsWith 字符串的方法，用来判断是不是以参数结尾的，如果是返回值为true
     if(!config.url.endsWith('/login')){// 判断如果是登录接口，就不需要添加 Authorization 请求头
       config.headers['Authorization']=localStorage.getItem('token')  //将token设置在请求头，传递给服务器接口，这样才能正确的调用这个接口
     }
        return config;
 },
 );

 //   响应拦截器(Add a response interceptor)
 axios.interceptors.response.use(
   function (response) {
     //在获取到响应的时候做一些事情，
     if(response.data.meta.status===401){//只要token失效，就跳转回登录页面
       //因为现在不是在组件中，因此无法通过this.$router来访问到路由实例
       // 但是可以直接通过 上面导入的路由模块中的 router来访问到路由
         router.push('/login') //跳转到登录页
         localStorage.removeItem('token')
     }
     console.log( response )
        return response;
 },
 );

 //导入全局css样式  @表示src
 import '@/assets/index.css'

 Vue.config.productionTip = false

 Vue.use(ElementUI)

 new Vue({
   router,
   store,
   render: h => h(App)
 }).$mount('#app')