Firebase authStateChange：获取当前用户、无用户时取消订阅及重定向问题

我之前也碰到过完全一样的场景，分享一下我实践下来的可靠解决方案：

1. 在主应用组件中全局监听认证状态 #

这一步是核心，因为主应用组件是整个应用的入口，在这里监听认证状态能确保所有路由的访问权限都被统一控制，未授权用户根本没机会进入其他页面。

具体做法是在主组件的生命周期钩子（比如React的useEffect）里订阅authStateChange，这个回调会在SDK初始化完成后立即触发，不管用户是已登录还是未登录状态，完美解决了auth.currentUser初始化前为null的问题。

举个React + React Router的示例：

// App.jsx
import { useEffect } from 'react';
import { auth } from './path-to-your-auth-sdk';
import { useNavigate } from 'react-router-dom';

function App() {
  const navigate = useNavigate();

  useEffect(() => {
    // 订阅认证状态变更
    const authUnsubscribe = auth.onAuthStateChanged((user) => {
      if (!user) {
        // 未登录时强制跳转到登录页，用replace避免后退回未授权页面
        navigate('/login', { replace: true });
      } else {
        // 已登录用户如果在登录/注册页，自动跳转到主页
        const forbiddenPaths = ['/login', '/register'];
        if (forbiddenPaths.includes(window.location.pathname)) {
          navigate('/', { replace: true });
        }
      }
    });

    // 组件卸载时取消订阅，防止内存泄漏
    return authUnsubscribe;
  }, [navigate]);

  return (
    {/* 你的应用路由配置和页面内容 */}
  );
}

export default App;

2. 注册页面无需重复处理跳转逻辑 #

注册成功后，Auth SDK会自动更新用户的认证状态，这时候主应用组件里的authStateChange监听器会立即触发，自动把用户重定向到主页。你只需要在注册页面专注处理注册表单提交和错误提示即可，不用额外写跳转代码，这样逻辑更统一，也避免了重复代码。

关键注意点 #

• 一定要记得取消订阅：authStateChange返回的取消订阅函数要在组件卸载时调用，防止内存泄漏
• 用replace: true修改路由历史：这样用户点击浏览器后退按钮不会回到登录/注册页，提升安全性和用户体验

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