React 有没有办法在重定向用户之前检查 Firebase 用户是否存在？

Question

我正在制作一个应用程序，我在其中使用 nextjs 以及 firebase、fireauth。问题是页面重新加载或加载后用户不可用，加载需要时间，直到那时 useEffect 也无法识别用户是否存在，只是确定用户不存在。 这是我的代码

import { useAuth } from '/pages/contexts/AuthContexts';

const { user } = useAuth();
    const router = useRouter();

    const [loading, setLoading] = useState(true);

    useEffect(() => {
        console.log('updating user')
        if (user) {
            console.log(user);
            setLoading(false)
        } else {
            console.log('no user')
        }
    }, [user, router]);
    

    useEffect(() => {
        if (!loading && typeof user !== 'undefined') {
            console.log('yes user')
        }else{
            console.log('no user')
        }
    }, [loading]);

在这里我首先看到没有用户，然后过了一会儿我看到有用户，加载状态根本没有帮助

这是我的 useAuth 文件

// contexts/AuthContext.js
import { createContext, useContext, useState, useEffect } from 'react';
import { onAuthStateChanged } from 'firebase/auth';
import { auth } from 'flubel/firebase';

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setUser(user);
    });

    return () => {
      unsubscribe();
    };
  }, []);

  return (
    <AuthContext.Provider value={{ user, setUser }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => {
  return useContext(AuthContext);
};

我尝试创建多个状态，但它们都声明没有用户，无论我如何处理状态，我都无法使用 setTimeout，因为慢速互联网也可能是一个问题

Answer 1

虽然 Firebase 身份验证客户端将凭据保存在本地存储中，但它需要向服务器检查这些凭据和帐户是否有效（例如：它可能已被禁用）。由于该调用需要时间：

• 页面加载时它无法立即为您提供当前用户。
• 仅当对服务器的调用完成时才会触发第一个

  onAuthStateChanged

  事件。

Firebase 身份验证 SDK 中没有任何内容可以更改此行为，因为它在该级别上正常工作。

---

但在应用程序中，您“可能”愿意做出另一个权衡。例如，如果用户之前登录过 - 大多数情况下上述流程都会成功完成。因此，在应用程序级别，您可以决定假设在这种情况下登录将完全成功。 如果这是您感兴趣的事情，您可以实现如下：

当用户登录时，在同步本地存储中存储一个值来指示这一点。

1. 页面加载时，同步检查此值，如果存在，则重定向到“您已登录”UI。此时还不要显示实际的用户数据（因为您需要等待身份验证客户端为此开绿灯），但您可以显示登录的 UI。
如果
3. 身份验证客户端表示没有用户（在onAuthStateChanged回调中），则撤消决定并重定向到“您尚未登录”UI。这将导致 UI 闪烁，但这种情况不太常见。