如何在vue-tables-2组件请求中添加附加授权参数
How to add additive Authorization parameter in vue-tables-2 component request
在我的@vue/cli 4.0.5 应用程序中实施
vue-tables-2 组件与 server-table
看看这个 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"
谢谢!
我设法 运行 请求为:
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) => {
!
在我的@vue/cli 4.0.5 应用程序中实施 vue-tables-2 组件与 server-table 看看这个 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"
谢谢!
我设法 运行 请求为:
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) => {
!