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 组件。属性是类型化的。

您可以使用 registerComponents: false 关闭组件的自动注册（如果您只想在服务器端或以编程方式使用 Hanko）。

查看 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。）

您还可以创建自己的中间件以进行完全控制。