Ajax request authentication

[humblecoder]

Need the ability to send custom headers for the axios instance used by the table. Correct me if I'm wrong, but as it stands, the current implementation assumes no authentication is required to retrieve search results.

[syshex]

You are correct. I'll try to work on this still today.

[syshex]

Are you available to do some tests on a RC ?

[syshex]

If so, the release candidate is in the DIST folder, all files that end with -RC.

The ajax configuration should now be as follows:

`

        /**
         * If loading of table is to be done through ajax, then this object must be set
         */
        ajax: {
            type: Object,
            required: false,
            default: function () {
                return {
                    enabled: false,
                    url: "",
                    method: "GET",
                    delegate: false,
                    axiosConfig: {}
                }
            }

`

where axiosConfig is where all axios options should go.

Let me know if you give it a try.
After friday I wont be able to work on this for 2 weeks.

[humblecoder]

Thanks. So, I'm having 2 issues currently:

1. When "delegate" is set to "true, I constantly receive Error in nextTick: "ReferenceError: axiosConfig is not defined"

2. None of the "axiosConfig" settings I'm creating seem to have any effect. I need to set the default headers to Authorization: Bearer [access_token]. The axios documentation lacks specific information with regard to setting "default.header.common" via "config". I'll take a look at your code and see how you're parsing, but it might be better in the short term to look for a specific key and explicitly place the "default.header.common" information.

[syshex]

Sorry, my bad ! Was referencing the config object wrongly.

Could you please give it a go again ?

I'm really sorry for this, but I've got no way of performing these tests right now.

[humblecoder]

Haha, no worries. Appreciate your contributions.

So, I'm still getting the same errors. Here is my latest attempt at 'config' variables. Let me know what looks off to you:

ajax: {
enabled: true,
url: "api/search",
method: "GET",
delegate: true,
axiosConfig:{
headers: {'Authorization': 'Bearer ' + this.$auth.getAccessTokenString()}
}
}

[syshex]

I've actually got it working with the new RC , using your example :

ajax: {
        enabled: true,
        url: "http://localhost:9430/data/test",
        method: "POST",
        delegate: true,
        axiosConfig:{
        headers: {'Authorization': 'Bearer TESTTESTTESTTESTTEST'}
        }
    },

And then, on my test WS I've received the following headers:

  HEADER user-agent VALUE: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.110 Safari/537.36 
  HEADER authorization VALUE: Bearer TESTTESTTESTTESTTEST 
  HEADER content-type VALUE: application/x-www-form-urlencoded 

On this one I'm using GET:

    ajax: {
        enabled: true,
        url: "http://localhost:9430/data/test",
        method: "GET",
        delegate: true,
        axiosConfig:{
        headers: {'Authorization': 'Bearer TESTTESTTESTTESTTEST'}
        }
    },

And the response was :

HEADER user-agent VALUE: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.110 Safari/537.36 
HEADER authorization VALUE: Bearer TESTTESTTESTTESTTEST 
HEADER referer VALUE: http://localhost:8080/ 

I can bake a proper release , just in case there is any problem with the RC files, for you to test out. It wouldn't be a problem.

Let me know!

[syshex]

In fact I've just updated both this lib and the vue1 version of this lib with this new update and made a release.

Version 1.1.7 works as described in my last comment.

Please do let me know if you find problems with it. If all is good lets close this ticket

[humblecoder]

So, made progress. Authorization is now successful, and per DEV TOOLS, data is being returned from the server in the required format:

{
echo: INTEGER,
filtered: INTEGER,
data: [OBJECT],
}

However, it doesn't seem to trigger 'ajaxLoadedEvent'. Thoughts?

[syshex]

So, a call is being made, values returned and then the data is not being loaded on the table?

Can you provide a small example of your tables complete configuration ? (Including column configurations, etc)

If you can provide an example return from the server aswell, I can make my test WS return that exact data and try to reproduce the problem over here.

[humblecoder]

Correct. This is the trimmed response data being returned from the server:

{
"echo":"5",
"filtered":25,
"data":[{"id":"090D9301EB4D496EB18E3616","name":"Casper Cliff","description":"Id est rem aliquam animi libero minima. Praesentium ad cum autem quo voluptatum autem ea. Non rerum aliquam atque minima et. Omnis maiores debitis odio consequatur officiis.","created_by":3,"street_address":"90947 Schaefer Ramp","city":"Lake Jammiemouth","state_province":"Alaska","postal_code":"35070","status":"open"},{"id":"0D7D9DB64C7946E0B3FBDDFC","name":"Alfredo Shore","description":"Beatae deserunt aut voluptas modi repudiandae sit animi. Minima sit quam eligendi non aliquid et excepturi. Fugit reiciendis illo illum eum quidem minus.","created_by":4,"street_address":"1943 Ericka Shoal Suite 196","city":"Johnathanshire","state_province":"Georgia","postal_code":"87106","status":"open"},

. . . . . .REMAINDER OF TRIMMED DATA . . . .

]}

My column config is as such:

columns: [ { title: 'Id', name: 'id' }, { title: 'Name', name: 'name' }, { title: 'Description', name: 'description' }, { title: 'Street Address', name: 'street_address' }, { title: 'City', name: 'city' }, { title: 'State', name: 'state_province' }, { title: 'Postal Code', name: 'postal_code' } ], values: []

I am returning more columns than I use. Is that a problem? Otherwise, I'm using appropriate table field names, etc.

[syshex]

Nop, returning more than you are using should be alright.
Giving it a quick test over here, as I've got a few minutes to spare

[syshex]

I just gave it a test drive and it worked without a problem.

My configuration is as follows :

    ajax: {
        enabled: true,
        url: "http://localhost:9430/data/test",
        method: "POST",
        delegate: true,
        axiosConfig:{
            headers: {
                'Authorization': 'Bearer TESTTESTTESTTESTTEST'
            }
        }
    },
    columns: [
        {
          title: 'Id',
          name: 'id'
        },
        {
          title: 'Name',
          name: 'name'
        },
        {
          title: 'Description',
          name: 'description'
        },
        {
          title: 'Street Address',
          name: 'street_address'
        },
        {
          title: 'City',
          name: 'city'
        },
        {
          title: 'State',
          name: 'state_province'
        },
        {
          title: 'Postal Code',
          name: 'postal_code'
        }
      ],
    values: []

The return I'm making is :

{
  "echo": 1,
  "filtered": 2,
  "data": [
    {
      "id": "090D9301EB4D496EB18E3616",
      "name": "Casper Cliff",
      "description": "Id est rem aliquam animi libero minima. Praesentium ad cum autem quo voluptatum autem ea. Non rerum aliquam atque minima et. Omnis maiores debitis odio consequatur officiis.",
      "created_by": 3,
      "street_address": "90947 Schaefer Ramp",
      "city": "Lake Jammiemouth",
      "state_province": "Alaska",
      "postal_code": "35070",
      "status": "open"
    },
    {
      "id": "0D7D9DB64C7946E0B3FBDDFC",
      "name": "Alfredo Shore",
      "description": "Beatae deserunt aut voluptas modi repudiandae sit animi. Minima sit quam eligendi non aliquid et excepturi. Fugit reiciendis illo illum eum quidem minus.",
      "created_by": 4,
      "street_address": "1943 Ericka Shoal Suite 196",
      "city": "Johnathanshire",
      "state_province": "Georgia",
      "postal_code": "87106",
      "status": "open"
    }
  ]
}

The result is :

I tried it with both GET and POST methods.

On the javascript console do you see any errors ? Is there any more info you can provide me with so I can give you a hand? Are all of these settings defined ?

        <vue-bootstrap-table
                :columns="columns"
                :values="values"
                :show-filter="showFilter"
                :show-column-picker="showPicker"
                :paginated="paginated"
                :multi-column-sortable="multiColumnSortable"
                :ajax="ajax"
                :row-click-handler=handleRowFunction
                :filter-case-sensitive=false
        >
        </vue-bootstrap-table>