我想在react admin上建立一个自定义登录，当电子邮件到达我的自定义身份验证提供商时，有该登录的代码(如下(，它变为未定义，但密码仍然可用。
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
我只是把它放在我的管理员中，但它不像本地管理员那样工作
login({ email, password })-这是不正确的。login函数接受一个属性为username和password的对象，但您有email和password。在组件submit函数中将其更改为login({ username: email, password })。