axios拦截器

axios拦截器的使用

//引入请求工具axios
import axios from 'axios'
// 该插件分装了 cookies的方法
import Cookies from 'js-cookie'
// 使用element-ui，在token失效时，给用户弹框提示。
import { Message, MessageBox } from 'element-ui'

//创建axios请求全局工具类实例，判断的所有的请求接口状态 
const service = axios.create({
  baseURL: 'localhost:8080',
  timeout: 5000
})

//请求拦截：主要用于 将token附带到请求头
service.interceptors.request.use(
  config => {
    // 如果存在 token 则附带在 http header 中
      config.headers['X-Token'] = Cookies.get('key名称') //需要和后端协商一致 token前面的key
      // console.log('config',config)
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器：主要将返回的数据，先做出判断，识别当前是否请求超时等。
service.interceptors.response.use(
  response => {
    // console.log(response)
    const res = response.data   //res = {code:200,message:'成功',data:[]}
 
      if (res.code !== 200) {  //和后端协商的
       Message({
        message: res.message || 'Error',  //1.  5秒超时了 提示接口请求超时
        type: 'error',
        duration: 5 * 1000
      })
      //2. 判断 token 失效或者超时或token在异地登陆的场景
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // 如果 token 失效，则弹出确认对话框，用户点击后，清空 token 并返回登录页面
        MessageBox.confirm('您的token已失效，请重新登录', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('LogOut').then(() => {
            location.reload()//刷新当前页面
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      // console.log(res)
      return res
    }
  },
  error => {
    Message({//出错提醒
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)