Astro 集成
将 Better Auth 集成到 Astro 中。
Better Auth 原生支持 Astro。本指南将向你展示如何将 Better Auth 集成到 Astro 中。
在开始之前，请确保你已经配置了 Better Auth 实例。如果还没有，请查看安装指南。
挂载处理器
为了让 Better Auth 处理请求，我们需要将处理器挂载到一个通用的 API 路由上。在 /pages/api/auth 目录下创建一个名为 [...all].ts 的文件，并添加以下代码：
import { auth } from "~/auth";
import type { APIRoute } from "astro";
export const ALL: APIRoute = async (ctx) => {
// 如果你想启用限流，请确保在上下文请求头中设置了 'x-forwarded-for' 头部
// ctx.request.headers.set("x-forwarded-for", ctx.clientAddress);
return auth.handler(ctx.request);
};你可以更改 better-auth 配置中的路径，但建议保持为 /api/auth/[...all]
创建客户端
Astro 支持多种前端框架，因此你可以根据所使用的框架方便地导入客户端。
import { createAuthClient } from "better-auth/react"
export const authClient = createAuthClient()认证中间件
Astro Locals 类型
为了使你的 Astro locals 有类型定义，需要在 env.d.ts 文件中进行设置。
/// <reference path="../.astro/types.d.ts" />
declare namespace App {
// 注意：.d.ts 文件中不支持 'import {} from ""' 语法。
interface Locals {
user: import("better-auth").User | null;
session: import("better-auth").Session | null;
}
}中间件
为了保护你的路由，你可以在中间件中使用 getSession 方法检查用户是否已认证，并使用之前设定的类型通过 Astro locals 设置用户和会话数据。首先在项目根目录创建一个 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} />