Nuxt Hanko

Hanko 整合適用於 Nuxt

✨ 輕鬆整合 Hanko
🧱 Hanko web components 的類型安全和自動註冊
💪 用於全端身份驗證的伺服器工具

安裝

安裝並將 @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 components。屬性已輸入類型。

您可以關閉組件的自動註冊（如果您希望僅在伺服器端或以程式方式使用 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。）

您也可以建立自己的中間件以進行完全控制。