Next.js结合Firebase的onAuthStateChanged导致登录页闪烁如何解决？

问题根源 #

出现登录页闪烁的核心原因有两个：

1. 你没有区分「认证状态还在加载中」和「用户确实未登录」两种场景，Firebase的onAuthStateChanged是异步接口，在接口返回结果前你直接用!user判断，就会先误判为未登录显示登录页，等接口拿到登录用户后才切首页，产生闪烁。
2. 原useAuth钩子的useEffect错误将user作为依赖项，会导致每次user变化都重新注册监听器，存在性能和内存泄漏隐患。

代码修改 #

第一步：调整useAuth钩子 #

新增加载状态标记认证请求的完成状态，同时修正监听器注册逻辑：

import { useState, useEffect } from 'react';
// 请替换为你自己的firebase初始化配置路径
import { auth } from '../config/firebase';

function useAuth() {
  const [user, setUser] = useState(null);
  // 新增加载状态，初始为true表示还在获取认证信息
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 注册监听器，拿到返回的取消监听方法
    const unsubscribe = auth.onAuthStateChanged((authUser) => {
      authUser ? setUser(authUser) : setUser(null);
      // 无论用户是否登录，获取到状态后就关闭加载标记
      setLoading(false);
    });
    // 组件卸载时取消监听，避免内存泄漏
    return () => unsubscribe();
  // 依赖项改为空数组，只在组件挂载时注册一次监听器
  }, []);

  return { user, loading };
}

export default useAuth;

第二步：调整_app.js逻辑 #

在认证状态加载完成前渲染加载占位，不要直接判断用户登录状态：

import { Fragment } from 'react';
import Head from 'next/head';
import useAuth from '../components/useAuth';
import Login from '../components/Login';

function MyApp({ Component, pageProps }) {
  const { user, loading } = useAuth();

  // 认证状态加载中时渲染全局加载UI，可替换为你的骨架屏/加载动画
  if (loading) {
    return <div style={{
      height: '100vh',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    }}>加载中...</div>
  }

  return (
    <Fragment>
      <Head>
        <title>whatsapp</title>
        <meta name="description" content="whatsapp by create next app" />
        <link rel="icon" href="/whatsapp--v1.png" />
      </Head>
      {/* 此时loading为false，已经明确知道用户登录状态，不会出现误判 */}
      {!user ? <Login /> : <Component {...pageProps} />}
    </Fragment>
  );
}

export default MyApp;

内容的提问来源于stack exchange，提问作者Muhammad Hossam