authProvider 调用“AUTH_ERROR”，只有 2XX 个响应

Question

我在调试 react-admin 时遇到了大问题...

我有一个 node.js Web 服务器充当 API，它只返回 2XX 响应，但设法在我的 authProvider 中触发“AUTH_ERROR”，我在控制台中得到 Warning: Missing translation for key: "Cannot read property 'hasOwnProperty' of undefined"。

这是我触发此问题时的网络：

您可以看到没有 4XX / 5XX 代码只有 2XX，令牌从 localStorage 中删除，导致提供者返回登录，但它不应该因为我只收到 2XX 响应。

这是我的 Auth Provider 代码（它是文档 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>
);

如果需要，我可以提供更多代码示例。如果有些人对如何进行更多的调试/冗长有想法，因为老实说，这是最糟糕的调试框架之一......

提前谢谢大家

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');
};