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

【问题标题】：Kendo-UI Include Bearer Token in TransportKendo-UI 在传输中包含不记名令牌
【发布时间】：2021-02-07 17:54:24
【问题描述】：

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

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 请求的标头，特别是我需要使用以下方法在授权标头中设置不记名令牌：

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

查看 DataSource 的 Transport 属性 (here) 的文档，我看不到在哪里可以指定任何标头。

【问题讨论】：

标签： jquery kendo-ui

【解决方案1】：

其他几个不需要$.ajax 调用的解决方案，因为：

数据源使用 jQuery.ajax 向远程服务发出 HTTP 请求。通过 transport.read 配置的值被传递给 jQuery.ajax。这意味着您可以通过 transport.read 设置 jQuery.ajax 支持的所有选项，除了传输使用的成功和错误回调函数。

你可以这样做：

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

【讨论】：

这比我实施的解决方案要好得多，谢谢。

【解决方案2】：

解决方案是使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);
        });
    }
}

【讨论】：