ReactJS集成Firebase谷歌认证刷新重复弹窗，如何通过Token实现持久登录

• Firebase Auth 默认开启LOCAL级别的持久化，登录凭证会自动存储在本地IndexedDB中，关闭浏览器再打开都会保留，无需你手动存储或刷新Token，你遇到的问题核心是没有监听Firebase的认证状态变化，仅在用户点击登录时获取了一次用户信息。

1. 显式配置持久化等级（可选，避免默认配置被覆盖） #

你可以在登录方法中显式声明持久化等级，LOCAL等级对应你需要的永久保留效果，直到用户主动登出：

import { auth, provider } from '../firebase'

const loginMethod = () => {
  auth.setPersistence(firebase.auth.Auth.Persistence.LOCAL)
    .then(() => auth.signInWithPopup(provider))
    .then((result) => {
      dispatch(
        setVariableInfo({
          var1: result.user.displayName,
          var2: result.user.email,
          var3: result.user.photoURL
        })
      )
    })
}

2. 全局监听认证状态变化 #

在应用根组件（比如App.js）中添加onAuthStateChanged监听器，Firebase初始化完成后会自动读取本地缓存的登录状态，回调返回当前登录的用户信息：

import { auth } from './firebase'
import { useEffect } from 'react'
import { useDispatch } from 'react-redux'
import { setVariableInfo, clearVariableInfo } from '你的状态管理文件路径'

function App() {
  const dispatch = useDispatch()

  useEffect(() => {
    // 注册认证状态监听器
    const unsubscribe = auth.onAuthStateChanged((user) => {
      if (user) {
        // 用户已登录，更新全局状态
        dispatch(setVariableInfo({
          var1: user.displayName,
          var2: user.email,
          var3: user.photoURL
        }))
        // 如需调用后端接口鉴权，可在这里获取ID Token，方法会自动刷新过期的Token
        user.getIdToken().then((idToken) => {
          // 接口请求时可将该Token放在Authorization头中携带
          console.log('当前有效ID Token：', idToken)
        })
      } else {
        // 确认用户未登录，清空全局状态，可在此处跳转登录页
        dispatch(clearVariableInfo())
      }
    })

    // 组件卸载时取消监听，避免内存泄漏
    return () => unsubscribe()
  }, [dispatch])

  return <div>你的应用内容</div>
}

3. 修正登录触发逻辑 #

如果刷新页面会自动弹出谷歌登录弹窗，说明你当前的登录判断逻辑有误：不要直接用全局状态是否为空作为触发登录的依据，必须等onAuthStateChanged回调返回null、确认用户确实未登录时，再触发登录操作或者跳转登录页。

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