在React中借助Firebase Auth实现登录信息跨页面传递的方法

一、用Firebase Auth自带监听实现全局用户状态 #

这是最省事的办法，Firebase Auth本身就有用户状态监听，不用额外装全局状态库：

1. 先建一个Auth上下文文件（AuthContext.js）：

import React, { createContext, useContext, useEffect, useState } from 'react';
import { auth } from '../firebaseConfig';

const AuthContext = createContext();

export const useAuth = () => useContext(AuthContext);

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);

  useEffect(() => {
    // 监听用户登录/登出的状态变化，自动同步全局用户信息
    const unsubscribe = auth.onAuthStateChanged(user => {
      setCurrentUser(user);
      // 如果要把用户信息同步到Firestore，也可以在这里处理
    });

    return unsubscribe; // 组件卸载时记得取消监听
  }, []);

  const value = {
    currentUser,
    // 还能把登录、登出这些方法也放在这里统一管理
  };

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
};

2. 在项目入口（比如App.js）用这个Provider把所有组件包起来：

import { AuthProvider } from './AuthContext';
import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        {/* 你的路由和其他组件都放这里面 */}
      </AuthProvider>
    </BrowserRouter>
  );
}

3. 之后不管是首页还是其他页面，直接用useAuth钩子拿用户信息：

import { useAuth } from './AuthContext';

const HomePage = () => {
  const { currentUser } = useAuth();

  return (
    <div>
      {currentUser ? (
        <>
          <p>当前登录用户：{currentUser.email}</p>
          {currentUser.photoURL && <img src={currentUser.photoURL} alt="用户头像" />}
        </>
      ) : (
        <p>请先登录</p>
      )}
    </div>
  );
};

二、结合Firestore做「稍后观看」功能 #

既然要做用户专属的收藏列表，直接把数据存在Firestore里，用用户UID关联就行：

1. 给AuthContext加几个操作「稍后观看」的方法：

import { getFirestore, collection, addDoc, getDocs, query, where } from 'firebase/firestore';

const db = getFirestore();

// 在AuthProvider的value里新增这两个方法：
const addToWatchLater = async (movieData) => {
  if (!currentUser) throw new Error('用户未登录');
  await addDoc(collection(db, 'watchLater'), {
    userId: currentUser.uid,
    ...movieData,
    createdAt: new Date()
  });
};

const getWatchLater = async () => {
  if (!currentUser) return [];
  const q = query(collection(db, 'watchLater'), where('userId', '==', currentUser.uid));
  const querySnapshot = await getDocs(q);
  return querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
};

// 更新value对象：
const value = {
  currentUser,
  addToWatchLater,
  getWatchLater
};

2. 在电影详情页或者列表页就能直接调用这些方法：

import { useAuth } from './AuthContext';
import { useState, useEffect } from 'react';

const MovieDetail = ({ movie }) => {
  const { currentUser, addToWatchLater, getWatchLater } = useAuth();
  const [watchLaterList, setWatchLaterList] = useState([]);

  useEffect(() => {
    const fetchList = async () => {
      const list = await getWatchLater();
      setWatchLaterList(list);
    };
    if (currentUser) fetchList();
  }, [currentUser]);

  const handleAdd = async () => {
    try {
      await addToWatchLater({ title: movie.title, poster: movie.poster, movieId: movie.id });
      // 添加完刷新列表
      const updatedList = await getWatchLater();
      setWatchLaterList(updatedList);
    } catch (err) {
      console.error('添加失败：', err);
    }
  };

  return (
    <div>
      <h2>{movie.title}</h2>
      {currentUser ? (
        <button onClick={handleAdd}>加入稍后观看</button>
      ) : (
        <p>登录后可收藏影片</p>
      )}
    </div>
  );
};

为啥不用第三方全局状态库？ #

Firebase Auth的onAuthStateChanged已经能实时监听用户状态，结合React Context完全能搞定全局共享，没必要额外加依赖增加复杂度。而且用户状态和业务数据（比如稍后观看列表）可以统一在Context里管理，逻辑更清晰。

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