Kendo-UI 在传输中包含不记名令牌

Question

I am using Kendo-UI to display data in a ListView. In the configuration, I have the DataSource setup like this:

dataSource: {
    transport: {
        read: {
            contentType: 'application/json',
            dataType: 'json',
            type: 'GET',
            url: '/server/api/user/query.php/'
        }
    },
    pageSize: 20,
    schema: {
        data: 'records',
        id: 'UserId',
        model: {
            UserId: { editable: false, nullable: true },
            FirstName: { validation: { required: true } },
            LastName: { validation: { required: true } },
            Email: { validation: { required: true } },
            CreatedOn: { editable: false, type: 'date' },
            CreatedBy: { editable: false, type: 'number' },
            CreatedByFullName: { editable: false },
            ModifiedOn: { editable: false, type: 'date' },
            ModifiedBy: { editable: false, type: 'number' },
            ModifiedByFullName: { editable: false },
            DeletedOn: { editable: false, type: 'date' }
        },
        total: 'total'
    }
}

However, I need to specify the AJAX request's headers, specifically I need to set the bearer token in the authorization header using the following:

headers: {
    'Authorization': `Bearer ${utility.getJsonWebToken()}`
}

Looking at the documentation for the DataSource's Transport property ( here ), I don't see where I can specify any of the headers.

Answer 1

A couple of other solutions, which don't need an $.ajax call since:

The data source uses jQuery.ajax to make an HTTP request to the remote service. The value configured via transport.read is passed to jQuery.ajax. This means that you can set all options supported by jQuery.ajax via transport.read except the success and error callback functions which are used by the transport.

You can do something like:

transport: {
    read: {
        contentType: 'application/json',
        dataType: 'json',
        type: 'GET',
        url: '/server/api/user/query.php/',
        headers: {
            'Authorization': 'Bearer ' + utility.getJsonWebToken()
        },
    }
},

or

transport: {
    read: {
        contentType: 'application/json',
        dataType: 'json',
        type: 'GET',
        url: '/server/api/user/query.php/',
        beforeSend: beforeSend,
    }
},
...
function beforeSend(xhr) {
    xhr.setRequestHeader('Authorization', 'Bearer ' + utility.getJsonWebtoken());
}

Answer 2

The solution was to make the transport.read configuration a function:

transport: {
    read: function(options) {
        var queryString = new URLSearchParams(options.data);
        $.ajax({
            url: '/server/api/user/query.php/',
            method: 'GET',
            contentType: 'application/json',
            headers: {
                'Authorization': 'Bearer ' + utility.getJsonWebToken()
            },
            data: queryString.toString(),
            dataType: 'json'
        }).done(function(result) {
            options.success(result);
        }).fail(function(result) {
            options.error(result);
        });
    }
}