时间戳

首页 > 解决方案 > Kendo-UI 在传输中包含不记名令牌

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

问题描述

我正在使用 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 属性的文档（此处），我看不到在哪里可以指定任何标头。

标签： jquerykendo-ui

解决方案

其他几个解决方案，因为不需要$.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());
}

推荐阅读