Vue Antd Admin 项目中的 Axios 拦截器深度解析-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00197/article/details/148574760

Vue Antd Admin 项目中的 Axios 拦截器深度解析

vue-antd-admin 🐜 Ant Design Pro's implementation with Vue 项目地址: https://gitcode.com/gh_mirrors/vu/vue-antd-admin

前言

在现代前端开发中，HTTP 请求拦截是构建健壮应用的重要环节。Vue Antd Admin 作为一个优秀的中后台前端解决方案，基于 Axios 封装了一套完善的拦截器机制。本文将深入解析这套拦截器系统的设计理念、实现方式以及最佳实践。

拦截器基础概念

拦截器（Interceptor）是 Axios 提供的一种强大机制，允许我们在请求发送前和响应返回后对数据进行处理。Vue Antd Admin 将这一机制进行了二次封装，使其更加符合中后台应用的实际需求。

拦截器配置文件

Vue Antd Admin 的拦截器统一配置在 /utils/axios-interceptors.js 文件中。这种集中式管理方式使得拦截逻辑更加清晰，便于维护。

请求拦截器详解

请求拦截器允许我们在请求发送前对配置进行修改或执行某些操作。Vue Antd Admin 为每个请求拦截器提供了两个关键钩子：

onFulfilled 钩子

当请求准备发送时触发，接收两个参数：

config：Axios 请求配置对象，包含 URL、method、headers 等信息
options：应用级工具对象，包含 router、i18n、store、message 等实用工具

典型应用场景：

添加认证 Token
设置公共请求头
请求参数预处理
请求日志记录

onRejected 钩子

当请求准备阶段出错时触发，接收两个参数：

error：错误对象
options：同上

典型应用场景：

请求错误统一处理
错误日志记录
错误信息提示

示例代码分析

const tokenCheck = {
  onFulfilled(config, options) {
    const {message} = options
    const {url, xsrfCookieName} = config
    if (url.indexOf('login') === -1 && xsrfCookieName && !Cookie.get(xsrfCookieName)) {
      message.warning('认证 token 已过期，请重新登录')
    }
    return config
  },
  onRejected(error, options) {
    const {message} = options
    message.error(error.message)
    return Promise.reject(error)
  }
}

这段代码实现了一个典型的 Token 检查拦截器：

检查非登录请求是否携带有效 Token
若无有效 Token 则提示用户
统一处理请求准备阶段的错误

响应拦截器详解

响应拦截器允许我们在收到响应后对数据进行处理。同样提供了两个关键钩子：

onFulfilled 钩子

当响应成功返回时触发，接收两个参数：

response：Axios 响应对象，包含 status、data、headers 等信息
options：应用级工具对象

典型应用场景：

响应数据格式化
业务状态码统一处理
成功提示信息

onRejected 钩子

当响应出错时触发，接收两个参数：

error：错误对象
options：同上

典型应用场景：

HTTP 状态码统一处理
错误信息提示
错误页面跳转

示例代码分析

const resp401 = {
  onFulfilled(response, options) {
    const {message} = options
    if (response.status === 401) {
      message.error('无此接口权限')
    }
    return response
  },
  onRejected(error, options) {
    const {message} = options
    if (error.response.status === 401) {
      message.error('无此接口权限')
    }
    return Promise.reject(error)
  }
}

这段代码实现了 401 状态码的统一处理：

在正常响应和错误响应中都检查 401 状态
统一显示无权限提示
保证错误能够继续传递

拦截器注册与执行顺序

拦截器通过导出对象进行注册：

export default {
  request: [reqCommon], // 请求拦截器数组
  response: [resp401, resp403] // 响应拦截器数组
}

执行顺序特点：

请求拦截器按数组顺序执行
响应拦截器按数组逆序执行
支持多个拦截器链式处理

实战建议

认证处理：建议在第一个请求拦截器中处理认证逻辑
错误处理：建议在最后一个响应拦截器中统一处理错误
性能监控：可添加拦截器记录请求耗时
数据脱敏：可在响应拦截器中对敏感数据进行处理
缓存策略：可在请求拦截器中实现缓存逻辑

完整配置示例

import Cookie from 'js-cookie'

// 401拦截
const resp401 = {
  onFulfilled(response, options) {
    const {message, router} = options
    if (response.status === 401) {
      message.error('认证已过期，请重新登录')
      router.push('/login')
    }
    return response
  },
  onRejected(error, options) {
    // 处理网络错误等情况
    return Promise.reject(error)
  }
}

// 403拦截
const resp403 = {
  onFulfilled(response, options) {
    const {message} = options
    if (response.status === 403) {
      message.error('权限不足，请联系管理员')
    }
    return response
  }
}

// 公共请求处理
const reqCommon = {
  onFulfilled(config, options) {
    // 添加认证Token
    const token = Cookie.get('token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  }
}

// 响应数据处理
const respData = {
  onFulfilled(response, options) {
    // 统一处理业务数据
    if (response.data && response.data.code !== 0) {
      options.message.error(response.data.message)
      return Promise.reject(response.data)
    }
    return response.data
  }
}

export default {
  request: [reqCommon],
  response: [respData, resp401, resp403]
}