# 拦截器配置 | Vue Antd Admin

# # 拦截器配置

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

## # 请求拦截器

你可以为每个请求拦截器配置 `onFulfilled` 或 `onRejected` 两个钩子函数。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

## # 响应拦截器

响应拦截器也同样可以配置 `onFulfilled` 或 `onRejected` 两个钩子函数。

### # onFulfilled

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

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

### # onRejected

我们会为 onRejected 钩子函数注入 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)
      }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

## # 导出拦截器

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

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

1
2
3
4
点击查看完整的拦截器配置示例

    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] // 响应拦截
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47