如何在 React admin 中扩展数据提供者？

Question

我正在使用react admin。我从他们的example implementation 创建了一个DataProvider。

但是，我不得不将他们的登录表单从 username 更改为 email。这意味着现在我应该提供一个自定义的Auth Provider。

现在在我的authProvider.js 中，我想连接到 API。根据他们的建议，最好扩展 DataProvider 以与 API 进行任何通信。

由于login 不是dataProvider 中现有的任何方法，因此我需要为其添加方法。

我为通用 API 调用添加了两种方法：

const dataProvider = {
    // default methods => getList, create, ect.
    get: (url) => {
        return httpClient(`${apiUrl}/${url}`, {
            method: 'GET'
        });
    },

    post: (url, params) => {
        return httpClient(`${apiUrl}/${url}`, {
            method: 'POST',
            body: JSON.stringify(params)
        });
    }

然后在我的authProvider.js 中使用它：

const authProvider = {
    // authentication
    login: params => {
        dataProvider.post('/login', params).then(result => {
            console.log(result);
        });
    },

现在我被困在如何将它们连接在一起的问题上。当我按下登录表单上的login 按钮时收到此错误：

TypeError: Cannot read property 'then' of undefined

(anonymous function)
node_modules/ra-core/esm/auth/useLogin.js:39
  36 | var nextSearch = locationState && locationState.nextSearch;
  37 | var login = useCallback(function (params, pathName) {
  38 |     if (params === void 0) { params = {}; }
> 39 |     return authProvider.login(params).then(function (ret) {
     | ^  40 |         dispatch(resetNotification());
  41 |         var redirectUrl = pathName
  42 |             ? pathName

submit
src/Auth/LoginForm.js:67
  64 | 
  65 | const submit = values => {
  66 |     setLoading(true);
> 67 |     login(values, redirectTo)
     | ^  68 |         .then(() => {
  69 |             setLoading(false);
  70 |         })

我应该从我的自定义方法中返回什么？如何将它们连接在一起？

更新 我知道我可以将Promise 与resolve 和reject 方法一起使用。但我想尽可能多地使用react-admin 的内部管道和逻辑。例如，我不想在我的dataProvider.js 中的自定义get 和post 方法中实现HTTP 状态检查。他们的fetch.js 文件中有这个逻辑，我希望能够使用它。

Answer 1

您不必为与身份验证相关的请求使用 dataProvider。使用 fetch 或您想要的任何库（axios 或任何其他）。有关信息，我们为客户开发的 authProvider 都没有使用 dataProvider。他们有两个截然不同的工作