SuperAPI AI 工具集

clerk-astro-patterns

编程与开发

查看项目

更新于 10-16 01:16

技能介绍

用途:为在 Astro 中使用 Clerk 认证提供模式参考,覆盖中间件配置、SSR 页面保护、岛屿组件认证、API 路由鉴权,以及 React 在 Astro 中的用法。

主要能力与心智模型:Astro 每页有两种渲染模式。SSR 页面通过 Astro.locals.auth() 获取由中间件填充的认证信息;静态预渲染页面(export const prerender = true)会跳过 Clerk 中间件,需在岛屿中使用客户端钩子;岛屿(React/Vue/Svelte 组件)使用 @clerk/astro/react 的 useAuth() 等钩子。请求流程为 clerkMiddleware() → SSR 页面 → Astro.locals.auth(),岛屿则走 useAuth() 钩子。

必要用法:在 astro.config.mjs 中引入 clerk() 集成并设置 output: 'server';在 src/middleware.ts 中使用 clerkMiddleware 与 createRouteMatcher 保护路由,未登录时调用 redirectToSignIn()。SSR 页面用 Astro.locals.auth() 取 userId、orgId,未登录可 Astro.redirect('/sign-in')。环境变量使用 PUBLIC_CLERK_PUBLISHABLE_KEY 与 CLERK_SECRET_KEY,注意 Astro 用 PUBLIC_ 前缀而非 NEXT_PUBLIC_。导入来源:@clerk/astro/server 提供 clerkMiddleware、createRouteMatcher;@clerk/astro/react 提供 useAuth、useUser、UserButton;@clerk/astro/components 提供 SignIn 等组件。

常见问题:Astro.locals.auth 未定义通常是缺少中间件;开发正常但生产失效多为全局 output: 'static';静态页面无认证因预渲染跳过中间件;岛屿不响应登录状态多因缺少 client:load 指令。

限制:资料未提供收费、价格、平台支持范围与效果数据,暂未提供。