vue+antd 后台管理框架
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

4.1 KiB

title lang
拦截器配置 zn-CN

拦截器配置

Vue Antd Admin 基于 aixos 封装了 http 通信功能,我们可以为 http 请求响应配置一些拦截器。拦截器统一配置在 /utils/axios-interceptors.js 文件中。

请求拦截器

你可以为每个请求拦截器配置 onFulfilledonRejected 两个钩子函数。

onFulfilled

我们会为 onFulfilled 钩子函数注入 config 和 options 两个参数:

  • config: AxiosRequestConfig: axios 请求配置,详情参考 axios 请求配置
  • options: Object: 应用配置,包含: {router, i18n, store, message},可根据需要扩展。

onRejected

我们会为 onFulfilled 钩子函数注入 error 和 options 两个参数:

  • error: Error: axios 请求错误对象
  • options: Object: 应用配置,包含: {router, i18n, store, message},可根据需要扩展。

如下,为一个完整的请求拦截器配置:

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)
  }
}

响应拦截器

响应拦截器也同样可以配置 onFulfilledonRejected 两个钩子函数。

onFulfilled

我们会为 onFulfilled 钩子函数注入 response 和 options 两个参数:

  • response: AxiosResponse: axios 响应对象,详情参考 axios 响应对象
  • options: Object: 应用配置,包含: {router, i18n, store, message},可根据需要扩展。

onRejected

我们会为 onFulfilled 钩子函数注入 error 和 options 两个参数:

  • error: Error: axios 请求错误对象
  • options: Object: 应用配置,包含: {router, i18n, store, message},可根据需要扩展。

如下,为一个完整的响应拦截器配置:

const resp401 = {
  // 响应数据之前做点什么
  onFulfilled(response, options) {
    const {message} = options
    if (response.status === 401) {
      message.error('无此接口权限')
    }
    return response
  },
  // 响应出错时做点什么
  onRejected(error, options) {
    const {message} = options
    if (response.status === 401) {
      message.error('无此接口权限')
    }
    return Promise.reject(error)
  }
}

导出拦截器

定义好拦截器后,只需在 axios-interceptors.js 文件中导出即可。分为两类,请求拦截器响应拦截器。如下:

export default {
  request: [tokenCheck], // 请求拦截
  response: [resp401] // 响应拦截
}

:::details 点击查看完整的拦截器配置示例

import Cookie from 'js-cookie'
// 401拦截
const resp401 = {
  onFulfilled(response, options) {
    const {message} = options
    if (response.status === 401) {
      message.error('无此接口权限')
    }
    return response
  },
  onRejected(error, options) {
    const {message} = options
    message.error(error.message)
    return Promise.reject(error)
  }
}

const resp403 = {
  onFulfilled(response, options) {
    const {message} = options
    if (response.status === 403) {
      message.error(`请求被拒绝`)
    }
    return response
  }
}

const reqCommon = {
  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)
  }
}

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

:::