Блог

Я использую react admin. И я создал DataProvider из их примера реализацию.

Однако мне пришлось изменить их форму входа с username на email . Это означает, что теперь я должен предоставить пользовательский поставщик аутентификации.

Теперь в моем 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 amp;amp; 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 внутренний конвейер и логику как можно больше. Например, я не хочу реализовывать проверку состояния HTTP в своих пользовательских get и post методах в своих dataProvider.js . У них есть эта логика в их fetch.js файле, и я хочу иметь возможность ее использовать.

Вам не нужно использовать поставщик данных для запросов, связанных с проверкой подлинности. Используйте fetch или любые библиотеки, которые вы хотите (axios или любые другие). Для информации, ни один из AuthProvider, который мы разрабатываем для клиентов, не использовал dataProvider. У них две совершенно разные работы