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')