Nuxt 集成

在开始之前，请确保您已经配置了一个 Better Auth 实例。如果您还没有这样做，请查看 安装。

创建 API 路由

我们需要将处理程序挂载到一个 API 路由上。在 /server/api/auth 内部创建一个名为 [...all].ts 的文件，并添加以下代码：

server/api/auth/[...all].ts
import { auth } from "~/lib/auth"; // import your auth config

export default defineEventHandler((event) => {
	return auth.handler(toWebRequest(event));
});

您可以在 better-auth 配置中更改路径，但推荐保持为 /api/auth/[...all]

迁移数据库

运行以下命令以在您的数据库中创建必要的表：

npx @better-auth/cli migrate

创建客户端

创建一个客户端实例。您可以为文件命名任何您想要的名称。这里我们在 lib/ 目录中创建 client.ts 文件。

auth-client.ts
import { createAuthClient } from "better-auth/vue" // make sure to import from better-auth/vue

export const authClient = createAuthClient({
    //you can pass client configuration here
})

创建客户端后，您可以使用它来注册、登录并执行其他操作。其中一些操作是响应式的。

示例用法

index.vue
<script setup lang="ts">
import { authClient } from "~/lib/client"
const session = authClient.useSession()
</script>

<template>
    <div>
        <button v-if="!session?.data" @click="() => authClient.signIn.social({
            provider: 'github'
        })">
            Continue with GitHub
        </button>
        <div>
            <pre>{{ session.data }}</pre>
            <button v-if="session.data" @click="authClient.signOut()">
                Sign out
            </button>
        </div>
    </div>
</template>

服务器用法

从 auth 实例导出的 api 对象包含了您可以在服务器上执行的所有操作。Better Auth 中的每个端点都可以作为函数调用，包括插件端点。

示例：在服务器 API 路由上获取会话

server/api/example.ts
import { auth } from "~/lib/auth";

export default defineEventHandler((event) => {
    const session = await auth.api.getSession({
      headers: event.headers
    });

   if(session) {
     // access the session.session && session.user
   }
});

SSR 用法

如果您使用带有 SSR 的 Nuxt，您可以在页面组件的 setup 函数中使用 useSession 函数，并传递 useFetch 以使其与 SSR 兼容。

index.vue
<script setup lang="ts">
import { authClient } from "~/lib/auth-client";

const { data: session } = await authClient.useSession(useFetch);
</script>

<template>
    <p>
        {{ session }}
    </p>
</template>

中间件

要为您的 Nuxt 项目添加中间件，您可以使用来自客户端的 useSession 方法。

middleware/auth.global.ts
import { authClient } from "~/lib/auth-client";
export default defineNuxtRouteMiddleware(async (to, from) => {
	const { data: session } = await authClient.useSession(useFetch); 
	if (!session.value) {
		if (to.path === "/dashboard") {
			return navigateTo("/");
		}
	}
});

资源与示例

Edit on GitHub

Previous Page

Next.js

Next Page

SvelteKit

On this page