如何在 react-admin 中动态添加请求标头？答案

【问题标题】：How to a add dynamically headers the request in react-admin?如何在 react-admin 中动态添加请求标头？
【发布时间】：2021-08-17 16:05:46
【问题描述】：

我正在使用react-admin，我的数据提供者是simpleRestProvider。我需要根据用户行为动态添加请求头。

有可能吗？

谢谢:)

【问题讨论】：

标签： typescript react-admin

【解决方案1】：

是的，这是可能的。插入react-admin 管道的一个非常方便的地方是传递给dataProvider 的httpClient。 Also shown in the docs

    import { fetchUtils, Admin, Resource } from 'react-admin';
    import simpleRestProvider from 'ra-data-simple-rest';

    const httpClient = (url, options = {}) => {
        if (!options.headers) {
            options.headers = new Headers({ Accept: 'application/json' });
        }
        const { token } = JSON.parse(localStorage.getItem('auth'));
        options.headers.set('Authorization', `Bearer ${token}`);
        return fetchUtils.fetchJson(url, options);
    };
    const dataProvider = simpleRestProvider('http://localhost:3000', httpClient);

编辑：如果您想在每个 dataProvider 调用上动态传递标头，我想您将不得不修改 a dataProvider 目前ra-data-simple-rest package 没有通过接收options 参数将其传递给httpClient，而是在内部创建它。您不必从头开始构建它 - 只需 fork 存储库并创建一个增强版本。

【讨论】：

谢谢！是的，我看到了。但这是一个艰难的变化，它会发生一次，并且对于所有请求都是一样的。我需要更动态地添加headres。在组件内部。
我明白你的意思——我还没有想出用当前的 dataProvider 实现的方法。如果您想让它以这种方式有效地工作而不是一直重新创建 dataProvider，您将需要 dataProvider 的修改版本 - 查看上面的编辑。
谢谢！似乎是这样。我会检查它