Remix Auth：Remix 和 React Router 应用的认证方案

Remix Auth：Remix 和 React Router 应用的认证方案

Remix Auth 是一个开源的认证库，专为 Remix 和 React Router 应用设计。项目由 Sergio Xalambrí 维护，在 GitHub 上获得 2,200+ Star。

解决什么问题

Remix 和 React Router 应用需要一套完整的服务端认证机制。很多开发者用 Passport.js，但那套是为 Express 设计的，不兼容 Web Fetch API。Remix Auth 的思路和 Passport.js 一样，但全部重写，跑在 Web Fetch API 上。

核心设计是策略模式。每种认证方式独立打包，按需安装。官方提供了 Form、OAuth 2.0、GitHub 等策略，社区也维护了更多。

怎么用

安装就一行命令：

npm install remix-auth

引入Authenticator类，传入用户数据类型，实例化。再用createCookieSessionStorage创建会话存储：

import { Authenticator } from "remix-auth"; import { createCookieSessionStorage } from "react-router"; type User = { id: string; email: string; name: string }; export const sessionStorage = createCookieSessionStorage({ cookie: { name: "__session", httpOnly: true, path: "/", sameSite: "lax", secrets: ["s3cr3t"], secure: process.env.NODE_ENV === "production", }, }); export const authenticator = new Authenticator<User>();

注册策略也简单。比如用 FormStrategy 做账号密码登录：

import { FormStrategy } from "remix-auth-form"; authenticator.use( new FormStrategy(async ({ form }) => { const email = form.get("email") as string; const password = form.get("password") as string; return await login(email, password); }), "user-pass", );

然后在路由的 action 里调用authenticator.authenticate，验证通过后把用户数据存到 session，重定向到首页或看板页。

进阶玩法

根据用户数据做不同跳转。比如新用户走引导流程，老用户直接进看板，在 action 里判断后分别 redirect 即可。

错误处理方面，认证失败会抛出异常，在 catch 块里拦截处理。OAuth 流程中策略可能抛出 redirect 响应，记得用if (error instanceof Response) throw error;透传。

退出登录直接销毁 session：

export async function action({ request }) { let session = await sessionStorage.getSession(request.headers.get("cookie")); return redirect("/login", { headers: { "Set-Cookie": await sessionStorage.destroySession(session) }, }); }

保护路由也不复杂，写个authenticate辅助函数，loader 里检查 session 中有没有用户数据，没有就扔回登录页。

自定义策略

所有策略继承Strategy抽象类，实现自己的authenticate方法。如果需要存中间状态，用SetCookie写入 cookie 到浏览器，下次请求用Cookie对象读回来。

更高级的用法是用AsyncLocalStorage传递额外数据给 authenticate 方法。

总结

Remix Auth 的定位很明确：给 Remix 和 React Router 生态提供一套原生认证方案。策略模式让扩展性很好，你可以直接使用已有策略，也可以写自己的。项目文档写得很清楚，从安装到自定义策略都有示例，上手成本低。

和 React Router 生态提供一套原生认证方案。策略模式让扩展性很好，你可以直接使用已有策略，也可以写自己的。项目文档写得很清楚，从安装到自定义策略都有示例，上手成本低。