Astro 集成

Better Auth 对Astro提供完整的支持。本指南将向你展示如何将 Better Auth 与 Astro 集成。

在开始之前,请确保你已经配置了Better Auth实例。如果你尚未完成此操作,请查看安装指南

挂载处理程序

要使 Better Auth 能够处理请求,我们需要将处理程序挂载到一个捕获所有请求的 API 路由上。在 /pages/api/auth 目录下创建一个名为 [...all].ts 的文件,并添加以下代码:

pages/api/auth/[...all].ts
import { auth } from "~/auth";
import type { APIRoute } from "astro";
 
export const ALL: APIRoute = async (ctx) => {
	return auth.handler(ctx.request);
};

你可以在 better-auth 配置中更改路径,但建议保持为 /api/auth/[...all]

创建客户端

Astro 支持多种前端框架,因此你可以根据你使用的框架轻松导入客户端。

如果你没有使用前端框架,你仍然可以导入原生客户端。

lib/auth-client.ts
import { createAuthClient } from "better-auth/client"
export const authClient =  createAuthClient()

认证中间件

Astro Locals 类型

要为 Astro locals 设置类型,你需要在 env.d.ts 文件中进行设置。

env.d.ts
 
/// <reference path="../.astro/types.d.ts" />
 
declare namespace App {
    // 注意:'import {} from ""' 语法在 .d.ts 文件中不起作用。
    interface Locals {
        user: import("better-auth").User | null;
        session: import("better-auth").Session | null;
    }
}

中间件

要保护你的路由,你可以使用中间件中的 getSession 方法检查用户是否已认证,并使用我们之前设置的类型通过 Astro locals 设置用户和会话数据。首先在项目根目录创建一个 middleware.ts 文件,并参考以下示例:

middleware.ts
import { auth } from "@/auth";
import { defineMiddleware } from "astro:middleware";
 
export const onRequest = defineMiddleware(async (context, next) => {
    const isAuthed = await auth.api
        .getSession({
            headers: context.request.headers,
        })
 
    if (isAuthed) {
        context.locals.user = isAuthed.user;
        context.locals.session = isAuthed.session;
    } else {
        context.locals.user = null;
        context.locals.session = null;
    }
 
    return next();
});

.astro 文件中在服务器端获取会话

你可以使用 Astro.locals 检查用户是否有会话并从服务器端获取用户数据。以下是如何在 .astro 文件中获取会话的示例:

---
import { UserCard } from "@/components/user-card";
 
const session = () => {
    if (Astro.locals.session) {
        return Astro.locals.session;
    } else {
        // 如果用户未认证,重定向到登录页面
        return Astro.redirect("/login");
    }
}
 
---
 
<UserCard initialSession={session} />

On this page