使用firebase登录后如何重定向

Question

我使用了 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;

Answer 1

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

使用firebase登录后如何重定向

how to redirect after login with firebase

javascript

reactjs

firebase

history.js