Next.js 与 firebase onAuthStateChanged

Question

function useAuth() {
  const [user, setUser] = useState('');

  useEffect(() => {
    auth.onAuthStateChanged(function handleAuth(user) {
      if (user) {
        setUser(user);
      } else {
        setUser(null);
      }
    });
  }, [user]);

  return user;
}



import useAuth from '../components/useAuth';
function MyApp({ Component, pageProps }) {
  const user = useAuth();

  return (
    <Fragment>
      <Head>
        <title>whatsapp</title>
        <meta name="description" content="whatsapp by create next app" />
        <link rel="icon" href="\whatsapp--v1.png" />
      </Head>
      {!user ? <Login /> : <Component {...pageProps} />}
    </Fragment>
  );
}

我想检查是否有用户然后 go 到 login.js 页面，如果没有 go 到 index.js。 但是有一个问题：用户一开始变成null 然后有一个值，这会导致延迟，即使有用户，登录页面总是先出现一秒钟然后索引页面。 如何在用户数据完全加载后进行渲染？

Answer 1

您可以定义一个加载 state 并在您获取数据时呈现它应该是这样的：



function useAuth() {
  const [user, setUser] = useState('');
  const [loading, setLoading] = useState(false);
  
  useEffect(() => {
    setLoading(true)
    auth.onAuthStateChanged(function handleAuth(user) {
      if (user) {
        setUser(user);
        setLoading(false);
      } else {
        setUser(null);
        setLoading(false)
      }
    });
  }, [user]);

  return {user, loading};
}



import useAuth from '../components/useAuth';
function MyApp({ Component, pageProps }) {
  const auth = useAuth();
  if(auth.loading) return 'loading...'
  return (
    <Fragment>
      <Head>
        <title>whatsapp</title>
        <meta name="description" content="whatsapp by create next app" />
        <link rel="icon" href="\whatsapp--v1.png" />
      </Head>
      {!auth?.user ? <Login /> : <Component {...pageProps} />}
    </Fragment>
  );
}

Next.js 与 firebase onAuthStateChanged

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-05-06 02:46:59

Next.js 与 firebase onAuthStateChanged

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-05-06 02:46:59

解决方案1
0 已采纳 2021-05-06 02:46:59