vue项目中配置axios

vue项目中配置axios
第一种

	//生产环境判断 线下测试域名 线上服务器域名
const BASEAPI = process.env.NODE_ENV === 'development' ? '网址' : '网址'
// 创建axios实例
const request = axios.create({
  baseURL: BASEAPI, //请求接口域名
  timeout: 60000, // 请求超时设置
  withCredentials: false, //是否让axios请求携带 cookies 如果是用session验证此处为true 默认为false可以不写
  headers: {
    'content-type': 'application/x-www-form-urlencoded'
  } //请求头配置
});
// 请求拦截
request.interceptors.request.use(config => {
  config.data = qs.stringify(config.data);
  startLoading();
  let token= localStorage.getItem('token')
  if (token) {
    // console.log(store.state.token)
    // config.headers.token = `${store.state.token}`;
    config.headers.token = token;
  } // 让每个请求头携带存入vuex中的token 根据实际情况自行修改
  return config;
}, error => {
  return Promise.reject(error);
});
//响应拦截
request.interceptors.response.use(response => {
  //结束加载动画
  endLoading()
  //此处判断token/session是否过期然后跳转login页面 从新获取
  if (response.data.code ==2) {
    router.push('/login')  
  }
  return response;
}, error => {
  endLoading()
  console.log(error)
  return Promise.reject(error);
});

第二种 配合vuex

	1.首先在state中定义，本地存储token，mutations调取方法移除token
const user = {
  state: {
    token: localStorage.getItem('token'),
    username: localStorage.getItem('username')
  },

  mutations: {
    BIND_LOGIN: (state, data) => {
      localStorage.setItem('token', data)
      state.token = data
    },
    BIND_LOGOUT: (state) => {
      localStorage.removeItem('token')
      state.token = null
    },
    SAVE_USER: (state, data) => {
      localStorage.setItem('username', data)
      state.username = data
    }
  },

  // actions: {
  //   bindLogin({ commit }, data){
  //     commit('BIND_LOGIN', data)
  //   },
  //   bindLogout({ commit }){
  //     commit('BIND_LOGOUT')
  //   },
  //   saveUser({ commit }, data){
  //     commit('SAVE_USER', data)
  //   }
  // }
}
export default user

2.配置axios,，引入store中js文件
// axios 配置
import axios from 'axios'
import store from './store'
import router from './router/router.js'
//生产环境判断 线下测试域名 线上服务器域名
const BASEAPI = process.env.NODE_ENV === 'development' ? '网址' : '网址'
//创建 axios 实例
let instance = axios.create({
  timeout: 5000, // 请求超过5秒即超时返回错误
  headers: { 'Content-Type': 'application/json;charset=UTF-8' },
  baseURL: BASEAPI, //请求接口域名
})

instance.interceptors.request.use(
  config => {
    if (store.getters.token) { // 若存在token，则每个Http Header都加上token
      config.headers.Authorization = `token ${store.getters.token}`
      console.log('拿到token')
    }
    console.log('request请求配置', config)
    return config
  },
  err => {
    return Promise.reject(err)
  })

// http response 拦截器
instance.interceptors.response.use(
  response => {
    console.log('成功响应：', response)
    return response
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 返回 401 (未授权) 清除 token 并跳转到登录页面
          store.commit('BIND_LOGOUT')
          router.replace({
            path: '/login',
            query: {
              redirect: router.currentRoute.fullPath
            }
          })
          break
        default:
          console.log('服务器出错，请稍后重试！')
          alert('服务器出错，请稍后重试！')
      }
    }
    return Promise.reject(error.response) // 返回接口返回的错误信息
  }
)

导出定义完的函数， 然后就可以单独写个js文件封装接口了。