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>

[humblecoder]

These are the only items I have defined:

  <vue-bootstrap-table class="table-full-width"
    :columns="columns"
    :values="values"
    :show-filter="true"
    :sortable="true"
    :paginated="true"
    :filter-case-sensitive="false"
    :ajax="ajax"
  >
  </vue-bootstrap-table>

The only error I'm receiving is a Javascript rendering error (but I don't think this is related to the issue):

[Violation] Forced reflow while executing JavaScript took 59ms

I see nothing else that's different. The server is still returning the appropriate data, and ajaxLoadingError will trigger if I intentionally give it a bad AUTH. However ajaxLoadedEvent never fires. Clearly I'm getting "short-circuited" somewhere along the line, but I can't really debug it atm.

[humblecoder]

So, I'm finding that if I delegate=false then AUTH never works. However if I also disable the AUTH requirement, then it works.

If delegate=true then AUTH works correctly, but never loads the data. I have no idea why this is the case.

[syshex]

Hi!

Ok, I think I have an idea of what is going on. Tomorrow I'll start working on it first thing in the morning ( GMT here ) and will have some answers and possibly a new release with this fixed. So sorry about this!

[syshex]

There was a particular case, which was : Method GET and Delegate False that would lead to axiosConfig not being used. Can you confirm that this was your case ? With Method POST axiosConfig should have worked fine with either delegate true or false.

[syshex]

Release 1.1.8 ready with this issue fixed.
Let me know how it goes

[humblecoder]

So Auth now occurs correctly in all cases, and I'm still receiving data from the server. However, the table still doesn't render on delegate=true. I suppose I don't NEED to delegate each and every request, but now it's just a challenge. 😂

[syshex]

I'm on vacation for the next 2 weeks but I'll try to give it a look tomorrow at some point.

[jelofsson]

Hi, have you made any progress on this? I'm also experiencing not getting any data on delegate=true at the moment.

[syshex]

Hi ! Got back from vacations. Will give a look at this this week.

[supplerus]

help, not date ajax http.
examples - не работает.

[syshex]

Just fixed this bit. Will release still this week