Next/React+Firebase Auth渲染是否需LocalStorage存储isUserSignIn状态

问题描述 #

用户完成登录后将登录状态设为true，在index.js中根据该状态值条件渲染首页（Home）组件与欢迎（登录）组件。此前开发时曾将登录状态存储在LocalStorage中，但认为该实现并非最佳实践。如果不使用LocalStorage会出现异常：已登录用户本应直接进入首页组件，却会在首页加载前先看到欢迎组件，产生页面闪烁问题。

现有实现逻辑 #

index.js 渲染规则：若userSignin为真则渲染Home组件，否则渲染Login（欢迎）组件

条件渲染代码 #

{isSignin ? (<>Home Component</>) : (<Welcome Component/>)}

状态定义代码 #

const [isSignin, setisSignin] = useState(false);

登录状态监听逻辑 #

useEffect(() => {
  onAuthStateChanged(auth, (user) => {
    if (user) {
      setisSignin(true);
      console.log(user);
    }else {
      setisSignin(false);
    }
  });
}, []);

核心疑问 #

该场景下是否需要将isUserSignIn登录状态存储在LocalStorage中用于组件渲染，如何解决上述页面闪烁的问题？

首先给出明确结论：不需要手动把登录状态存储到LocalStorage，页面闪烁问题通过增加初始认证加载态即可解决。

闪烁问题的根源：isSignin的初始值被硬编码为false，而onAuthStateChanged的回调是在组件挂载、useEffect执行后才会触发，这中间存在一段空窗期——Firebase Auth SDK还没完成本地持久化凭证的校验，代码就已经按照「未登录」状态渲染了欢迎页，等SDK校验完成发现用户已登录，再切换回首页，就出现了闪烁。

具体改造方案如下：

改造步骤 #

• 新增认证加载状态，初始值设为true，标记「尚未完成初始登录态校验」的阶段

const [isSignin, setIsSignin] = useState(false);
// 新增加载状态
const [authLoading, setAuthLoading] = useState(true);

• 改造登录状态监听逻辑，拿到首次校验结果后立刻关闭加载态，同时在组件卸载时取消监听，避免内存泄漏

useEffect(() => {
  const unsubscribe = onAuthStateChanged(auth, (user) => {
    if (user) {
      setIsSignin(true);
      console.log(user);
    } else {
      setIsSignin(false);
    }
    // 首次状态校验完成，关闭加载态
    setAuthLoading(false);
  });
  // 组件卸载时取消订阅
  return () => unsubscribe();
}, []);

• 调整条件渲染逻辑，校验完成前不渲染登录/首页内容，统一展示加载占位

if (authLoading) {
  // 可替换为项目内的全局Loading组件、对应页面的骨架屏，优化加载体验
  return <div>页面加载中...</div>
}

return isSignin ? <HomeComponent /> : <WelcomeComponent />

注意事项 #

• 手动存LocalStorage是反模式：Firebase Auth SDK本身已经实现了登录凭证的本地持久化（Web端默认存储在IndexedDB，特殊场景下会降级到LocalStorage），手动存一个布尔值的登录状态没有任何安全校验能力，用户可以随意篡改LocalStorage伪造登录态，还容易出现凭证过期、用户登出后状态未同步的bug。
• 如果使用Next.js App Router，可以把上述逻辑封装为全局Auth Provider，放在根布局层统一处理，整个站点的路由都不会出现登录态闪烁问题。
• 不要用透明占位、空节点糊弄加载阶段，用和目标页面结构接近的骨架屏，可以把状态校验的感知降到最低。

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