Nuxt Hanko

Hanko integration for Nuxt

✨ 轻松集成 Hanko
🧱 Hanko Web 组件的类型安全和自动注册
💪 用于全栈身份验证的服务器实用工具

安装

安装并添加 @nuxtjs/hanko 到你的 nuxt.config。

npx nuxi@latest module add hanko

export default defineNuxtConfig({
  modules: ['@nuxtjs/hanko'],
  hanko: {
    // You can also configure this by setting NUXT_PUBLIC_HANKO_API_URL at runtime
    apiURL: '<YOUR_API_URL>',
    // You can also customise these if required
    // cookieName: 'hanko',
    // cookieSameSite: 'Lax',
    // cookieDomain: 'nuxt.com',
    // storageKey: 'hanko',
    // redirects: {
    //   login: '/login',
    //   success: '/',
    //   home: '/',
    //   followRedirect: true
    // },
    // registerComponents: true,
    // augmentContext: true,
    // components: {
    //   shadow: true,
    //   injectStyles: true,
    //   enablePasskeys: true,
    //   hidePasskeyButtonOnLogin: true,
    //   translations: {},
    //   fallbackLanguage: 'en'
    // }
  },
})

用法

组件

要使用，你可以在应用的任何位置使用 Hanko 组件： <hanko-auth>、 <hanko-events> 和 <hanko-profile>。这些是在客户端渲染的 Web 组件。 Props 是类型化的。

你可以关闭组件的自动注册（如果你希望仅在服务器端或以编程方式使用 Hanko），通过设置 registerComponents: false。

查看 Hanko 文档以了解更多信息。

<template>
  <hanko-auth />
</template>

中间件

默认情况下，你的 Nuxt 应用中有两个新的路由中间件可用： hanko-logged-in 和 hanko-logged-out。

hanko-logged-in 将阻止访问页面，除非你已登录。（它将重定向到 redirects.login，然后在你登录后重定向回此页面。你可以通过设置 redirects.followRedirect 为 false 来禁用此行为。）
hanko-logged-out 将阻止访问页面，除非你已登出。（它将在你登录时重定向到 redirects.success，否则重定向到 redirects.home。）

你也可以创建自己的中间件以获得完全控制。