文章目录Remix AuthRemix 和 React Router 应用的认证方案解决什么问题怎么用进阶玩法自定义策略总结Remix AuthRemix 和 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 AuthenticatorUser();注册策略也简单。比如用 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;透传。退出登录直接销毁 sessionexport 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 生态提供一套原生认证方案。策略模式让扩展性很好你可以直接使用已有策略也可以写自己的。项目文档写得很清楚从安装到自定义策略都有示例上手成本低。
文章目录Remix AuthRemix 和 React Router 应用的认证方案解决什么问题怎么用进阶玩法自定义策略总结Remix AuthRemix 和 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 AuthenticatorUser();注册策略也简单。比如用 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;透传。退出登录直接销毁 sessionexport 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 生态提供一套原生认证方案。策略模式让扩展性很好你可以直接使用已有策略也可以写自己的。项目文档写得很清楚从安装到自定义策略都有示例上手成本低。
