此 Firebase onAuthStateChanged 如何在此代碼中工作

Question

我有一個關於 Firebase 的抽象問題。 在這段代碼中，我想知道如果用戶useEffect ，是否會調用下面useEffect中設置的偵聽器？

我知道當此代碼運行時， onAuthStateChanged下面的 Firebase 偵聽器onAuthStateChanged ，我想知道用戶何時在此處注銷，或者用戶是否從另一個瀏覽器注銷（使用與 Google/Facebook 相同的憑據登錄），此代碼onAuthStateChanged運行?

import React, { useEffect } from 'react';
import './App.scss';
import Dashboard from './pages/dashboard/dashboard.component';
import Login from './pages/login-page/login.component';

import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
import { connect } from 'react-redux';
import { setUser } from './Redux/User/user.actions';
import { selectUserSlice } from './Redux/User/user.selectors';
import { auth } from './firebase/firebase.utils';

const App = ({ setCurrentUser, currentUser }) => {

  useEffect(() => {
    const unSubscribeFromAuth = auth.onAuthStateChanged(user => {
      setCurrentUser(user);
    });
    //cleanup function
    return () => {
      unSubscribeFromAuth();
    }
  },[setCurrentUser])

  return(
    <div className="App">
      {
        currentUser ? <Dashboard />   : <Login />
      }
    </div>
  )
};

const mapDispatchToProps = dispatch => ({
  setCurrentUser: user => dispatch(setUser(user)),
});

const mapStateToProps = state => ({
  currentUser: selectUserSlice(state)
})


export default connect(mapStateToProps, mapDispatchToProps)(App);

Answer 1

使用 Firebase 身份驗證，用戶登錄到該特定瀏覽器實例。 因此，如果用戶在一個瀏覽器中登錄或退出，它不會影響任何其他瀏覽器實例。

請記住，不同的選項卡是同一個瀏覽器實例的一部分，而即使是不同的窗口也可能是同一個瀏覽器實例的一部分——這取決於瀏覽器和窗口的打開方式。

但是，例如，如果瀏覽器在不同的機器上，或者如果它們是 Firefox、Edge 和 Chrome，則這些瀏覽器實例之一上的onAuthStateChanged偵聽器將不會被另一個瀏覽器引起的登錄狀態更改調用。