如何在Vuetable的api-mode模式下传递请求头（如授权令牌）

问题场景 #

需要在Vuetable的api-mode模式下，给自动发起的GET请求添加授权令牌这类请求头，同时希望保留api-mode内置的分页、排序等功能，不想切换到data-mode。

当前使用的Vuetable组件代码：

<vuetable
            ref="vuetable"
            :api-url="apiBase"
            :query-params="makeQueryParams"
            :per-page="perPage"
            pagination-path
            :reactive-api-url="true"
            :fields="fields"
            :row-class="onRowClass"
            @vuetable:pagination-data="onPaginationData"
            @vuetable:cell-rightclicked="rightClicked"
          >

预期的请求头格式（axios示例）：

const response = await axios.get(this.apiBase, {
      headers: { Authorization: `Bearer ${$cookies.get('token')}`}
    })

解决方案 #

Vuetable在api-mode下默认使用axios作为HTTP客户端，因此可以通过以下两种方式添加请求头，同时保留内置功能：

方法一：全局配置axios请求拦截器 #

在项目入口文件（如main.js）中添加拦截器，让所有axios请求自动带上授权头：

import axios from 'axios'

axios.interceptors.request.use(config => {
  const token = $cookies.get('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, error => {
  return Promise.reject(error)
})

配置完成后，Vuetable在api-mode下发起的所有请求都会自动包含Authorization头，无需修改组件代码。

方法二：给Vuetable传入自定义axios实例 #

如果只需要给当前Vuetable实例添加请求头，可以创建一个带预设请求头的axios实例，通过http-client属性传入：

1. 创建自定义axios实例：

import axios from 'axios'

// 在组件内部或工具文件中创建
const authAxios = axios.create({
  headers: {
    Authorization: `Bearer ${$cookies.get('token')}`
  }
})

2. 修改Vuetable组件，添加:http-client="authAxios"属性：

<vuetable
            ref="vuetable"
            :api-url="apiBase"
            :query-params="makeQueryParams"
            :per-page="perPage"
            pagination-path
            :reactive-api-url="true"
            :fields="fields"
            :row-class="onRowClass"
            :http-client="authAxios"
            @vuetable:pagination-data="onPaginationData"
            @vuetable:cell-rightclicked="rightClicked"
          >

官方文档相关说明（翻译） #

api-mode 属性
类型：布尔值，默认值：true
当此属性设为true时，Vuetable进入API模式，会自动通过配置的api-url发起HTTP请求获取数据，并内置处理分页、排序、筛选等逻辑。此时Vuetable默认使用axios作为HTTP客户端，若需自定义请求行为，可通过http-client属性传入自定义的axios实例。

内容的提问来源于stack exchange，提问作者HNG