KendoReact Data Grid中useODataDataSource Hook传递Bearer认证令牌的实现问题

我之前也碰到过一模一样的问题——你在transport.read里直接加headers属性不生效，是因为这个配置项并不在useODataDataSource的read选项支持列表里。下面给你两种经过验证的可行方案：

方案1：全局配置所有请求的请求头 #

如果你的所有数据请求（包括查询、删除等）都需要携带同一个Bearer令牌，直接在transport层级配置headers即可，这是官方文档明确支持的配置：

const dataSource = useODataDataSource({
    defaultSkip: 0,
    take: 10,
    transport: {
        // 全局设置所有请求的Authorization头
        headers: { 'Authorization': `Bearer ${token}` },
        read: {
            url: baseUrl + '/' + name,
        },
        delete: {
            url: (dataItem) => `${baseUrl}/${name}(${getter('ID')(dataItem)})`
        }
    },
    schema: {
        model: { id: 'ID' }
    }
});

方案2：针对单个请求动态设置请求头 #

如果只有特定请求需要加令牌，或者需要动态调整头信息，可以在对应的请求配置里使用beforeSend函数——它会在请求发送前触发，允许你直接修改XMLHttpRequest对象的请求头：

const dataSource = useODataDataSource({
    defaultSkip: 0,
    take: 10,
    transport: {
        read: {
            url: baseUrl + '/' + name,
            beforeSend: (xhr) => {
                // 给当前查询请求添加Bearer令牌
                xhr.setRequestHeader('Authorization', `Bearer ${token}`);
            }
        },
        delete: {
            url: (dataItem) => `${baseUrl}/${name}(${getter('ID')(dataItem)})`,
            // 如果删除请求也需要令牌，同样可以添加beforeSend
            beforeSend: (xhr) => {
                xhr.setRequestHeader('Authorization', `Bearer ${token}`);
            }
        }
    },
    schema: {
        model: { id: 'ID' }
    }
});

为什么你的初始代码无法运行？ #

Kendo React的useODataDataSource中，transport.read的配置项是针对OData查询的特定参数设计的，并不包含headers属性。请求头的配置要么放在transport全局层级对所有请求生效，要么通过beforeSend函数单独为每个请求设置。

内容的提问来源于stack exchange，提问作者user101289