1.一般axios分為request請(qǐng)求攔截器和response響應(yīng)攔截器兩種
request請(qǐng)求攔截器：發(fā)送請(qǐng)求前統(tǒng)一處理，如：設(shè)置請(qǐng)求頭headers
response響應(yīng)攔截器：根據(jù)響應(yīng)狀態(tài)碼進(jìn)行下一步操作，如：登陸時(shí)token過(guò)期，接口返回401
2.axios安裝及使用步驟
【1】安裝axios

image.png

image.png

image.png

router.beforeEach((to, from, next) => {   登錄時(shí)判斷token是否存在
  if (to.matched.some((record) => record.meta.requiresAuth)) {
    if (!store.state.user.token) {   //不存在返回登錄頁(yè)面
      next({
        name: 'login',
        query: {
          redirect: to.fullPath
        }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

2.request請(qǐng)求攔截

$axios.interceptors.request.use(
  (config) => {
    const { token } = store.state.user  //獲取token
    if (token) {   //判斷有token(根據(jù)項(xiàng)目需求是否添加)
      config.headers.Authorization = 'JWT ' + token
    }

    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

【4】http response響應(yīng)攔截器
1.封裝方法 (token不存在返回登錄頁(yè))

function redirectLogin() {
  router.push({
    name: 'login',
    query: {
      redirect: router.currentRoute.fullPath
    }
  })
}

2.返回狀態(tài)碼

$axios.interceptors.response.use(
  (response) => {
    return response
  },
  async (error) => {
    if (error.response) {
      const { status } = error.response
      if (status == 400) {
        ElMessage.error('請(qǐng)求參數(shù)錯(cuò)誤')
      } else if (status == 401) {
        if (!store.state.user.token) {
          redirectLogin()   //調(diào)用方法跳到登錄頁(yè)
          return Promise.reject(error)
        }
        redirectLogin();
      } else if (status == 403) {
        ElMessage.error('沒(méi)有權(quán)限，請(qǐng)聯(lián)系管理員')
      } else if (status == 404) {
        ElMessage.error('請(qǐng)求資源不存在');
        router.push('/404')
      } else if (status >= 500) {
        ElMessage.error('服務(wù)端錯(cuò)誤，請(qǐng)聯(lián)系管理員')
      } else if (error.request) {
        ElMessage.error('請(qǐng)求超時(shí)，請(qǐng)刷新重試')
      } else {
        ElMessage.error(`請(qǐng)求失敗:${error.message}`)
      }
      return Promise.reject(error)
    }
  }
)

3.整體代碼如下

import Axios from 'axios'
import { ElMessage } from 'element-plus'
import store from '@/store'
import router from '@/router'
import { routeLocationKey } from 'vue-router'
const baseURL = 'http://192.168.1.219:8000';
const timeout = 2000;
const $axios = Axios.create({
  baseURL,
  timeout
})
function redirectLogin() {
  router.push({
    name: 'login',
    query: {
      redirect: router.currentRoute.fullPath
    }
  })
}
$axios.interceptors.request.use(
  (config) => {
    const { token } = store.state.user
    if (token) {
      config.headers.Authorization = 'JWT ' + token
    }
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)
let isRfreshing = false
let requests = []
$axios.interceptors.response.use(
  (response) => {
    return response
  },
  async (error) => {
    if (error.response) {
      const { status } = error.response
      if (status == 400) {
        ElMessage.error('請(qǐng)求參數(shù)錯(cuò)誤')
      } else if (status == 401) {
        if (!store.state.user.token) {
          redirectLogin()
          return Promise.reject(error)
        }
        redirectLogin();
      } else if (status == 403) {
        ElMessage.error('沒(méi)有權(quán)限，請(qǐng)聯(lián)系管理員')
      } else if (status == 404) {
        ElMessage.error('請(qǐng)求資源不存在');
        router.push('/404')
      } else if (status >= 500) {
        ElMessage.error('服務(wù)端錯(cuò)誤，請(qǐng)聯(lián)系管理員')
      } else if (error.request) {
        ElMessage.error('請(qǐng)求超時(shí)，請(qǐng)刷新重試')
      } else {
        ElMessage.error(`請(qǐng)求失敗:${error.message}`)
      }
      return Promise.reject(error)
    }
  }
)
export default $axios

ps:自己在項(xiàng)目中寫(xiě)的方法，有哪些不足的地方歡迎指點(diǎn)