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

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

自动导入

useHanko 在您的应用程序的 Vue 部分公开，以允许您直接访问 Hanko API。您可以访问当前用户等等。**注意**：它将在服务器上返回 null。

服务器实用程序

默认情况下，您可以在 event.context.hanko 上访问经过验证的 JWT 上下文。（如果用户未登录，则它将为未定义。）如果您想自己处理此问题，可以设置 augmentContext: false。

verifyHankoEvent 在您的应用程序的 Nitro 部分公开，以公开用于创建 event.context.hanko 的底层实用程序，如果您想手动处理事务。

💻 开发

克隆此存储库
使用 corepack enable 启用 Corepack
使用 pnpm install 安装依赖项
使用 pnpm dev:prepare 存根模块
运行 pnpm dev 以在开发模式下启动 playground

鸣谢

感谢 @McPizza0 推动模块的开发！

许可证

用心制作 ❤️

根据 MIT 许可证发布。