SuperAPI AI 工具集

clerk-react-router-patterns

编程与开发

查看项目

更新于 10-16 01:15

技能介绍

用途:该技能整理 React Router v7 与 Clerk 的集成模式,基于 @clerk/react-router v3+,要求 React Router v7.9+。

主要能力:涵盖在 loader 与 action 中鉴权、受保护路由与重定向、SSR 用户数据与会话、组织切换,并给出常见陷阱与修复。

核心模型:React Router v7 使用 middleware + loader 管线,Clerk 接入两层。clerkMiddleware() 在每个请求上运行并把鉴权附加到 context;rootAuthLoader 在 root.tsx 中必需,用于把 Clerk 状态传给客户端;getAuth(args) 在任意 loader/action 中调用以获取当前用户。

最小用法:在 root.tsx 的 loader 中调用 rootAuthLoader(args),默认导出用 ClerkApp 包裹;在根路由或 entry.server.ts 导出 middleware = [clerkMiddleware()]。注意:rootAuthLoader 必须在 root.tsx 的 loader 中调用,否则嵌套 loader 中 getAuth 会抛错。

鉴权示例:loader 中 const { userId } = await getAuth(args),无 userId 时 throw redirect('/sign-in');action 中可同时取 userId 与 orgId,未登录返回 401。客户端组件使用 useAuth、useUser;组织切换使用 OrganizationSwitcher,并设置 afterSelectOrganizationUrl。

常见问题:未检测到 clerkMiddleware 时需从根路由导出 middleware;getAuth 返回空 userId 通常是未调用 rootAuthLoader;无限重定向需把 /sign-in 排除在保护检查外;action 中重定向应使用 throw redirect('/path') 而非 Response。

导入来源:getAuth、rootAuthLoader、clerkMiddleware 来自 @clerk/react-router/server;ClerkApp、useAuth、useUser、OrganizationSwitcher 来自 @clerk/react-router。

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