VueFire

外观

身份验证 ​

Nuxt VueFire 集成了 Firebase 身份验证 模块，以自动同步服务器和客户端上的当前用户状态。通过在 nuxt.config.ts 中将 vuefire.auth.enabled 设置为 true 来激活此模块。

ts
export default defineNuxtConfig({
  // ...
  vuefire: {
    // ensures the auth module is enabled
    auth: {
      enabled: true
    },
    config: {
      // ...
    }
  },
})

您可以在任何组件中使用 useCurrentUser() 可组合函数访问当前用户。

vue
<script setup>
const user = useCurrentUser()
</script>

您还可以使用 getCurrentUser() 在路由中间件和其他异步函数中等待用户准备就绪。例如，您可以创建一个自定义路由中间件，该中间件只允许经过身份验证的用户访问路由。

ts
// middleware/auth.ts
export default defineNuxtRouteMiddleware(async (to, from) => {
  const user = await getCurrentUser()

  // redirect the user to the login page
  if (!user) {
    return navigateTo({
      path: '/login',
      query: {
        redirect: to.fullPath,
      },
    })
  }
})

然后，您可以在 pages/ 目录中的任何页面上启用此中间件。

vue
<script setup>
definePageMeta({
  middleware: ['auth'],
})
</script>

警告

如果您使用的是 全局中间件，请确保您不会陷入重定向循环，方法是确保只有在目标位置与当前页面不同时才调用 navigateTo()。

ts
// middleware/auth.global.ts
export default defineNuxtRouteMiddleware(async (to, from) => {
  // ...
  if (!user && to.path !== '/login') {
    return navigateTo({ path: '/login' })
  }
})

您甚至可以通过观察当前用户来自动处理身份验证状态。我们建议您在布局或 app.vue 组件中执行此操作，以便观察者始终处于活动状态。

vue
<script setup>
const router = useRouter()
const route = useRoute()
const user = useCurrentUser()

// we don't need this watcher on server
onMounted(() => {
  watch(user, (user, prevUser) => {
    if (prevUser && !user) {
      // user logged out
      router.push('/login')
    } else if (user && typeof route.query.redirect === 'string') {
      // user logged in
      router.push(route.query.redirect)
    }
  })
})
</script>

自定义您的身份验证依赖项 ​

您也可以自定义身份验证模块的初始化方式。

ts
export default defineNuxtConfig({
  // ...
  vuefire: {
    auth: {
      errorMap: 'debug',
      // disable the poupup redirect resolver dependency
      popupRedirectResolver: false,
      persistence: ['indexedDBLocal']
    },
  },
})

默认情况下，身份验证模块将

  • 在开发环境中使用调试错误映射，在生产环境中使用生产错误映射。
  • 将使用浏览器弹出窗口重定向解析器依赖项 (browserPopupRedirectResolver)。
  • 将使用 IndexedDB 本地持久化依赖项 (indexedDBLocalPersistence 和 browserLocalPersistence)。

有关更多信息，请参阅 Firebase 文档。

在执行 SSR 并且提供了服务帐户的情况下，Nuxt VueFire 可以在用户登录时自动生成 Cookie。此 Cookie 传递给每个请求，并允许服务器在渲染页面时对用户进行身份验证，根据用户的权限限制用户可以看到的内容。

为了使用此功能，您必须提供服务帐户并确保在 Google Cloud 项目中设置了正确的权限。

然后，您应该通过在 nuxt.config.ts 中将 sessionCookie 设置为 true 来启用会话 Cookie。

ts
export default defineNuxtConfig({
  // ...
  vuefire: {
    // ensures the auth module is enabled
    auth: {
      enabled: true
      // enables the sessionCookie
      sessionCookie: true
    },
  },
})

这在根据用户渲染具有不同权限的页面的项目中很有用。否则，不值得启用。