refine Ant DesignAuthPage组件实战登录、注册与密码重置页的类型、Props 与源码解析【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine本文围绕 refine 中 Ant Design 集成的AuthPage组件展开完整讲解其四种页面类型login / register / forgotPassword / updatePassword的路由接入方式、全部 Propsproviders、rememberMe、各导航链接、wrapperProps、contentProps、formProps、renderContent的用法与默认值并结合当前仓库源码说明表单提交到authProvider的完整调用链帮助你在基于 refine 构建后台系统时快速搭建可定制的全套认证页面。组件概述AuthPage是 refine 为Ant Design提供的认证页面组件一个组件即可承载登录、注册、忘记密码和更新密码四种页面通过type属性区分type 值用途表单字段源码确认login登录页默认类型email、password、remember初始值falseregister注册页email、passwordforgotPassword忘记密码页emailupdatePassword更新密码页password、confirmPassword含两次输入一致性校验从源码结构看AuthPage 入口 本身只是一个分发器export const AuthPage: React.FCAuthProps (props) { const { type } props; const renderView () { switch (type) { case register: return RegisterPage {...props} /; case forgotPassword: return ForgotPasswordPage {...props} /; case updatePassword: return UpdatePasswordPage {...props} /; default: return LoginPage {...props} /; } }; return {renderView()}/; };四种页面分别实现于 login、register、forgotPassword、updatePassword 目录下公共视觉样式卡片最大宽度 400px、内边距 32px、标题 24px 等收敛在 styles.ts 中。使用前提必须先为Refine配置authProvider由它负责实际的登录、注册、改密逻辑。此外AuthPage支持Swizzle——可以通过refine CLI把该组件复制到你的项目中再在源码层面自由修改而不必只依赖 Props。基本用法将AuthPage作为LoginPage传给Refine并可在路由表中为注册、忘记密码页面各挂一条路由import { Refine } from pankod/refine-core; import { AuthPage, Layout } from pankod/refine-antd; import routerProvider from pankod/refine-react-router-v6; import { authProvider } from ./authProvider; import { DashboardPage } from ./pages/dashboard; const App () { return ( Refine routerProvider{{ ...routerProvider, routes: [ { path: /register, element: AuthPage typeregister /, }, { path: /forgot-password, element: AuthPage typeforgotPassword /, }, ], }} authProvider{authProvider} LoginPage{AuthPage} DashboardPage{DashboardPage} Layout{Layout} resources{[{ name: posts }]} / ); };说明两点LoginPage{AuthPage}未指定type因此默认渲染login类型路由通常为/loginregister、forgotPassword、updatePassword三种类型需要通过routes自行声明路径文档示例分别使用/register、/forgot-password、/update-password。四种类型详解Login默认登录页提交表单后会调用authProvider的login方法并传入表单值import { AuthProvider } from pankod/refine-core; const authProvider: AuthProvider { // -- login: async ({ email, password, remember, providerName }) { // You can handle the login process according to your needs. // If the process is successful. return Promise.resolve(); return Promise.reject(); }, // -- };从源码可以看到LoginPage的 email 字段同时带有“必填”和type: email两条校验规则password 字段必填表单onFinish中执行login({ ...values, ...mutationVariables })。其中mutationVariables是AuthPage支持的透传参数会把额外字段合并进authProvider.login的入参适合传租户、渠道等上下文。登录过程中的加载态由useLogin返回的isPending驱动提交按钮的loading属性。Register注册页通过typeregister渲染提交后调用authProvider.registerconst authProvider: AuthProvider { // -- register: async ({ email, password, providerName }) { // You can handle the register process according to your needs. return Promise.resolve(); return Promise.reject(); }, // -- };路由接入方式与基本用法一致const App () { return ( Refine authProvider{authProvider} routerProvider{{ ...routerProvider, routes: [ { path: /register, element: AuthPage typeregister /, }, ], }} LoginPage{AuthPage} DashboardPage{DashboardPage} Layout{Layout} resources{[{ name: posts }]} / ); };ForgotPasswordforgotPassword类型用于引导用户重置密码提交后调用authProvider.forgotPassword入参只有emailconst authProvider: AuthProvider { // -- forgotPassword: async ({ email }) { // You can handle the reset password process according to your needs. return Promise.resolve(); return Promise.reject(); }, // -- };UpdatePasswordupdatePassword类型用于用户已登录场景下修改密码。从源码看该表单包含password与confirmPassword两个字段后者通过dependencies: [password] 自定义 validator 实现“两次密码不一致则拒绝提交”的前端校验提交后调用authProvider.updatePasswordconst authProvider: AuthProvider { // -- updatePassword: async ({ password, confirmPassword }) { // You can handle the update password process according to your needs. return Promise.resolve(); return Promise.reject(); }, // -- };Props 详解providers仅对login和register两种类型可用。providers定义第三方登录OAuth按钮列表接收OAuthProvider[]数组。点击任一按钮不会走表单而是直接以providerName为参数调用对应的login/registerconst { GoogleOutlined, GithubOutlined } Icons; const App () { return ( Refine authProvider{authProvider} routerProvider{routerProvider} LoginPage{() ( AuthPage providers{[ { name: google, icon: GoogleOutlined /, label: Sign in with Google, }, { name: github, icon: GithubOutlined /, label: Sign in with GitHub, }, ]} / )} DashboardPage{DashboardPage} Layout{Layout} resources{[{ name: posts }]} / ); };数组元素结构由 core 包的 OAuthProvider 类型 定义interface OAuthProvider { name: string; icon?: React.ReactNode; label?: string; }源码中renderProviders()会为每个 provider 渲染一个block样式的 antdButton点击时执行login({ ...mutationVariables, providerName: provider.name })注册页同理调用register。只要providers非空且未隐藏表单组件还会自动在按钮与表单之间插入一条 or 分隔线。rememberMe仅对login类型可用。rememberMe用于渲染自定义的“记住我”组件传false可完全移除该组件。默认值是一个带Remember me文案的 antdCheckbox。自定义时有一个硬性约束必须用 antd 的Form.Item包裹并传入name这样它的值才会进入表单才能在formProps.onFinish的formValues中读到。从源码看默认实现的remember字段初始值为falseLoginPage{() ( AuthPage rememberMe{ div style{{ border: 1px dashed cornflowerblue, padding: 3 }} Form.Item nameremember valuePropNamechecked noStyle CheckboxCustom remember me/Checkbox /Form.Item /div } / )}loginLink仅对register和forgotPassword类型可用。定义“去登录”的链接节点也可以传任意 ReactNode 完全替换默认文案默认值是渲染到/login的链接。const Auth (props) { const { Link } useRouterContext(); return ( AuthPage {...props} loginLink{ div style{{ border: 1px dashed cornflowerblue, padding: 3 }} Link to/loginLogin/Link /div } / ); };registerLink仅对login类型可用。定义登录页底部“去注册”的链接默认渲染指向/register的链接文案 Dont have an account? Sign up。同样可以传任意节点const Auth (props) { const { Link } useRouterContext(); return ( AuthPage {...props} registerLink{ div style{{ border: 1px dashed cornflowerblue, marginTop: 5, padding: 5 }} Link to/registerRegister/Link /div } / ); };forgotPasswordLink仅对login类型可用。定义登录页“忘记密码”链接默认渲染指向/forgot-password的链接const Auth (props) { const { Link } useRouterContext(); return ( AuthPage {...props} forgotPasswordLink{ div style{{ border: 1px dashed cornflowerblue, marginTop: 5, padding: 5 }} Link to/forgot-passwordForgot Password/Link /div } / ); };wrapperProps透传给最外层包裹组件antdLayout的 props例如修改整页背景色LoginPage{() ( AuthPage wrapperProps{{ style: { background: #331049, }, }} / )}contentProps透传给内容卡片组件antdCard的 props可修改标题、头部与内容区样式LoginPage{() ( AuthPage contentProps{{ title: Login, headStyle: { background: cornflowerblue, color: white, }, bodyStyle: { background: #673ab742, }, }} / )}formProps透传给 antdForm的 props。典型用法包括修改initialValues与替换onFinish回调LoginPage{() ( AuthPage formProps{{ initialValues: { email: demorefine.dev, password: demo, }, onFinish: (formValues) alert(JSON.stringify(formValues, null, 2)), }} / )}注意默认onFinish会触发authProvider对应方法重写onFinish意味着接管整个提交逻辑需要自行处理认证调用。renderContentrenderContent接收默认的content卡片与title页头标题返回完全自定义的内容可在原有内容之外插入任意元素LoginPage{() ( AuthPage contentProps{{ style: { width: 400px, }, }} renderContent{(content: React.ReactNode) { return ( div style{{ display: flex, flexDirection: column, justifyContent: center, alignItems: center, }} h1 style{{ color: white }}Extra Header/h1 {content} h1 style{{ color: white }}Extra Footer/h1 /div ); }} / )}hideForm、title与mutationVariables补充在 core 包的 AuthPageProps 类型定义 中还能看到三个 Props 文档hideForm?: boolean—— 隐藏表单主体只保留 provider 按钮与链接适合纯 OAuth 登录页title?: React.ReactNode—— 替换卡片上方的页面标题设为false则完全不渲染mutationVariables?: Recordstring, any—— 额外变量会与表单值一起合并传给authProvider的对应方法。API ReferencePropertiesPropertyTypeDefaulttypelogin|register|forgotPassword|updatePasswordloginprovidersOAuthProvider[]-registerLinkReact.ReactNode指向/register的链接forgotPasswordLinkReact.ReactNode指向/forgot-password的链接loginLinkReact.ReactNode指向/login的链接rememberMeReact.ReactNodeCheckboxRemember me/CheckboxhideFormboolean-wrapperPropsLayoutPropsantd-contentPropsCardPropsantd-formPropsFormPropsantd-renderContent(content: ReactNode, title: ReactNode) ReactNode-titleReact.ReactNode-Interfaceinterface OAuthProvider { name: string; icon?: React.ReactNode; label?: string; }表单提交到 authProvider 的源码级调用链四种页面共用同一套机制以登录为例LoginPage内部通过 core 的useLogin获取 mutationconst { mutate: login, isPending } useLoginLoginFormTypes()antdForm的onFinish{(values) login({ ...values, ...mutationVariables })}把表单值提交给 mutation从 useLogin 实现 可以看到它基于 TanStack Query 的useMutation封装内部通过useAuthProviderContext()取出authProvider.login真正执行并配合useNotification展示成功/失败提示、用useGo处理登录成功后的路由跳转parsed.params?.to支持?to回跳参数register/forgotPassword/updatePassword页面分别使用useRegister/useForgotPassword/useUpdatePassword结构完全一致。所有文案均经过useTranslate的pages.login.*、pages.register.*等 i18n key因此接入国际化后页面文案可整体翻译。该组件的 UI 行为由 ui-tests 共享用例集 驱动验证pageLoginTests.bind(this)(LoginPage)保证各 UI 集成版本的认证页面行为一致。版本与依赖说明本文依据的是 refine 文档站3.xx.xx版本的 AuthPage API 文档示例中使用的包名为pankod/refine-core、pankod/refine-antd、pankod/refine-react-router-v6。当前仓库源码中对应实现位于 packages/antd导入来源已切换为refinedev/core但组件 API、路由接入方式与本文所有 Props 用法保持一致。文档标注该组件支持 Swizzle可通过 refine CLI 复制源码后深度定制如只需常规调整优先使用wrapperProps/contentProps/formProps/renderContent组合即可完成绝大多数视觉与交互定制。【免费下载链接】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 Ant DesignAuthPage组件实战登录、注册与密码重置页的类型、Props 与源码解析【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine本文围绕 refine 中 Ant Design 集成的AuthPage组件展开完整讲解其四种页面类型login / register / forgotPassword / updatePassword的路由接入方式、全部 Propsproviders、rememberMe、各导航链接、wrapperProps、contentProps、formProps、renderContent的用法与默认值并结合当前仓库源码说明表单提交到authProvider的完整调用链帮助你在基于 refine 构建后台系统时快速搭建可定制的全套认证页面。组件概述AuthPage是 refine 为Ant Design提供的认证页面组件一个组件即可承载登录、注册、忘记密码和更新密码四种页面通过type属性区分type 值用途表单字段源码确认login登录页默认类型email、password、remember初始值falseregister注册页email、passwordforgotPassword忘记密码页emailupdatePassword更新密码页password、confirmPassword含两次输入一致性校验从源码结构看AuthPage 入口 本身只是一个分发器export const AuthPage: React.FCAuthProps (props) { const { type } props; const renderView () { switch (type) { case register: return RegisterPage {...props} /; case forgotPassword: return ForgotPasswordPage {...props} /; case updatePassword: return UpdatePasswordPage {...props} /; default: return LoginPage {...props} /; } }; return {renderView()}/; };四种页面分别实现于 login、register、forgotPassword、updatePassword 目录下公共视觉样式卡片最大宽度 400px、内边距 32px、标题 24px 等收敛在 styles.ts 中。使用前提必须先为Refine配置authProvider由它负责实际的登录、注册、改密逻辑。此外AuthPage支持Swizzle——可以通过refine CLI把该组件复制到你的项目中再在源码层面自由修改而不必只依赖 Props。基本用法将AuthPage作为LoginPage传给Refine并可在路由表中为注册、忘记密码页面各挂一条路由import { Refine } from pankod/refine-core; import { AuthPage, Layout } from pankod/refine-antd; import routerProvider from pankod/refine-react-router-v6; import { authProvider } from ./authProvider; import { DashboardPage } from ./pages/dashboard; const App () { return ( Refine routerProvider{{ ...routerProvider, routes: [ { path: /register, element: AuthPage typeregister /, }, { path: /forgot-password, element: AuthPage typeforgotPassword /, }, ], }} authProvider{authProvider} LoginPage{AuthPage} DashboardPage{DashboardPage} Layout{Layout} resources{[{ name: posts }]} / ); };说明两点LoginPage{AuthPage}未指定type因此默认渲染login类型路由通常为/loginregister、forgotPassword、updatePassword三种类型需要通过routes自行声明路径文档示例分别使用/register、/forgot-password、/update-password。四种类型详解Login默认登录页提交表单后会调用authProvider的login方法并传入表单值import { AuthProvider } from pankod/refine-core; const authProvider: AuthProvider { // -- login: async ({ email, password, remember, providerName }) { // You can handle the login process according to your needs. // If the process is successful. return Promise.resolve(); return Promise.reject(); }, // -- };从源码可以看到LoginPage的 email 字段同时带有“必填”和type: email两条校验规则password 字段必填表单onFinish中执行login({ ...values, ...mutationVariables })。其中mutationVariables是AuthPage支持的透传参数会把额外字段合并进authProvider.login的入参适合传租户、渠道等上下文。登录过程中的加载态由useLogin返回的isPending驱动提交按钮的loading属性。Register注册页通过typeregister渲染提交后调用authProvider.registerconst authProvider: AuthProvider { // -- register: async ({ email, password, providerName }) { // You can handle the register process according to your needs. return Promise.resolve(); return Promise.reject(); }, // -- };路由接入方式与基本用法一致const App () { return ( Refine authProvider{authProvider} routerProvider{{ ...routerProvider, routes: [ { path: /register, element: AuthPage typeregister /, }, ], }} LoginPage{AuthPage} DashboardPage{DashboardPage} Layout{Layout} resources{[{ name: posts }]} / ); };ForgotPasswordforgotPassword类型用于引导用户重置密码提交后调用authProvider.forgotPassword入参只有emailconst authProvider: AuthProvider { // -- forgotPassword: async ({ email }) { // You can handle the reset password process according to your needs. return Promise.resolve(); return Promise.reject(); }, // -- };UpdatePasswordupdatePassword类型用于用户已登录场景下修改密码。从源码看该表单包含password与confirmPassword两个字段后者通过dependencies: [password] 自定义 validator 实现“两次密码不一致则拒绝提交”的前端校验提交后调用authProvider.updatePasswordconst authProvider: AuthProvider { // -- updatePassword: async ({ password, confirmPassword }) { // You can handle the update password process according to your needs. return Promise.resolve(); return Promise.reject(); }, // -- };Props 详解providers仅对login和register两种类型可用。providers定义第三方登录OAuth按钮列表接收OAuthProvider[]数组。点击任一按钮不会走表单而是直接以providerName为参数调用对应的login/registerconst { GoogleOutlined, GithubOutlined } Icons; const App () { return ( Refine authProvider{authProvider} routerProvider{routerProvider} LoginPage{() ( AuthPage providers{[ { name: google, icon: GoogleOutlined /, label: Sign in with Google, }, { name: github, icon: GithubOutlined /, label: Sign in with GitHub, }, ]} / )} DashboardPage{DashboardPage} Layout{Layout} resources{[{ name: posts }]} / ); };数组元素结构由 core 包的 OAuthProvider 类型 定义interface OAuthProvider { name: string; icon?: React.ReactNode; label?: string; }源码中renderProviders()会为每个 provider 渲染一个block样式的 antdButton点击时执行login({ ...mutationVariables, providerName: provider.name })注册页同理调用register。只要providers非空且未隐藏表单组件还会自动在按钮与表单之间插入一条 or 分隔线。rememberMe仅对login类型可用。rememberMe用于渲染自定义的“记住我”组件传false可完全移除该组件。默认值是一个带Remember me文案的 antdCheckbox。自定义时有一个硬性约束必须用 antd 的Form.Item包裹并传入name这样它的值才会进入表单才能在formProps.onFinish的formValues中读到。从源码看默认实现的remember字段初始值为falseLoginPage{() ( AuthPage rememberMe{ div style{{ border: 1px dashed cornflowerblue, padding: 3 }} Form.Item nameremember valuePropNamechecked noStyle CheckboxCustom remember me/Checkbox /Form.Item /div } / )}loginLink仅对register和forgotPassword类型可用。定义“去登录”的链接节点也可以传任意 ReactNode 完全替换默认文案默认值是渲染到/login的链接。const Auth (props) { const { Link } useRouterContext(); return ( AuthPage {...props} loginLink{ div style{{ border: 1px dashed cornflowerblue, padding: 3 }} Link to/loginLogin/Link /div } / ); };registerLink仅对login类型可用。定义登录页底部“去注册”的链接默认渲染指向/register的链接文案 Dont have an account? Sign up。同样可以传任意节点const Auth (props) { const { Link } useRouterContext(); return ( AuthPage {...props} registerLink{ div style{{ border: 1px dashed cornflowerblue, marginTop: 5, padding: 5 }} Link to/registerRegister/Link /div } / ); };forgotPasswordLink仅对login类型可用。定义登录页“忘记密码”链接默认渲染指向/forgot-password的链接const Auth (props) { const { Link } useRouterContext(); return ( AuthPage {...props} forgotPasswordLink{ div style{{ border: 1px dashed cornflowerblue, marginTop: 5, padding: 5 }} Link to/forgot-passwordForgot Password/Link /div } / ); };wrapperProps透传给最外层包裹组件antdLayout的 props例如修改整页背景色LoginPage{() ( AuthPage wrapperProps{{ style: { background: #331049, }, }} / )}contentProps透传给内容卡片组件antdCard的 props可修改标题、头部与内容区样式LoginPage{() ( AuthPage contentProps{{ title: Login, headStyle: { background: cornflowerblue, color: white, }, bodyStyle: { background: #673ab742, }, }} / )}formProps透传给 antdForm的 props。典型用法包括修改initialValues与替换onFinish回调LoginPage{() ( AuthPage formProps{{ initialValues: { email: demorefine.dev, password: demo, }, onFinish: (formValues) alert(JSON.stringify(formValues, null, 2)), }} / )}注意默认onFinish会触发authProvider对应方法重写onFinish意味着接管整个提交逻辑需要自行处理认证调用。renderContentrenderContent接收默认的content卡片与title页头标题返回完全自定义的内容可在原有内容之外插入任意元素LoginPage{() ( AuthPage contentProps{{ style: { width: 400px, }, }} renderContent{(content: React.ReactNode) { return ( div style{{ display: flex, flexDirection: column, justifyContent: center, alignItems: center, }} h1 style{{ color: white }}Extra Header/h1 {content} h1 style{{ color: white }}Extra Footer/h1 /div ); }} / )}hideForm、title与mutationVariables补充在 core 包的 AuthPageProps 类型定义 中还能看到三个 Props 文档hideForm?: boolean—— 隐藏表单主体只保留 provider 按钮与链接适合纯 OAuth 登录页title?: React.ReactNode—— 替换卡片上方的页面标题设为false则完全不渲染mutationVariables?: Recordstring, any—— 额外变量会与表单值一起合并传给authProvider的对应方法。API ReferencePropertiesPropertyTypeDefaulttypelogin|register|forgotPassword|updatePasswordloginprovidersOAuthProvider[]-registerLinkReact.ReactNode指向/register的链接forgotPasswordLinkReact.ReactNode指向/forgot-password的链接loginLinkReact.ReactNode指向/login的链接rememberMeReact.ReactNodeCheckboxRemember me/CheckboxhideFormboolean-wrapperPropsLayoutPropsantd-contentPropsCardPropsantd-formPropsFormPropsantd-renderContent(content: ReactNode, title: ReactNode) ReactNode-titleReact.ReactNode-Interfaceinterface OAuthProvider { name: string; icon?: React.ReactNode; label?: string; }表单提交到 authProvider 的源码级调用链四种页面共用同一套机制以登录为例LoginPage内部通过 core 的useLogin获取 mutationconst { mutate: login, isPending } useLoginLoginFormTypes()antdForm的onFinish{(values) login({ ...values, ...mutationVariables })}把表单值提交给 mutation从 useLogin 实现 可以看到它基于 TanStack Query 的useMutation封装内部通过useAuthProviderContext()取出authProvider.login真正执行并配合useNotification展示成功/失败提示、用useGo处理登录成功后的路由跳转parsed.params?.to支持?to回跳参数register/forgotPassword/updatePassword页面分别使用useRegister/useForgotPassword/useUpdatePassword结构完全一致。所有文案均经过useTranslate的pages.login.*、pages.register.*等 i18n key因此接入国际化后页面文案可整体翻译。该组件的 UI 行为由 ui-tests 共享用例集 驱动验证pageLoginTests.bind(this)(LoginPage)保证各 UI 集成版本的认证页面行为一致。版本与依赖说明本文依据的是 refine 文档站3.xx.xx版本的 AuthPage API 文档示例中使用的包名为pankod/refine-core、pankod/refine-antd、pankod/refine-react-router-v6。当前仓库源码中对应实现位于 packages/antd导入来源已切换为refinedev/core但组件 API、路由接入方式与本文所有 Props 用法保持一致。文档标注该组件支持 Swizzle可通过 refine CLI 复制源码后深度定制如只需常规调整优先使用wrapperProps/contentProps/formProps/renderContent组合即可完成绝大多数视觉与交互定制。【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
