如何在 React 管理员自定义登录页面中设置非未定义的用户名？

Question

我想在 react-admin 上建立一个自定义登录名，当电子邮件到达我的自定义 auth 提供程序时，有该登录名的代码（如下），它变得未定义但密码仍然可用。

import React from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import { useState } from 'react';
import { useLogin, useNotify, Notification, defaultTheme } from 'react-admin';
import { ThemeProvider } from '@material-ui/styles';
import { createMuiTheme } from '@material-ui/core/styles';
import {Theme} from "../styles/admin-theme"
import novawiLogo from "../assets/Logo/AppIcon/Novawi-appIcon.png"
import novawiLabel from "../assets/Logo/Logo-black/Label/Novawi-logo-label-black-100px.png"
import ForgotPassword from "./forgotPassword"
import { useHistory } from 'react-router-dom'

const useStyles = makeStyles((theme) => ({
  paper: {
    marginTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  header: {
    marginBottom: theme.spacing(5),
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-evenly'
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main,
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(1),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}));

 /*   firebase.auth().signInWithEmailAndPassword(email,password).then(res => {
        console.log(res)
        localStorage.setItem('authInfos', res);
        history.push(window.location.hostname)
      }).catch((err) =>{
          console.log(err)
          notify('Invalid email or password')}
      ); */
      
const  SignIn = () => {
  const classes = useStyles();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const login = useLogin();
  const notify = useNotify();
  const history = useHistory()
  const submit = e => {
      e.preventDefault();
      console.log("email : ", email, "password : ",password)
   
       login({ email, password }).catch((err) =>{
          console.log(err)
          notify('Invalid email or password')}
      ); 
  };

  return (
    <ThemeProvider theme={Theme}>
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <div className={classes.header}>
        <Avatar variant="square" alt="Novawi logo" src={novawiLogo} />
        <img  alt="Novawi logo" src={novawiLabel} />
        </div>
        <Typography component="h1" variant="h6">
         Log into your account
        </Typography>
        <form className={classes.form} onSubmit={submit}>
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="email"
            label="Email Address"
            name="email"
            onChange={(e) => setEmail(e.target.value)}
            autoComplete="email"
            autoFocus
          />
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            onChange={(e) => setPassword(e.target.value)}
            name="password"
            label="Password"
            type="password"
            id="password"
            autoComplete="current-password"
          />
        {/*   <FormControlLabel
            control={<Checkbox value="remember" color="primary" />}
            label="Remember me"
          /> */}
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Login
          </Button>
          <Grid container>
            <Grid item xs>
              <ForgotPassword/>          
            </Grid>
            <Grid item>
              <Link href="#" variant="body2">
                {"Don't have an account? Sign Up"}
              </Link>
            </Grid>
          </Grid>
        </form>
      </div>
    </Container>
    <Notification />
  </ThemeProvider>
  );
}

export default SignIn

还有我的身份验证提供商的代码：

const authFunctions =  {
    // called when the user attempts to log in
    login: ({ username,password }) => {
        localStorage.setItem('username', username);
        console.log("username         ",username)
        console.log("password        ",password)
        // accept all username/password combinations
        return Promise.resolve();
    },
    // called when the user clicks on the logout button
    logout: () => {
        localStorage.removeItem('username');
        return Promise.resolve();
    },
    // called when the API returns an error
    checkError: ({ status }) => {
        if (status === 401 || status === 403) {
            localStorage.removeItem('username');
            return Promise.reject();
        }
        return Promise.resolve();
    },
    // called when the user navigates to a new location, to check for authentication
    checkAuth: () => {
        return localStorage.getItem('username')
            ? Promise.resolve()
            : Promise.reject();
    },
    // called when the user navigates to a new location, to check for permissions / roles
    getPermissions: () => Promise.resolve(),
};

export default authFunctions

我只是把它放在我的管理员中，但它不像本地管理员那样工作

Answer 1

login({ email, password }) - 这是不正确的。 login 函数接受具有属性 username 和 password 的对象，但您有 email 和 password。在组件 submit 函数中将其更改为 login({ username: email, password })。