Question

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

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

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

如您所见，没有4XX / 5XX的代码只有2XX，令牌从localStorage中删除，导致提供程序返回到Login，但是由于我只有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>
);

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

预先感谢大家<3

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

authProvider仅以2XX响应调用“ AUTH_ERROR”

1 个答案: