如何使用 Nuxt 中间件正确检查 Firebase Auth？

Question

我有一个与 Firebase 连接的 Nuxt 应用程序。我有一个可组合的

useAuth()

，代码如下：

import { type User, onAuthChangedListener } from 'firebase/auth';

export default function () {
  const nuxtApp = useNuxtApp();
  const auth = nuxtApp.$auth; // Auth object from firebase

  const currentUser = useState<User | null>('fbUser', () => auth.currentUser);

  onAuthChangedListener(auth, user => {
    // This console log comes in handy later on...
    console.log("onAuthChangedListener called:", user?.uid);
    currentUser.value = user;
  })

  return {
    currentUser
  }
}

我想在某些页面上使用路由中间件来检查用户在进入页面之前是否经过身份验证。

export default defineNuxtRouteMiddleware((to, from) => {
  const { currentUser } = useAuth();

  if (!currentUser.value) {
    return navigateTo('/login') // Redirect them to login page.
  }
})

我在

index.vue

和

definePageMeta

中使用它来相应地重新路由用户。 当我使用

pnpm dev

运行应用程序并访问

/

页面时，即使我已登录，我也会被重定向到

/login

！

在我的终端内，我看到：

onAuthChangedListener 调用：未定义

但是在我的浏览器控制台上，我看到：

onAuthChangedListener 调用：（登录用户的 uid）

为什么这里服务器端和客户端有区别？当他们真正需要时，我如何使用中间件来重定向它们？

Answer 1

为什么这里服务器端和客户端有区别？

使用 Firebase Auth，用户无需登录后端。他们登录前端。使用中的用户令牌仅存储在网络或移动应用程序中。因此，您根本无法在后端有效使用 Firebase Auth 客户端 SDK。

通常，如果您想保护后端仅由经过身份验证的用户使用，则必须在 HTTP 请求中将 ID 令牌从前端传递到后端，并使用 Firebase 管理 SDK 在后端验证该令牌。 Firebase 管理文档通过示例非常彻底地解释了这一点。