vue-cli中axios拦截器配置

axios拦截器配置

import axios from 'axios'
import store from '@/store'
import { getToken } from '@/utils/auth'
import { Message } from 'element-ui'

/**
 * create an axios instance
 * @author xuxm
 * @description axios instance
 */
const http = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 6000 // request timeout
})

/**
 * request interceptor
 *
 * @author xuxm
 * @description request interceptor
 */
http.interceptors.request.use(
  config => {
    // Do something before request is sent
    if (store.getters.token) {
      config.headers['Authorization'] = `Bearer ${getToken()}` // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
    }
    return config
  },
  error => {
    // Do something with request error
    Message.error('对不起，出错了')
    console.log(error) // for debug
    Promise.reject(error)
  }
)

/**
 * respone interceptor
 *
 * @author xuxm
 * @description respone interceptor
 */
http.interceptors.response.use(
  response => {
    // debugger
    const res = response.data
    const errCode = res.code
    if (errCode !== undefined) {
      // debugger
      // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
      if (errCode === 50008 || errCode === 50012 || errCode === 50014) {
        Message({
          message: '你已被登出，请重新登录',
          type: 'error',
          duration: 5 * 1000
        })
        store.dispatch('FedLogOutActionHandle').then(() => {
          location.reload() // 为了重新实例化vue-router对象 避免bug
        })
        return Promise.reject(new Error('token expired'))
      } else if (errCode !== 200) {
        Message({
          message: res.message,
          type: 'error',
          duration: 5 * 1000
        })
      }
      return response
    } else {
      return response
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)
/**
 * 请求函数
 *
 * @param {请求地址} url
 * @param {请求方式} method
 * @param {请求参数} data
 * @returns
 */
export const createAPI = (url, method, data) => {
  let config = {}
  if (method === 'get') {
    config.params = data
  } else {
    config.data = data
  }
  return http({ url, method, ...config })
}

mockjs使用

import Mock from 'mockjs'
import LoginAPI from '@/mock/login'

Mock.setup({
  // timeout: '1000'
})
// 模拟响应/frame/login请求
Mock.mock(/\/frame\/login/, 'post', LoginAPI.login)