重新加载页面时 Firebase 身份验证返回 false答案

【问题标题】：Firebase authentication returning false when reloading the page重新加载页面时 Firebase 身份验证返回 false
【发布时间】：2020-04-14 12:57:16
【问题描述】：

我目前正在开发一个使用 Firebase 集成和 React 的项目。我可以注册和登录，但我确实想要一些 Guard，以便在我连接时访问“已连接”页面，或者如果我没有被重定向到断开状态的默认页面。

我编写了以下代码以获得不同的路由并将其设置在 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)
    }
}

知道用户是否连接（作为cookie）的功能是这个：

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

不过，当我重新加载标签时，它总是返回我 FALSE ！

所以，我想知道如何在应用程序启动之前初始化 firebase 服务器？这是当前的问题吗？我目前对此一无所知，这让我非常沮丧......

如果你已经遇到过这样的问题，那真的对我有帮助！

谢谢！

【问题讨论】：

请将您的代码截图替换为实际代码，并使用 Stack Overflow 的格式化工具进行标记。
是的，对不起。确实这样更好。

标签： reactjs firebase ionic-framework

【解决方案1】：

Firebase 身份验证将用户的身份验证状态保存在本地存储中。但是当您加载新页面（或重新加载现有页面）时，它必须与服务器检查身份验证状态是否仍然有效。而且这个检查需要一些时间，在此期间还没有当前用户。

绕过这种竞争条件的典型方法是use an auth state listener 来检测当前用户：

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
  }
});

【讨论】：

是的，我是在 windows 位置执行此操作的，但是当您重新加载 /welcome 页面时，它并不是很好。

【解决方案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"
    }
});

【讨论】：