如何在 vue-tables-2 组件请求中添加附加授权参数答案

【问题标题】：How to add additive Authorization parameter in vue-tables-2 component request如何在 vue-tables-2 组件请求中添加附加授权参数
【发布时间】：2020-07-17 04:57:09
【问题描述】：

在我的@vue/cli 4.0.5 应用中实现带有服务器表的 vue-tables-2 组件看着这个https://matanya.gitbook.io/vue-tables-2/server-table/custom-request-function

我尝试将附加授权参数设置为请求：

<div id="activity_logs_data_table">
    <v-server-table url="/adminarea/activity-logs-filter" :columns="columns" :options="tableOptions">
        <span slot="edit" slot-scope="{row}">
            <a v-on:click="viewActivityLog(row)" :class="'p-1 a_view_item_'+row.id">
                <i :class="'i_link '+getHeaderIcon('view')" title="View activity log item"></i>
            </a>
            <a v-on:click="removeActivityLog(row.id, row.log_name)" :class="'p-1 a_delete_item_'+row.id">
              <i :class="'i_link '+getHeaderIcon('remove')" title="Remove activity log item"></i>
            </a>
        </span>

        <span slot="created_at" slot-scope="{row}">
            {{ momentDatetime(row.created_at, jsMomentDatetimeFormat) }}
        </span>
    </v-server-table>
</div>



data() {
    return {
        activityLogs: [],

        el: "#activity_logs_data_table",
        columns: ['id', 'log_name', 'causer_id', 'causer_type', 'created_at', 'edit'],

        tableOptions: {
            requestFunction: (data) => {
                console.log('requestFunction data::')
                console.log(data)

                this.is_page_loaded = false
                this.credentialsConfig.headers.Authorization = 'Bearer ' + this.currentLoggedUserToken;
                console.log('requestFunction this.credentialsConfig::')
                console.log(this.credentialsConfig)

                return axios.get(this.url, {
                    params: data
                }, this.credentialsConfig ).catch(function (error) {
                    console.log('requestFunction error::')
                    console.error(error)
                    // this.dispatch('error', error );
                });

            } // requestFunction: (data) => {

但我在控制台中看到错误：

TypeError: Cannot read property 'indexOf' of undefined
    at buildURL (buildURL.js?30b5:62)
    at dispatchXhrRequest (xhr.js?b50d:30)
    at new Promise (<anonymous>)
    at xhrAdapter (xhr.js?b50d:12)
    at dispatchRequest (dispatchRequest.js?5270:52)

和带有调试功能的控制台打印屏幕：https://prnt.sc/rtak15 我看到查询参数为空...可能是问题吗？ axios.get 中的参数是否无效？

"axios": "^0.19.0",
"vue": "^2.6.10",
"vue-tables-2": "^2.0.14"

谢谢！

【问题讨论】：

标签： authorization vue-tables-2

【解决方案1】：

我设法将请求运行为：

requestFunction(data) {
    let credentialsConfig= JSON.parse(JSON.stringify(settingCredentialsConfig))
    credentialsConfig.headers.Authorization = 'Bearer ' + this.$parent.$parent.currentLoggedUserToken

    return axios.get(this.url, {
        params: data
    }, credentialsConfig ).catch(function (error) {
        console.error(error)
    })

} // requestFunction: (data) => {

！

【讨论】：