使用 AuthContext 重新加载时用户断开连接几秒钟

Question

我正在使用 Node.js v18 和 React v18 构建应用程序，但遇到以下问题。

当他尝试登录但已经登录时，我正在重定向我的用户。问题是在短时间内呈现了登录页面。

AuthContext.tsx

import { User, getAuth, onAuthStateChanged } from "firebase/auth";
import React, { useState, useEffect, createContext, PropsWithChildren} from 'react';

export const AuthContext = createContext<User | null>(null);

export const AuthProvider = (props : PropsWithChildren) => {
    const [user, setUser] = useState<User | null>(null);

    useEffect(() => {
        onAuthStateChanged(getAuth(), (currentUser) => {
            setUser(currentUser);
        })
    }, []);

    return <AuthContext.Provider value={user}>{props.children}</AuthContext.Provider>
}

应用程序.tsx

import React, { useContext } from "react";
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
import LoginPage from "./authentication/LoginPage";
import RegisterPage from "./authentication/RegisterPage";
import { AuthContext } from "./context/AuthContext";
import PaymentPage from "./payment/PaymentPage";


export default function App(){
    const user = useContext(AuthContext);

    function redirect(){
        if(user !== null){
            return <Navigate to="/pay" />;
        }else{
            return <LoginPage />;
        } 
    }

    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={redirect()}/>
                <Route path="/register" element={<RegisterPage />}/>
                <Route path="/pay" element={<PaymentPage />}/>
            </Routes>
        </BrowserRouter>
        
    );
}

关于如何解决这个问题的任何想法？

谢谢

Answer 1

Firebase 会自动从设备的本地存储中恢复用户凭据，但在此过程中会调用服务器以检查这些凭据是否仍然有效，例如帐户是否未被暂停。在这个异步调用完成之前，onAuthStateChanged 侦听器不会触发它的第一个事件，这可能确实需要一点时间。您的 UI 使用缺少当前用户作为显示登录 UI 的标志，这会导致该 UI 短暂显示。

通常，您会希望在检查进行时显示一些加载指示器，直到您获得第一个 onAuthStateChanged 事件。这是最简单的解决方案，因为您现在处理所有三种情况：用户不是登录，用户是已登录，以及当我们还不知道用户是否已登录时。

或者，您可以在本地存储中存储一个值，以指示用户之前已登录，并基于此假设他们将再次成功登录，如 Michael Bleigh 在此 I/O talk 中所示。请注意，在这种情况下，您的应用程序认为用户最初已登录，但后来证明是错误的 - 例如当帐户被暂停时 - 因此您必须处理此流程，然后重定向回登录页面。