authProvider вызывает «AUTH_ERROR» только с ответами 2XX

Question

У меня большие проблемы при отладке реакции-администратора ...

У меня есть веб-сервер node.js, действующий как API, который возвращает только ответы 2XX, но ему удается вызвать «AUTH_ERROR» внутри моего authProvider, и я получаю Warning: Missing translation for key: "Cannot read property 'hasOwnProperty' of undefined" внутри консоли.

Это моя сеть, когда я запускаю эту проблему:

поскольку вы не видите кодов 4XX / 5XX, только 2XX, токен удаляется из localStorage, в результате чего провайдер возвращается к входу в систему, но не должен, поскольку я получил только ответы 2XX.

Это мой код для провайдера аутентификации (это пример документации iirc)

// in src/authProvider.js
import { AUTH_LOGIN, AUTH_LOGOUT, AUTH_ERROR, AUTH_GET_PERMISSIONS, AUTH_CHECK } from 'react-admin';
import decodeJwt from 'jwt-decode';

export default (type, params) => {
    if (type === AUTH_LOGIN) {
        const { username, password } = params;
        const request = new Request('http://localhost:1337/api/v1/auth/login', {
            method: 'POST',
            body: JSON.stringify({ username, password }),
            headers: new Headers({ 'Content-Type': 'application/json' }),
        })
        return fetch(request)
            .then(response => {
                if (response.status < 200 || response.status >= 300) {
                    throw new Error(response.statusText);
                }
                return response.json();
            })
            .then(({ token }) => {
                const decodedToken = decodeJwt(token);
                localStorage.setItem('token', token);
                localStorage.setItem('role', decodedToken.role);
            });
    }
    if (type === AUTH_LOGOUT) {
        localStorage.removeItem('token');
        localStorage.removeItem('role');
        return Promise.resolve();
    }
    if (type === AUTH_ERROR) {
        console.log("AUTH ERROR");
    }
    if (type === AUTH_CHECK) {
        return localStorage.getItem('token') ? Promise.resolve() : Promise.reject();
    }
    if (type === AUTH_GET_PERMISSIONS) {
        const role = localStorage.getItem('role');
        return role ? Promise.resolve(role) : Promise.reject();
    }
    return Promise.reject('Unknown method');
};

Это форма «РЕДАКТИРОВАТЬ», которая вызывает эту проблему, все другие объекты / операции CRUD работают ...

import React from "react";
import { List, Datagrid, TextField, ReferenceField, NumberField, Create, SimpleForm, TextInput, NumberInput, ReferenceInput, SelectInput, Edit, EditButton, DeleteButton, DisabledInput } from "react-admin";

export const CharacterList = (props) => (
    <List {...props}>
        <Datagrid>
            <NumberField source="id" />
            <TextField source="name" />
            <TextField source="race" />
            <TextField source="class" />
            <NumberField source="level" />
            <ReferenceField
                label="user"
                source="user_id"
                reference="users"
                linkType="show"
            >
                <TextField source="username" />
            </ReferenceField>
            <EditButton />
            <DeleteButton />
        </Datagrid>
    </List>
);

export const CharacterCreate = (props) => (
    <Create {...props}>
        <SimpleForm>
            <TextInput source="name"/>
            <TextInput source="race"/>
            <TextInput source="class"/>
            <NumberInput source="level"/>
            <ReferenceInput label="Owner" source="user_id" reference="users">
                <SelectInput optionText="username" />
            </ReferenceInput>
        </SimpleForm>
    </Create>
);

export const CharacterEdit = (props) => (
    <Edit {...props}>
        <SimpleForm>
            <DisabledInput source="id"/>
            <TextInput source="name"/>
            <TextInput source="race"/>
            <TextInput source="class"/>
            <NumberInput source="level"/>
        </SimpleForm>
    </Edit>
);

Я могу предоставить больше примеров кода, если это необходимо. И если у некоторых людей есть идеи о том, как сделать больше отладки / подробности, потому что, честно говоря, это одна из худших платформ для отладки ...

Заранее спасибо всем <3 </p>

Answer 1

Модификация AuthProvider исправила проблему разъединения, кодируя настоящий AUTH_ERROR, сотворил чудеса!

Теперь у меня осталась ошибка «OwnProperty» при обновлении моего персонажа ...

Новый authProvider для справки на случай, если кто-то захочет:

import {AUTH_LOGIN, AUTH_LOGOUT, AUTH_ERROR, AUTH_CHECK} from 'react-admin';

export default (type, params) => {
    // called when the user attempts to log in
    if (type === AUTH_LOGIN) {
        const {username, password} = params;
        console.log(username, password);
        const request = new Request (process.env.REACT_APP_API_URL + '/auth/login', {
            method: 'POST',
            body: JSON.stringify ({username, password}),
            headers: new Headers ({'Content-Type': 'application/json'}),
        });
        return fetch (request)
            .then (response => {
                if (response.status < 200 || response.status >= 300) {
                    throw new Error (response.statusText);
                }
                return response.json ();
            })
            .then (({token}) => {
                localStorage.setItem ('token', token);
                return Promise.resolve ();
            });
    }
    if (type === AUTH_LOGOUT) {
        localStorage.removeItem ('username');
        return Promise.resolve ();
    }
    // called when the API returns an error
    if (type === AUTH_ERROR) {
        const {status} = params;
        if (status === 401 || status === 403) {
            localStorage.removeItem ('username');
            return Promise.reject ();
        }
        return Promise.resolve ();
    }
    // called when the user navigates to a new location
    if (type === AUTH_CHECK) {
        return localStorage.getItem ('token')
            ? Promise.resolve ()
            : Promise.reject ();
    }
    return Promise.reject ('Unknown method');
};