1.一般axios分为request请求拦截器和response响应拦截器两种
request请求拦截器：发送请求前统一处理，如：设置请求头headers
response响应拦截器：根据响应状态码进行下一步操作，如：登陆时token过期，接口返回401
2.axios安装及使用步骤
【1】安装axios

image.png

image.png

image.png

router.beforeEach((to, from, next) => {   登录时判断token是否存在
  if (to.matched.some((record) => record.meta.requiresAuth)) {
    if (!store.state.user.token) {   //不存在返回登录页面
      next({
        name: 'login',
        query: {
          redirect: to.fullPath
        }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

2.request请求拦截

$axios.interceptors.request.use(
  (config) => {
    const { token } = store.state.user  //获取token
    if (token) {   //判断有token(根据项目需求是否添加)
      config.headers.Authorization = 'JWT ' + token
    }

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

【4】http response响应拦截器
1.封装方法 (token不存在返回登录页)

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

2.返回状态码

$axios.interceptors.response.use(
  (response) => {
    return response
  },
  async (error) => {
    if (error.response) {
      const { status } = error.response
      if (status == 400) {
        ElMessage.error('请求参数错误')
      } else if (status == 401) {
        if (!store.state.user.token) {
          redirectLogin()   //调用方法跳到登录页
          return Promise.reject(error)
        }
        redirectLogin();
      } else if (status == 403) {
        ElMessage.error('没有权限，请联系管理员')
      } else if (status == 404) {
        ElMessage.error('请求资源不存在');
        router.push('/404')
      } else if (status >= 500) {
        ElMessage.error('服务端错误，请联系管理员')
      } else if (error.request) {
        ElMessage.error('请求超时，请刷新重试')
      } else {
        ElMessage.error(`请求失败:${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('请求参数错误')
      } else if (status == 401) {
        if (!store.state.user.token) {
          redirectLogin()
          return Promise.reject(error)
        }
        redirectLogin();
      } else if (status == 403) {
        ElMessage.error('没有权限，请联系管理员')
      } else if (status == 404) {
        ElMessage.error('请求资源不存在');
        router.push('/404')
      } else if (status >= 500) {
        ElMessage.error('服务端错误，请联系管理员')
      } else if (error.request) {
        ElMessage.error('请求超时，请刷新重试')
      } else {
        ElMessage.error(`请求失败:${error.message}`)
      }
      return Promise.reject(error)
    }
  }
)
export default $axios

ps:自己在项目中写的方法，有哪些不足的地方欢迎指点