如何解决使用firebase登录后如何重定向
我使用 firebase 中的 signInWithEmailAndPassword
函数登录,并在身份验证后使用 history.push('/')
重定向到主页。
我的问题是,当我点击登录按钮时,它第一次点击后不起作用,它只能在第二次点击时起作用。
this is an image of the result from first click
//login.js
import React,{ useState} from 'react';
import { useHistory } from "react-router-dom";
import { auth } from "../firebase";
export default function Login(){
const classes = useStyles();
const history = useHistory()
const [email,setEmail] = useState('')
const [password,setPassword] = useState('')
const signIn = (e) => {
e.preventDefault();
auth.signInWithEmailAndPassword(email,password)
.then(() => {
history.push('/')
})
.catch(error => alert(error.message))
}
return(
<div className="container__login">
<img src={logo} className={classes.logo} alt="sicilia mia logo" />
<Container component="main" maxWidth="xs" className={classes.container}>
<CssBaseline />
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<Divider variant="middle"/>
<form onSubmit={signIn} novalidate>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="email"
label="Email Address"
type="email"
value={email}
onChange={e => setEmail(e.target.value)}
autoComplete="email"
autoFocus
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
value={password}
onChange={e => setPassword(e.target.value)}
id="password"
autoComplete="current-password"
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Sign In
</Button>
</form>
</div>
</Container>
<img className={classes.circleImg} src={Circle} alt="circle design" ></img>
</div>
)
}
//App.js
function App() {
return (
<div className="App">
<AuthProvider>
<Router>
<Route exact path="/login" component={Login} />
<PrivateRoute exact path="/" component={Guidelines}/>
</Router>
</AuthProvider>
</div>
);
}
export default App;
解决方法
firebase 需要一些时间来验证经过身份验证的用户,在 App.js 中的 useEffect 中添加一个 onAuthStateChange,当用户通过验证时,将经过身份验证的用户设置为本地状态。然后只在用户存在时才渲染私有路由。
const [user,setUser] = useState(null);
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged(async (userAuth) => {
if (userAuth) {
// User logged in
setUser(userAuth);
} else {
// User logged out
setUser(null);
}
});
return unsubscribe;
},[]);
return (
<div className="app">
<Router>
<Switch>
<Route path="/login">
<Login/>
</Route>
{user && <ProtectedRoute exact path="/" component={Guidelines} />}
</Switch>
</Router>
</div>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。