如何解决如何在 react admin 自定义登录页面中使用户名未定义?
我想在 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),flexDirection: 'row',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,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();
},to check for permissions / roles
getPermissions: () => Promise.resolve(),};
export default authFunctions
解决方法
login({ email,password })
- 这是不正确的。 login
函数接受具有 username
和 password
属性的对象,但您有 email
和 password
。在组件 login({ username: email,password })
函数中将其更改为 submit
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。