如何用 useForgotPassword 在 Refine 中实现用户忘记密码流程【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine在 Refine 管理后台中忘记密码流程由两部分组成一个让用户提交邮箱的入口页面以及authProvider里真正负责发送重置链接的forgotPassword方法。refinedev/core提供的useForgotPasswordHook 是自定义页面处理这一流程的入口它底层调用authProvider的forgotPassword方法。完成这个流程有两条路径直接使用 Refine 默认的AuthPage typeforgotPassword /页面或者用useForgotPassword自己实现表单页面。两条路径共用同一个前提——先实现并接入authProvider。准备条件实现并接入 authProvider一个已安装refinedev/core的 Refine 应用。把authProvider作为 prop 传给Refine /import { Refine } from refinedev/core; import authProvider from ./auth-provider; const App () { return Refine authProvider{authProvider} /; };官方文档明确说明authProvider不是 Refine 运行的必需项但如果不提供应用将不具备任何认证能力你无法使用任何 auth hooks 或 componentsuseForgotPassword也不例外。第一步在 authProvider 中实现 forgotPassword 方法forgotPassword是authProvider的可选方法之一其余可选方法包括register、updatePassword等login、check、logout、onError为必需方法。它的作用是把密码重置链接发送到用户邮箱预期返回一个已 resolve 的 promise类型为type SuccessNotificationResponse { message: string; description?: string; }; type AuthActionResponse { success: boolean; redirectTo?: string; error?: Error; [key: string]: unknown; successNotification?: SuccessNotificationResponse; };各字段的作用success操作是否成功。为false时会显示错误通知。redirectTo有值时应用会跳转到该 URL。error有值时通知会显示其中的错误name和message。successNotification提供时会显示成功通知。[key: string]可以附带任意额外数据。文档给出的示例实现如下import { AuthProvider } from refinedev/core; const authProvider: AuthProvider { // --- forgotPassword: async ({ email }) { // send password reset link to the users email address here // if request is successful return { success: true, redirectTo: /login, }; // if request is not successful return { success: false, error: { name: Forgot Password Error, message: Email address does not exist, }, }; }, // --- };代码中的// ---代表authProvider上已有的其他方法必需方法login、check、logout、onError等你只需在现有对象中补上forgotPassword一项。email之外的参数不受限制方法可以接收任意参数。第二条路径默认使用如果不需要自定义界面Refine 提供了默认的忘记密码页面手动处理整个流程。只需注册路由import { AuthPage } from refinedev/core; // ... Route path/forgot-password element{AuthPage typeforgotPassword /} /表单提交后authProvider的forgotPassword方法会带着表单值用户填写的email被调用与自定义页面走的是同一条后端逻辑。与登录页的衔接由两个 prop 控制forgotPasswordLink仅login类型可用定义登录页上忘记密码链接的地址默认值是/forgot-password也可以传一个自定义节点。loginLink仅register和forgotPassword类型可用定义页面上返回登录页的链接默认值是/login。另外AuthPage的mutationVariablesprop 可以向authProvider方法传递表单之外的额外变量所有类型均支持例如mutationVariables{{ foo: bar }}方法内即可解构得到foo。第三条路径自定义用 useForgotPassword 构建自己的页面需要自定义界面时用useForgotPasswordHook 处理提交流程。Hook 从refinedev/core导入import { useForgotPassword } from refinedev/core; type forgotPasswordVariables { email: string; }; export const ForgotPasswordPage () { const { mutate: forgotPassword } useForgotPasswordforgotPasswordVariables(); const onSubmit (e: React.FormEventHTMLFormElement) { e.preventDefault(); const values { email: e.currentTarget.email.value, }; forgotPassword(values); }; return ( form onSubmit{onSubmit} labelEmail/label input nameemail valuetestrefine.com / button typesubmitSubmit/button /form ); };示例中的表单是文档给出的原生 HTML 简写实际项目可以换成你使用的表单组件库。mutate可以接收任意对象作为 values因为authProvider的forgotPassword方法对参数没有限制如果想约束类型通过泛型参数声明即可import { useForgotPassword } from refinedev/core; const { mutate: forgotPassword } useForgotPassword{ email: string }();控制提交后的跳转有两种方式指定提交后的跳转目标。方式一直接在forgotPassword方法里返回固定的redirectTo如/login。方式二调用mutate时传入redirectPath由方法读取后再作为redirectTo返回这样跳转目标可以按请求动态决定import { useForgotPassword } from refinedev/core; const { mutate: forgotPassword } useForgotPassword(); forgotPassword({ redirectPath: /custom-url });import type { AuthProvider } from refinedev/core; const authProvider: AuthProvider { // ... forgotPassword: async ({ redirectPath }) { // ... return { success: true, redirectTo: redirectPath, successNotification: { message: Password reset successful, description: Your password has been successfully reset., }, }; }, };结果判断与错误处理useForgotPassword返回的是 react-queryuseMutation的结果包含isSuccess、isError等状态属性forgotPassword方法解析出的返回值作为查询结果中的data。提交后 Refine 会按data中的字段自动执行以下行为success: false自动显示错误通知。如果返回了error通知内容取其name和message如果没有error则显示通用错误name为Forgot Password Error。提供了successNotification显示成功通知。redirectTo有值应用跳转到该 URL。业务失败要在onSuccess回调里通过data.success判断import { useForgotPassword } from refinedev/core; const { mutate: forgotPassword } useForgotPassword(); forgotPassword( { email: refineexample.com, }, { onSuccess: (data) { if (!data.success) { // handle error } // handle success }, }, );这里有一个文档明确警告的坑authProvider的方法永远返回已 resolve 的 promise所以success为false时onError回调不会触发它只在 promise 真正 reject 时触发。如果你依赖onError来捕获邮箱不存在这类业务失败是捕获不到的必须在onSuccess里检查data.success。一个需要留意的细节Hook 文档给出的通用错误值是{ name: Forgot Password Error, message: Invalid credentials }而当前仓库源码 useForgotPassword 实现 中未提供error时的默认描述是Error while resetting password。两处文案不一致具体措辞以你安装的版本为准不要写依赖该通用文案的断言。边界与限制没有authProvider时useForgotPassword与所有 auth hooks/components 都不可用这是整个流程的硬性前提。forgotPassword是可选方法只打算使用默认AuthPage页面时同样需要它因为页面提交后调用的就是它。默认页面已经完整处理了流程包括成功/失败通知Hook 只在自定义页面时才需要引入两条路径按界面需求二选一即可不需要同时存在。相关文档useForgotPassword HookAuth Provider 指南含 forgotPassword 方法说明AuthPage 组件默认忘记密码页面useForgotPassword 源码【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考