Nuxt Hanko

Hanko 針對 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'
    // redirects: {
    //   login: '/login',
    //   success: '/',
    //   home: '/',
    //   followRedirect: true
    // },
    // registerComponents: true,
    // augmentContext: true,
  },
})

用法

元件

要使用，您可以在應用程式中的任何位置使用 Hanko 元件：<hanko-auth>、<hanko-events> 和 <hanko-profile>。這些是在用戶端才會渲染的 Web 元件。屬性已設定型別。

您可以關閉元件的自動註冊（如果您只想在伺服器端或以程式設計方式使用 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。）

您也可以建立自己的中介軟體以獲得完全控制。