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

Question

我正在使用 Kendo-UI 在 ListView 中显示数据。在配置中，我有这样的数据源设置：

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'
    }
}

但是，我需要指定 AJAX 请求的 header，具体来说，我需要使用以下内容在授权 header 中设置不记名令牌：

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

查看数据源传输属性 (here) 的文档，我看不出在哪里可以指定任何 header。

Answer 1

解决方案是使 transport.read 配置成为一个函数：

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);
        });
    }
}

Answer 2

一些其他解决方案，不需要 $.ajax 调用，因为：

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.

您可以这样做：

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

或

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());
}

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

Kendo-UI Include Bearer Token in Transport

jquery

kendo-ui