Refine useRegister 详解基于 authProvider 实现自定义注册流程3.x API Reference【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine本文围绕 refine 3.x API Reference 中的useRegister数据钩子展开讲清它如何作为 react-queryuseMutation的封装去调用authProvider的register方法以及注册成功后的登录衔接、URL 重定向的三种控制方式。读完本文你可以在 refine 应用中构建自定义注册页精确控制注册成功后的跳转行为并从源码层面理解该钩子的执行链路。一、useRegister 是什么authProvider.register 的 useMutation 封装useRegister本质上是对 react-queryTanStack QueryuseMutation的改造版本专门用于处理“注册”这一变更操作。它的行为定义如下引自 3.x 版本文档底层调用authProvider的register方法若register返回的 Promise 成功 resolve则注册成功若 reject则抛出错误并显示错误通知钩子返回 react-queryuseMutation的结果对象register方法 resolve 出的数据会作为查询结果中的data返回。在 refine 的认证钩子体系中useRegister与useLogin、useLogout、useForgotPassword、useUpdatePassword等并列共同覆盖完整的认证操作面。从当前仓库源码的导出结构看auth hooks 导出文件这些钩子统一由packages/core/src/hooks/auth目录组织维护注册、登录、登出、忘记密码各占一个模块彼此结构对称便于对照理解。对应地register在authProvider中属于可选方法与login、logout、check、onError等必选方法不同只有当你的authProvider实现了register时useRegister才有意义——文档也明确提示该钩子只有在提供了authProvider时才能使用。二、基础用法构建自定义注册页通常情况下 refine 会提供一个默认的注册页default register page。如果你使用默认注册页就无需手动处理注册流程只有当你希望构建替代默认页的自定义注册页时才需要直接使用useRegister。文档给出的完整示例如下pages/customRegisterPageimport { useRegister } from pankod/refine-core; type RegisterVariables { email: string; password: string; }; export const RegisterPage () { const { mutate: register } useRegisterRegisterVariables(); const onSubmit (values: RegisterVariables) { register(values); }; return ( form onSubmit{onSubmit} labelEmail/label input nameemail valuetestrefine.com / labelPassword/label input namepassword valuerefine / button typesubmitSubmit/button /form ); };调用链可以概括为表单提交 → 取出useRegister返回的mutate并命名为register→ 以表单值作为参数触发变更 → 钩子内部调用authProvider.register(values)→ 成功/失败分别触发 resolve 与错误通知。类型参数为 mutate 的参数建模文档特别指出一个实用细节authProvider的register方法对其参数没有限制因此useRegister拿到的mutate可以接受任意对象作为 values。为了让 TypeScript 帮你约束参数结构可以通过类型参数为 values 声明类型const { mutate: register } useRegister{ email: string; password: string }();这一点在实现自定义注册页时非常有用注册参数除了email/password外还可以携带用户名、手机号、组织 ID 等任意字段类型参数让你在前端侧获得完整的参数补全与校验。三、注册成功后自动登录useRegister 与 useLogin 的衔接一个常见的业务需求是用户完成注册后立即进入已登录状态而不是停留在“注册成功请登录”的中间态。文档给出的方案是在useRegister钩子的onSuccess回调中调用useLogin钩子复用同一份表单数据完成登录import { useRegister, useLogin } from pankod/refine-core; type FormVariables { email: string; password: string; }; export const RegisterPage () { const { mutate: register } useRegisterFormVariables(); const { mutate: login } useLoginFormVariables(); const onSubmit (values: FormVariables) { register(values, { //highlight-start onSuccess: () { login(values); }, //highlight-end }); }; return ( form onSubmit{onSubmit} labelEmail/label input nameemail valuetestrefine.com / labelPassword/label input namepassword valuerefine / button typesubmitSubmit/button /form ); };这里体现了useRegister作为useMutation封装的关键能力mutate的第二个参数透传 react-query 的 mutation options因此onSuccess、onError等标准回调都可直接使用。由于两个钩子的类型参数同为FormVariables注册值可以无损地传递给登录调用无需额外转换。四、注册成功后的重定向三种可控路径文档给出了注册成功后应用跳转的全部控制方式共三类全部由authProvider中register方法返回的 Promise 决定1. 从 register 的 Promise 中 resolve 一个自定义 URL在authProvider的register方法里直接返回目标路径即可让应用注册成功后跳转到该地址const authProvider: AuthProvider { ... register: () { ... return Promise.resolve(/custom-url); } }2. 通过 mutate 的 redirectPath 参数动态指定如果希望跳转地址由页面侧决定而非写死在 provider 中可以给useRegister返回的mutate传入包含redirectPath字段的参数对象import { useRegister } from pankod/refine-core; const { mutate: register } useRegister(); register({ redirectPath: /custom-url });然后在authProvider的register方法中读取该字段并返回它const authProvider: AuthProvider { ... register: ({ redirectPath }) { ... return Promise.resolve(redirectPath); } }这种“页面给值、provider 透传”的模式适合需要根据当前上下文如注册来源、组织上下文动态计算落地页的场景。3. resolve false 或无值不跳转 / 默认跳转若register返回的 Promise 以falseresolve则不发生任何重定向const authProvider: AuthProvider { ... register: () { ... return Promise.resolve(false); } }若 Promise resolve 时没有返回值应用会默认重定向到/根路由。汇总注册后的重定向行为表register 的 Promise 结果应用行为resolve 为 URL 字符串跳转到该 URLresolve 为false不跳转停留在当前页resolve 为无值默认跳转到/reject抛出错误并显示错误通知这一表格是 3.xuseRegister行为契约的核心编写authProvider.register时应以它为准。五、默认注册页不用 useRegister 也能注册文档提到 refine 自带默认注册页这一点在当前仓库中可以得到印证核心包的注册页组件packages/core/src/components/pages/auth/components/register/index.tsx就是 refine 内置的注册页实现。从该组件源码结构看它内部同样调用useRegister获取mutate: register与isPending说明默认页与自定义页共享同一套底层钩子表单提交时以{ ...mutationVariables, email, password }调用register即除邮箱密码外还会合并mutationVariables透传参数支持providers第三方登录按钮点击时携带providerName调用register、hideForm、loginLink等可定制点并通过useTranslate支持国际化文案。因此“默认注册页 vs 自定义注册页”的取舍可以这样把握布局、第三方登录、i18n 文案满足需求时用默认页需要品牌化表单、额外字段或复杂校验时用useRegister自建页面两者在数据流层面完全一致。六、源码级实现佐证当前主分支3.x 文档描述的是版本化行为当前仓库主分支v5 世代中useRegister的实现在 useRegister 源码 中可以看到更完整的结构值得对照阅读以理解该钩子“做了哪些事”钩子基于 TanStack Query 的useMutation构建mutationFn即authProvider上下文中取出的register方法成功路径上关闭残留的register-error通知、按需打开成功通知、按响应中的目标地址执行go({ to: ..., type: replace })导航、并在成功后延迟刷新认证存储invalidate auth store失败路径上统一构造key: register-error、type: error的错误通知默认消息为 Register Error / Error while registering钩子参数支持mutationOptions即除mutationFn外的标准 mutation 选项均可透传覆盖。需要注意版本差异当前主分支中register的返回类型收敛为AuthActionResponse见 auth 类型定义形如{ success: boolean; redirectTo?: string; error?: RefineError | Error; successNotification?: { message: string; description?: string } }重定向地址改由响应体的redirectTo字段承载而非 3.x 中“resolve URL / false / 无值”的三种取值约定。本文第四节的三种重定向方式以 3.x 版本文档为准如果你基于主分支版本开发请改用AuthActionResponse的success/redirectTo字段判断。配套的测试文件 useRegister 单测 完整覆盖了上述行为可作为行为契约的可验证依据成功注册且带redirectTo: /时断言导航被以{ to: /, type: replace }调用成功注册但无重定向字段时断言导航函数未被调用对应“无值则不跳转”注册返回success: false携带error时data中可取到错误对象error存在、success为 false 且无 error、以及方法直接 throw 三种失败场景都会打开key: register-error的 error 通知消息与描述回退到 Register Error / Error while registering传入successNotification时打开key: register-success的成功通知mutationOptions.mutationFn/mutationOptions.mutationKey可覆盖默认实现与默认 mutation key。七、使用前提与注意事项必须提供 authProvideruseRegister只有在应用注入了authProvider且其实现了register方法时才有意义未提供时该钩子不可用文档以 caution 明确提示。参数无 schema 约束mutate接受任意对象字段结构由你的类型参数如RegisterVariables自行约束后端字段校验仍需在authProvider.register内完成。失败语义按 3.x 约定register的 Promise reject 会使钩子抛错并弹出错误通知编写自定义注册页时可结合onError回调做表单级错误展示。版本对齐3.x 的重定向协议resolve URL /false/ 无值与主分支AuthActionResponsesuccessredirectTo是两套约定迁移时请同步修改authProvider.register的返回值。小结useRegister是 refine 认证钩子族中面向注册场景的变更钩子它以useMutation为底座把authProvider.register的调用、成功/失败通知与重定向统一封装成一个mutate调用。配合useLogin可在注册成功后无缝进入登录态配合authProvider.register的返回值约定可以精确控制注册后“跳哪、跳不跳”。当内置默认注册页无法满足表单与交互需求时基于useRegister构建自定义注册页是 3.x refine 应用中的标准做法。【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Refine useRegister 详解：基于 authProvider 实现自定义注册流程（3.x API Reference）
Refine useRegister 详解基于 authProvider 实现自定义注册流程3.x API Reference【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine本文围绕 refine 3.x API Reference 中的useRegister数据钩子展开讲清它如何作为 react-queryuseMutation的封装去调用authProvider的register方法以及注册成功后的登录衔接、URL 重定向的三种控制方式。读完本文你可以在 refine 应用中构建自定义注册页精确控制注册成功后的跳转行为并从源码层面理解该钩子的执行链路。一、useRegister 是什么authProvider.register 的 useMutation 封装useRegister本质上是对 react-queryTanStack QueryuseMutation的改造版本专门用于处理“注册”这一变更操作。它的行为定义如下引自 3.x 版本文档底层调用authProvider的register方法若register返回的 Promise 成功 resolve则注册成功若 reject则抛出错误并显示错误通知钩子返回 react-queryuseMutation的结果对象register方法 resolve 出的数据会作为查询结果中的data返回。在 refine 的认证钩子体系中useRegister与useLogin、useLogout、useForgotPassword、useUpdatePassword等并列共同覆盖完整的认证操作面。从当前仓库源码的导出结构看auth hooks 导出文件这些钩子统一由packages/core/src/hooks/auth目录组织维护注册、登录、登出、忘记密码各占一个模块彼此结构对称便于对照理解。对应地register在authProvider中属于可选方法与login、logout、check、onError等必选方法不同只有当你的authProvider实现了register时useRegister才有意义——文档也明确提示该钩子只有在提供了authProvider时才能使用。二、基础用法构建自定义注册页通常情况下 refine 会提供一个默认的注册页default register page。如果你使用默认注册页就无需手动处理注册流程只有当你希望构建替代默认页的自定义注册页时才需要直接使用useRegister。文档给出的完整示例如下pages/customRegisterPageimport { useRegister } from pankod/refine-core; type RegisterVariables { email: string; password: string; }; export const RegisterPage () { const { mutate: register } useRegisterRegisterVariables(); const onSubmit (values: RegisterVariables) { register(values); }; return ( form onSubmit{onSubmit} labelEmail/label input nameemail valuetestrefine.com / labelPassword/label input namepassword valuerefine / button typesubmitSubmit/button /form ); };调用链可以概括为表单提交 → 取出useRegister返回的mutate并命名为register→ 以表单值作为参数触发变更 → 钩子内部调用authProvider.register(values)→ 成功/失败分别触发 resolve 与错误通知。类型参数为 mutate 的参数建模文档特别指出一个实用细节authProvider的register方法对其参数没有限制因此useRegister拿到的mutate可以接受任意对象作为 values。为了让 TypeScript 帮你约束参数结构可以通过类型参数为 values 声明类型const { mutate: register } useRegister{ email: string; password: string }();这一点在实现自定义注册页时非常有用注册参数除了email/password外还可以携带用户名、手机号、组织 ID 等任意字段类型参数让你在前端侧获得完整的参数补全与校验。三、注册成功后自动登录useRegister 与 useLogin 的衔接一个常见的业务需求是用户完成注册后立即进入已登录状态而不是停留在“注册成功请登录”的中间态。文档给出的方案是在useRegister钩子的onSuccess回调中调用useLogin钩子复用同一份表单数据完成登录import { useRegister, useLogin } from pankod/refine-core; type FormVariables { email: string; password: string; }; export const RegisterPage () { const { mutate: register } useRegisterFormVariables(); const { mutate: login } useLoginFormVariables(); const onSubmit (values: FormVariables) { register(values, { //highlight-start onSuccess: () { login(values); }, //highlight-end }); }; return ( form onSubmit{onSubmit} labelEmail/label input nameemail valuetestrefine.com / labelPassword/label input namepassword valuerefine / button typesubmitSubmit/button /form ); };这里体现了useRegister作为useMutation封装的关键能力mutate的第二个参数透传 react-query 的 mutation options因此onSuccess、onError等标准回调都可直接使用。由于两个钩子的类型参数同为FormVariables注册值可以无损地传递给登录调用无需额外转换。四、注册成功后的重定向三种可控路径文档给出了注册成功后应用跳转的全部控制方式共三类全部由authProvider中register方法返回的 Promise 决定1. 从 register 的 Promise 中 resolve 一个自定义 URL在authProvider的register方法里直接返回目标路径即可让应用注册成功后跳转到该地址const authProvider: AuthProvider { ... register: () { ... return Promise.resolve(/custom-url); } }2. 通过 mutate 的 redirectPath 参数动态指定如果希望跳转地址由页面侧决定而非写死在 provider 中可以给useRegister返回的mutate传入包含redirectPath字段的参数对象import { useRegister } from pankod/refine-core; const { mutate: register } useRegister(); register({ redirectPath: /custom-url });然后在authProvider的register方法中读取该字段并返回它const authProvider: AuthProvider { ... register: ({ redirectPath }) { ... return Promise.resolve(redirectPath); } }这种“页面给值、provider 透传”的模式适合需要根据当前上下文如注册来源、组织上下文动态计算落地页的场景。3. resolve false 或无值不跳转 / 默认跳转若register返回的 Promise 以falseresolve则不发生任何重定向const authProvider: AuthProvider { ... register: () { ... return Promise.resolve(false); } }若 Promise resolve 时没有返回值应用会默认重定向到/根路由。汇总注册后的重定向行为表register 的 Promise 结果应用行为resolve 为 URL 字符串跳转到该 URLresolve 为false不跳转停留在当前页resolve 为无值默认跳转到/reject抛出错误并显示错误通知这一表格是 3.xuseRegister行为契约的核心编写authProvider.register时应以它为准。五、默认注册页不用 useRegister 也能注册文档提到 refine 自带默认注册页这一点在当前仓库中可以得到印证核心包的注册页组件packages/core/src/components/pages/auth/components/register/index.tsx就是 refine 内置的注册页实现。从该组件源码结构看它内部同样调用useRegister获取mutate: register与isPending说明默认页与自定义页共享同一套底层钩子表单提交时以{ ...mutationVariables, email, password }调用register即除邮箱密码外还会合并mutationVariables透传参数支持providers第三方登录按钮点击时携带providerName调用register、hideForm、loginLink等可定制点并通过useTranslate支持国际化文案。因此“默认注册页 vs 自定义注册页”的取舍可以这样把握布局、第三方登录、i18n 文案满足需求时用默认页需要品牌化表单、额外字段或复杂校验时用useRegister自建页面两者在数据流层面完全一致。六、源码级实现佐证当前主分支3.x 文档描述的是版本化行为当前仓库主分支v5 世代中useRegister的实现在 useRegister 源码 中可以看到更完整的结构值得对照阅读以理解该钩子“做了哪些事”钩子基于 TanStack Query 的useMutation构建mutationFn即authProvider上下文中取出的register方法成功路径上关闭残留的register-error通知、按需打开成功通知、按响应中的目标地址执行go({ to: ..., type: replace })导航、并在成功后延迟刷新认证存储invalidate auth store失败路径上统一构造key: register-error、type: error的错误通知默认消息为 Register Error / Error while registering钩子参数支持mutationOptions即除mutationFn外的标准 mutation 选项均可透传覆盖。需要注意版本差异当前主分支中register的返回类型收敛为AuthActionResponse见 auth 类型定义形如{ success: boolean; redirectTo?: string; error?: RefineError | Error; successNotification?: { message: string; description?: string } }重定向地址改由响应体的redirectTo字段承载而非 3.x 中“resolve URL / false / 无值”的三种取值约定。本文第四节的三种重定向方式以 3.x 版本文档为准如果你基于主分支版本开发请改用AuthActionResponse的success/redirectTo字段判断。配套的测试文件 useRegister 单测 完整覆盖了上述行为可作为行为契约的可验证依据成功注册且带redirectTo: /时断言导航被以{ to: /, type: replace }调用成功注册但无重定向字段时断言导航函数未被调用对应“无值则不跳转”注册返回success: false携带error时data中可取到错误对象error存在、success为 false 且无 error、以及方法直接 throw 三种失败场景都会打开key: register-error的 error 通知消息与描述回退到 Register Error / Error while registering传入successNotification时打开key: register-success的成功通知mutationOptions.mutationFn/mutationOptions.mutationKey可覆盖默认实现与默认 mutation key。七、使用前提与注意事项必须提供 authProvideruseRegister只有在应用注入了authProvider且其实现了register方法时才有意义未提供时该钩子不可用文档以 caution 明确提示。参数无 schema 约束mutate接受任意对象字段结构由你的类型参数如RegisterVariables自行约束后端字段校验仍需在authProvider.register内完成。失败语义按 3.x 约定register的 Promise reject 会使钩子抛错并弹出错误通知编写自定义注册页时可结合onError回调做表单级错误展示。版本对齐3.x 的重定向协议resolve URL /false/ 无值与主分支AuthActionResponsesuccessredirectTo是两套约定迁移时请同步修改authProvider.register的返回值。小结useRegister是 refine 认证钩子族中面向注册场景的变更钩子它以useMutation为底座把authProvider.register的调用、成功/失败通知与重定向统一封装成一个mutate调用。配合useLogin可在注册成功后无缝进入登录态配合authProvider.register的返回值约定可以精确控制注册后“跳哪、跳不跳”。当内置默认注册页无法满足表单与交互需求时基于useRegister构建自定义注册页是 3.x refine 应用中的标准做法。【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考