1.引入axios

npm install axios -S

2.建立攔截器

import Vue from 'vue'
import axios from 'axios'  //引入axios
import router from '@/router'  //引入router
import { Toast } from 'mint-ui';//引入ui提示組件，這個隨意



//創建一個axios實例
let instance = axios.create({
    headers: {
        'content-type': 'application/x-www-form-urlencoded'
    }
})

//返回token，拿到token這里的獲取邏輯按你們自己的項目來
function returnBearer(){
    let user = JSON.parse(localStorage.getItem('user'))
    let bearer = user.token_type + ' ' + user.access_token
    return bearer
}

// http request 攔截器
instance.interceptors.request.use(
    config => {
        if (localStorage.getItem('user')) { // 判斷是否存在token，如果存在的話，則每個http header都加上token
            config.headers.authorization = returnBearer()  //請求頭加上token
        }
        return config
    },
    err => {
        return Promise.reject(err)
    }
)

// http response 攔截器
instance.interceptors.response.use(
    response => {
        if(response){
            if(response.data.code == 401){//這里的邏輯自行修改
                router.replace({
                    path: '/',
                    query:{
                        type: "loginOut"
                    }
                })
            }else if(response.data.code == 400){
                Toast(response.data.msg)
            }else if(response.data.code == 422){
                Toast(response.data.msg)
            }else if(response.data.code == 500){
                Toast(response.data.msg)
            }
            
        }
      return response
    },
    //接口錯誤狀態處理，也就是說無響應時的處理
    error => {
        console.log(1)
        if (error.response) {
            if(error.response.status== 401){//這里的邏輯自行修改
                router.replace({
                    path: '/',
                    query:{
                        type: "loginOut"
                    }
                })
            }else if(error.response.status == 422){
                Toast(response.data.msg)
            }else{
                Toast(response.data.msg)
            }
        }
      return Promise.reject(error.response) // 返回接口返回的錯誤信息
    }
)

export default instance//拋出實例，便于全局引用

3.在mian.js全局引用

import instance from '@/api/axios'//攔截器
Vue.prototype.$instance = instance