时间戳

首页 > 解决方案 > 尝试在reactjs中使用firebase auth保持用户登录

reactjs - 尝试在reactjs中使用firebase auth保持用户登录

问题描述

我有一个使用 firebase 进行身份验证和其他工具的反应应用程序。在某个页面上，我检查用户是否使用firebase.auth().currentUser;& 也尝试过登录，firebase.auth().onAuthStateChanged但它会将我重定向到登录页面，表明我没有登录，而我刚刚登录。

这是我迄今为止尝试过的代码：

const [user, setUser] = React.useState(firebase.auth().currentUser);

  firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
      setUser(user);
    }
  })

  React.useEffect(() => {
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        setUser(user);
      }
    })
  });
return(

    <Styles>
    { user ?
      <Paper className={clsx(classes.root, "Paper")}>

        <div className="overlay"></div>

        <Container maxWidth="lg">

          <HeaderTypography variant="h2" color="" gutterBottom>
            Create an Event
          </HeaderTypography> : <Redirect to="/login"/> }

即使登录后，当我来到这个页面时，我仍然会被重定向.. 欢迎任何帮助

标签： reactjsfirebase

解决方案

确保您拥有所有组件的结束标签。还有一个围绕主要 Paper组件的parathesis。下面的代码将起作用。例如：

function App() {
  const [user, setUser] = React.useState(null);
  useEffect(() => {
    firebase.auth().onAuthStateChanged(async(userData) => {
      console.log(userData);
      if (userData) {
         setUser(userData);
      } else {
        setUser(null);
      }
    });
  }, []);

  return (
    user ?
    (<Paper className={clsx(classes.root, "Paper")}>

        <div className="overlay"></div>

        <Container maxWidth="lg">

          <HeaderTypography variant="h2" color="" gutterBottom>
            Create an Event
          </HeaderTypography>
        </Container>
    </Paper>) :
    <Redirect to="/login"/>

  );
}

推荐阅读