Nuxt.js3中Firebase Auth登录/登出后useRouter无法自动跳转的问题

问题分析 #

你的代码里直接在异步函数内调用useRouter().push()无法触发跳转，核心原因有两个：

• 异步回调中重复调用useRouter()可能获取到非当前活跃的路由实例
• Firebase Auth的状态变更未被Nuxt响应式系统正确捕获，导致跳转逻辑未生效

解决方案 #

1. 提前获取路由实例，避免重复调用useRouter() #

在Composable顶部一次性获取路由实例，后续直接复用该实例进行跳转：

import { signInWithEmailLink, signOut } from "@firebase/auth"

export default function() {
  const { $auth } = useNuxtApp()
  const router = useRouter() // 提前获取路由实例

  const verifyEmailLinkSignIn = async () => {
    // ... 你的邮箱验证逻辑
    const result = await signInWithEmailLink($auth, email, window.location.href)
    if (result) {
      router.push("/home") // 使用提前获取的实例跳转
    }
  }

  const signOutUser = async () => {
    await signOut($auth)
    router.push("/login") // 使用提前获取的实例跳转
  }

  return {
    verifyEmailLinkSignIn,
    signOutUser
  }
}

2. 用Nuxt3推荐的navigateTo替代router.push #

navigateTo是Nuxt3官方推荐的路由跳转方法，适配服务端渲染场景，比直接调用router.push更可靠：

import { signInWithEmailLink, signOut } from "@firebase/auth"
import { navigateTo } from "nuxt/app"

export default function() {
  const { $auth } = useNuxtApp()

  const verifyEmailLinkSignIn = async () => {
    // ... 你的邮箱验证逻辑
    const result = await signInWithEmailLink($auth, email, window.location.href)
    if (result) {
      return navigateTo("/home") // 返回跳转方法的执行结果
    }
  }

  const signOutUser = async () => {
    await signOut($auth)
    return navigateTo("/login") // 返回跳转方法的执行结果
  }

  return {
    verifyEmailLinkSignIn,
    signOutUser
  }
}

3. 让Auth状态变更被响应式跟踪 #

通过响应式变量同步Firebase Auth的用户状态，让Nuxt能感知登录状态变化，确保跳转逻辑稳定：

import { signInWithEmailLink, signOut, onAuthStateChanged } from "@firebase/auth"
import { navigateTo } from "nuxt/app"
import { useState } from "#app"

export default function() {
  const { $auth } = useNuxtApp()
  const currentUser = useState("currentUser", () => null)

  // 监听Auth状态变化，同步到响应式变量
  onAuthStateChanged($auth, (user) => {
    currentUser.value = user
  })

  const verifyEmailLinkSignIn = async () => {
    // ... 你的邮箱验证逻辑
    await signInWithEmailLink($auth, email, window.location.href)
    // 等待状态同步完成后跳转
    if (currentUser.value) {
      return navigateTo("/home")
    }
  }

  const signOutUser = async () => {
    await signOut($auth)
    // 等待状态同步完成后跳转
    if (!currentUser.value) {
      return navigateTo("/login")
    }
  }

  return {
    currentUser,
    verifyEmailLinkSignIn,
    signOutUser
  }
}

4. 清理邮件链接参数（可选） #

登录成功后清理URL中的邮件链接参数，避免重复触发登录逻辑：

const verifyEmailLinkSignIn = async () => {
  const email = localStorage.getItem("emailForSignIn") // 假设你预先存储了邮箱
  if (email && signInWithEmailLink($auth, window.location.href)) {
    await signInWithEmailLink($auth, email, window.location.href)
    // 清理本地存储和URL参数
    localStorage.removeItem("emailForSignIn")
    window.history.replaceState({}, document.title, window.location.pathname)
    return navigateTo("/home")
  }
}

关键注意点 #

• 确保Firebase Auth已在Nuxt插件中正确初始化并注入为$auth
• 如果使用路由守卫（如middleware/auth.ts），需保证守卫能读取到响应式的用户状态
• 异步操作中必须等待Promise完成后再执行跳转逻辑

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