Firebase 身份驗證在重新加載頁面時返回 false

Question

我目前正在使用 Firebase 集成和反應的項目。 我可以注冊和登錄，但我確實想要一些 Guard，以便在我連接時訪問“已連接”頁面，或者如果我沒有，則重定向到斷開連接的 state 的默認頁面。

我編寫了以下代碼以獲得不同的路由並將其設置在 App.tsx 文件中：

const ConnectedRoute: React.FC<RouteProps>  = ({ component, ...rest }) => {
  var route = <Route />
  var connected = isConnected()
  console.log(connected)

  if (connected){
    route = <Route {...rest} component={component}/>
  }
  else{
    route = <Route {...rest} render={() => <Redirect to ="/welcome" />} />
  }

  return route
}

const UnconnectedRoute: React.FC<RouteProps>  = ({ component, ...rest }) => {
  var route = <Route />
  var connected = isConnected()
  console.log(connected)

  if (connected){
    route = <Route {...rest} render={() => <Redirect to ="/home" />} />
  }
  else{
    route = <Route {...rest} component={component}/>
  }

  return route
}

const App: React.FC = () => {
  return (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route exact path="/" render={() => <Redirect to="/welcome" />} />
        <UnconnectedRoute path="/welcome" component={UnconnectedHome} exact />
        <ConnectedRoute path="/home" component={ConnectedHome} exact />
        <UnconnectedRoute path="/login" component={Login} exact />
        <UnconnectedRoute path="/register" component={Register} exact />
        <ConnectedRoute path="/events/create" component={CreateEvent} exact />
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
  )
};

對於 firebase 初始化，我執行了以下操作：

export async function initializeApp(){
    console.log("Checking if app is initialized...")
    if (firebase.apps.length == 0){
        console.log("App initializing...")
        firebase.initializeApp(firebaseConfig);
        await firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL)
    }
}

function 知道用戶是否已連接（作為 cookie）是這個：

export function isConnected(){
    const res = firebase.auth().currentUser
    console.log(res)
    return res !== null
}

盡管如此，當我重新加載標簽時，它總是返回我FALSE ！

所以，我想知道如何在應用程序啟動之前初始化 firebase 服務器？ 這是當前的問題嗎？ 我目前對此一無所知，這讓我非常沮喪......

如果你已經遇到過這樣的問題，那真的對我有幫助！

謝謝 ！

Answer 1

Firebase 身份驗證將用戶的身份驗證 state 保存在本地存儲中。 但是當您加載新頁面（或重新加載現有頁面）時，它必須與服務器檢查身份驗證 state 是否仍然有效。 並且此檢查需要一些時間，在此期間還沒有當前用戶。

繞過這種競爭條件的典型方法是使用 auth state 偵聽器來檢測當前用戶：

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in, redirect to "connected" pages
  } else {
    // No user is signed in, probably require them to sign in
  }
});

Answer 2

我試圖用代碼在評論中回答，它沒有用。

我現在這樣做了（它不是那么好，但至少它有效）：

const connectedPaths = 
    [
        "/home",
        "/events/create"           
    ]

const unconnectedPaths = 
    [
        "/welcome",
        "/login", 
        "register"
    ]

firebase.initializeApp(firebaseConfig);
firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
        if (!connectedPaths.includes(window.location.pathname)) window.location.href = "/home"
    } 
    else {
        if (!unconnectedPaths.includes(window.location.pathname)) window.location.href = "/welcome"
    }
});