refine 教程实战用 refinedev/mui 的 为 Material UI 项目打造统一风格的认证页面【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine本篇技术文章基于 refine 官方教程中「UI Libraries」章节Material UI React Router 路线的收官单元 authentication/index.md 展开。该教程此前已完成了布局ThemedLayout、数据视图表格/表单/详情页与通知系统的搭建本单元要解决的最后一个问题是把/login登录页替换为refinedev/mui包提供的预制组件AuthPage /让认证页面与应用其余部分的 Material UI 风格保持一致。读完后你将掌握AuthPage /的四种视图login / register / forgotPassword / updatePassword及其与useLogin等认证钩子、React Router 路由守卫、authProvider的完整协作链路。单元定位认证页面是 UI Libraries 章节的最后一块拼图在教程的配套沙箱sandpack.tsx中本单元的初始文件直接继承自前一单元notifications的最终产物也就是 notifications/material-ui/react-router/sandpack.tsx 里定义的App.tsx结构BrowserRouterThemeProvider theme{RefineThemes.Blue}提供路由与主题Refine同时装配dataProvider、authProvider、routerProviderrefinedev/react-router与notificationProvideruseNotificationProvider并声明了受保护资源protected-productslist/show/edit/create 四个路由业务路由被Authenticated keyauthenticated-routes redirectOnFail/login包裹内部渲染ThemedLayout与Outlet /认证页面路由则用Authenticated keyauth-pages fallback{Outlet /}包裹NavigateToResource resourceprotected-products /其中挂载Route path/login element{Login /} /。此时应用已可完整使用布局、视图和通知系统唯一没有统一样式的就是/login页。本单元的目标就是把它替换为AuthPage /教程小结中概括的整套能力为用布局与视图组件搭建复杂 UI、用定制化钩子和组件管理表格/表单/按钮/字段、用refinedev/react-hook-form管理表单、用 Material UI 通知系统处理通知以及用预制的AuthPage /处理认证页面。AuthPage /组件总览一个组件四种认证视图AuthPage /组件由refinedev/mui包导出它与 Refine 的认证钩子配合工作并使用 Material UI 元素渲染表单。根据教程说明与组件源码 packages/mui/src/components/pages/auth/index.tsx它支持四种视图类型type取值渲染的页面配合的 Refine 钩子login默认值登录表单附带忘记密码、注册等链接useLoginregister注册表单useRegisterforgotPassword忘记密码表单useForgotPasswordupdatePassword更新密码表单useUpdatePassword从源码看AuthPage本身只是一个按type分发的调度器// packages/mui/src/components/pages/auth/index.tsx节选 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()}/; };四个具体视图由 packages/mui/src/components/pages/auth/components/index.tsx 统一导出LoginPage/RegisterPage/ForgotPasswordPage/UpdatePasswordPage且所有 props 会原样透传给对应的页面组件。类型上AuthProps是 core 包的AuthPageProps在 Material UI 场景下的特化BoxProps作为 wrapper、CardProps作为内容区、UseFormProps作为表单 props这意味着表单配置直接复用了 React Hook Form 的useForm参数集。实战步骤把 src/pages/login.tsx 换成按照教程操作更新src/pages/login.tsx文件为import React from react; import { AuthPage } from refinedev/mui; export const Login () { return ( AuthPage typelogin formProps{{ defaultValues: { email: demodemo.com, password: demodemo, }, }} / ); };各部分要点typelogin渲染登录视图。由于login也是默认分支不传type效果相同formProps会展开传给内部的useForm来自refinedev/react-hook-form因此支持defaultValues、onSubmit等全部 React Hook Form 配置。这里预填了教程沙箱中演示账号的邮箱和密码方便验证登录流程替换完成后教程建议的操作是登出后再次登录即可看到使用 Material UI 组件渲染的新登录页。沙箱中的UseAuthPageInLogin按钮正是通过sandpack.updateFile(src/pages/login.tsx, LoginTsxWithAuthPage)自动完成这一替换见 sandpack.tsx。源码剖析LoginPage 内部到底做了什么AuthPage typelogin /最终渲染的LoginPage实现位于 packages/mui/src/components/pages/auth/components/login/index.tsx它把「认证逻辑、表单逻辑、UI 呈现」三层完整串联了起来值得逐层拆解。1. 表单层useForm React Hook Form 校验LoginPage解构formProps后用useFormBaseRecord, HttpError, LoginFormTypes初始化表单泛型参数表明记录类型为BaseRecord错误类型为 core 的HttpError表单字段类型为LoginFormTypes并通过FormProvider向下分发。表单提交走handleSubmit默认行为是调用useLogin的mutateconst { mutate: login, isPending } useLoginLoginFormTypes(); // ... Box componentform onSubmit{handleSubmit((data) { if (onSubmit) { return onSubmit(data); // 允许外部完全接管提交逻辑 } return login({ ...mutationVariables, ...data }); // 否则走 useLogin })} /两个TextFieldemail/password通过register注册必填校验文案走useTranslate如pages.login.fields.email、pages.login.errors.requiredEmail因此页面文案天然支持 i18n。2. 认证层useLogin 与 authProvideruseLogin是refinedev/core提供的认证钩子它会在内部调用你在Refine authProvider{...} /中注册的authProvider.login。在教程的认证章节见 documentation/tutorial/authentication/data-provider-integration/index.md中authProvider的典型形态为import { AuthProvider } from refinedev/core; export const authProvider: AuthProvider { onError: async (error) { if (error?.status 401) { return { logout: true, error: { message: Unauthorized, name: Error, statusCode: error?.status ?? 403, }, }; } return {}; }, getIdentity: async () { /* ... */ }, logout: async () { /* ... */ }, login: async ({ email, password }) { /* ... */ }, check: async () { /* ... */ }, };其中onError会由 Refine 的数据钩子在数据请求抛错时自动调用用于处理 token 过期/失效等 401 场景并触发登出。LoginPage提交后useLogin成功即完成登录页面随后由路由层的守卫重定向回业务页。3. UI 层Material UI 组件与可定制点LoginPage的呈现完全由 Material UI 组件构成ContainerCardCardContent的居中布局最大宽度 400px、minHeight: 100dvh、Typography标题默认「Sign in to your account」、两个TextField、Checkbox的「Remember me」、Divider分隔的社交登录按钮组以及底部的注册引导链接。它暴露的 props 与默认行为如下从源码结构看title顶部标题区域传false隐藏默认渲染ThemedTitleproviders第三方登录提供方数组name/label/icon点击按钮会执行login({ ...mutationVariables, providerName: provider.name })存在 providers 且未hideForm时自动渲染「or」DividerhideForm隐藏账号密码表单例如纯社交登录场景rememberMe/forgotPasswordLink/registerLink默认渲染记住我复选框、指向/forgot-password的链接、指向/register的注册链接均可传入自定义节点覆盖mutationVariables追加到login调用的额外参数formProps.onSubmit完全接管表单提交此时不再自动调用useLoginwrapperProps/contentProps分别作用于外层Box与内容区Card可注入任意 Box/Card 的 props 做样式定制renderContent最高层级的自定义渲染入口接收Content与PageTitle两个节点作为参数便于把登录卡片嵌入自有的营销页、品牌页等布局中。与路由的协作登录页如何接入认证守卫AuthPage /只是页面组件登录成功后的跳转与未登录用户的拦截由路由层完成。教程中Material UI React Router 路线的App.tsx关键结构为import { Refine, Authenticated } from refinedev/core; import routerProvider, { NavigateToResource } from refinedev/react-router; import { BrowserRouter, Routes, Route, Outlet } from react-router; import { RefineThemes, ThemedLayout, ThemedTitle, useNotificationProvider } from refinedev/mui; BrowserRouter Refine dataProvider{dataProvider} authProvider{authProvider} routerProvider{routerProvider} notificationProvider{useNotificationProvider} resources{[ { name: protected-products, list: /products, show: /products/:id, edit: /products/:id/edit, create: /products/create, meta: { label: Products }, }, ]} Routes {/* 已登录渲染布局 子路由 */} Route element{ Authenticated keyauthenticated-routes redirectOnFail/login ThemedLayout Title{(props) ThemedTitle {...props} textAwesome Project /} Outlet / /ThemedLayout /Authenticated } Route index element{NavigateToResource resourceprotected-products /} / Route path/products Route index element{ListProducts /} / Route path:id element{ShowProduct /} / Route path:id/edit element{EditProduct /} / Route pathcreate element{CreateProduct /} / /Route /Route {/* 未登录渲染登录页已登录则跳回资源列表 */} Route element{ Authenticated keyauth-pages fallback{Outlet /} NavigateToResource resourceprotected-products / /Authenticated } Route path/login element{Login /} / /Route /Routes /Refine /BrowserRouter这套路由模式在前序单元 routing/authentication/react-router/index.md 中已建立其原理是Authenticated省略fallback并使用redirectOnFail时会在未认证时把用户重定向到/login反之认证页路由通过fallback{Outlet /}让未登录用户看到登录页而已登录用户访问/login时会被NavigateToResource带回protected-products资源页。AuthPage /渲染的登录表单、useLogin钩子与这套路由守卫三者结合构成了完整的认证闭环。小结本单元完成了 Material UI React Router 教程中认证页面的最后一环用refinedev/mui的AuthPage /替换了手写登录页登录/注册/忘记密码/更新密码四种视图通过type属性切换并分别对接useLogin、useRegister、useForgotPassword、useUpdatePassword钩子分发逻辑见 packages/mui/src/components/pages/auth/index.tsx通过formProps.defaultValues预填演示账号验证了useFormrefinedev/react-hook-form在认证表单中的用法登录成功后的跳转、未登录访问的拦截由AuthenticatedredirectOnFail与NavigateToResource路由守卫协同完成至此教程覆盖的完整能力为Refine 与 UI 库的集成方式、布局与视图组件、表格/表单/按钮/字段的定制化钩子与组件、React Hook Form 表单管理、Material UI 通知系统以及AuthPage /认证页面处理。教程原文也指出下一章将介绍 Refine 提供的 Inferencer、Devtools 等进一步提升开发体验的工具与包可继续从 next-steps 单元 与 cli 单元 跟进。【免费下载链接】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 教程实战：用 @refinedev/mui 的 ＜AuthPage /＞ 为 Material UI 项目打造统一风格的认证页面
refine 教程实战用 refinedev/mui 的 为 Material UI 项目打造统一风格的认证页面【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine本篇技术文章基于 refine 官方教程中「UI Libraries」章节Material UI React Router 路线的收官单元 authentication/index.md 展开。该教程此前已完成了布局ThemedLayout、数据视图表格/表单/详情页与通知系统的搭建本单元要解决的最后一个问题是把/login登录页替换为refinedev/mui包提供的预制组件AuthPage /让认证页面与应用其余部分的 Material UI 风格保持一致。读完后你将掌握AuthPage /的四种视图login / register / forgotPassword / updatePassword及其与useLogin等认证钩子、React Router 路由守卫、authProvider的完整协作链路。单元定位认证页面是 UI Libraries 章节的最后一块拼图在教程的配套沙箱sandpack.tsx中本单元的初始文件直接继承自前一单元notifications的最终产物也就是 notifications/material-ui/react-router/sandpack.tsx 里定义的App.tsx结构BrowserRouterThemeProvider theme{RefineThemes.Blue}提供路由与主题Refine同时装配dataProvider、authProvider、routerProviderrefinedev/react-router与notificationProvideruseNotificationProvider并声明了受保护资源protected-productslist/show/edit/create 四个路由业务路由被Authenticated keyauthenticated-routes redirectOnFail/login包裹内部渲染ThemedLayout与Outlet /认证页面路由则用Authenticated keyauth-pages fallback{Outlet /}包裹NavigateToResource resourceprotected-products /其中挂载Route path/login element{Login /} /。此时应用已可完整使用布局、视图和通知系统唯一没有统一样式的就是/login页。本单元的目标就是把它替换为AuthPage /教程小结中概括的整套能力为用布局与视图组件搭建复杂 UI、用定制化钩子和组件管理表格/表单/按钮/字段、用refinedev/react-hook-form管理表单、用 Material UI 通知系统处理通知以及用预制的AuthPage /处理认证页面。AuthPage /组件总览一个组件四种认证视图AuthPage /组件由refinedev/mui包导出它与 Refine 的认证钩子配合工作并使用 Material UI 元素渲染表单。根据教程说明与组件源码 packages/mui/src/components/pages/auth/index.tsx它支持四种视图类型type取值渲染的页面配合的 Refine 钩子login默认值登录表单附带忘记密码、注册等链接useLoginregister注册表单useRegisterforgotPassword忘记密码表单useForgotPasswordupdatePassword更新密码表单useUpdatePassword从源码看AuthPage本身只是一个按type分发的调度器// packages/mui/src/components/pages/auth/index.tsx节选 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()}/; };四个具体视图由 packages/mui/src/components/pages/auth/components/index.tsx 统一导出LoginPage/RegisterPage/ForgotPasswordPage/UpdatePasswordPage且所有 props 会原样透传给对应的页面组件。类型上AuthProps是 core 包的AuthPageProps在 Material UI 场景下的特化BoxProps作为 wrapper、CardProps作为内容区、UseFormProps作为表单 props这意味着表单配置直接复用了 React Hook Form 的useForm参数集。实战步骤把 src/pages/login.tsx 换成按照教程操作更新src/pages/login.tsx文件为import React from react; import { AuthPage } from refinedev/mui; export const Login () { return ( AuthPage typelogin formProps{{ defaultValues: { email: demodemo.com, password: demodemo, }, }} / ); };各部分要点typelogin渲染登录视图。由于login也是默认分支不传type效果相同formProps会展开传给内部的useForm来自refinedev/react-hook-form因此支持defaultValues、onSubmit等全部 React Hook Form 配置。这里预填了教程沙箱中演示账号的邮箱和密码方便验证登录流程替换完成后教程建议的操作是登出后再次登录即可看到使用 Material UI 组件渲染的新登录页。沙箱中的UseAuthPageInLogin按钮正是通过sandpack.updateFile(src/pages/login.tsx, LoginTsxWithAuthPage)自动完成这一替换见 sandpack.tsx。源码剖析LoginPage 内部到底做了什么AuthPage typelogin /最终渲染的LoginPage实现位于 packages/mui/src/components/pages/auth/components/login/index.tsx它把「认证逻辑、表单逻辑、UI 呈现」三层完整串联了起来值得逐层拆解。1. 表单层useForm React Hook Form 校验LoginPage解构formProps后用useFormBaseRecord, HttpError, LoginFormTypes初始化表单泛型参数表明记录类型为BaseRecord错误类型为 core 的HttpError表单字段类型为LoginFormTypes并通过FormProvider向下分发。表单提交走handleSubmit默认行为是调用useLogin的mutateconst { mutate: login, isPending } useLoginLoginFormTypes(); // ... Box componentform onSubmit{handleSubmit((data) { if (onSubmit) { return onSubmit(data); // 允许外部完全接管提交逻辑 } return login({ ...mutationVariables, ...data }); // 否则走 useLogin })} /两个TextFieldemail/password通过register注册必填校验文案走useTranslate如pages.login.fields.email、pages.login.errors.requiredEmail因此页面文案天然支持 i18n。2. 认证层useLogin 与 authProvideruseLogin是refinedev/core提供的认证钩子它会在内部调用你在Refine authProvider{...} /中注册的authProvider.login。在教程的认证章节见 documentation/tutorial/authentication/data-provider-integration/index.md中authProvider的典型形态为import { AuthProvider } from refinedev/core; export const authProvider: AuthProvider { onError: async (error) { if (error?.status 401) { return { logout: true, error: { message: Unauthorized, name: Error, statusCode: error?.status ?? 403, }, }; } return {}; }, getIdentity: async () { /* ... */ }, logout: async () { /* ... */ }, login: async ({ email, password }) { /* ... */ }, check: async () { /* ... */ }, };其中onError会由 Refine 的数据钩子在数据请求抛错时自动调用用于处理 token 过期/失效等 401 场景并触发登出。LoginPage提交后useLogin成功即完成登录页面随后由路由层的守卫重定向回业务页。3. UI 层Material UI 组件与可定制点LoginPage的呈现完全由 Material UI 组件构成ContainerCardCardContent的居中布局最大宽度 400px、minHeight: 100dvh、Typography标题默认「Sign in to your account」、两个TextField、Checkbox的「Remember me」、Divider分隔的社交登录按钮组以及底部的注册引导链接。它暴露的 props 与默认行为如下从源码结构看title顶部标题区域传false隐藏默认渲染ThemedTitleproviders第三方登录提供方数组name/label/icon点击按钮会执行login({ ...mutationVariables, providerName: provider.name })存在 providers 且未hideForm时自动渲染「or」DividerhideForm隐藏账号密码表单例如纯社交登录场景rememberMe/forgotPasswordLink/registerLink默认渲染记住我复选框、指向/forgot-password的链接、指向/register的注册链接均可传入自定义节点覆盖mutationVariables追加到login调用的额外参数formProps.onSubmit完全接管表单提交此时不再自动调用useLoginwrapperProps/contentProps分别作用于外层Box与内容区Card可注入任意 Box/Card 的 props 做样式定制renderContent最高层级的自定义渲染入口接收Content与PageTitle两个节点作为参数便于把登录卡片嵌入自有的营销页、品牌页等布局中。与路由的协作登录页如何接入认证守卫AuthPage /只是页面组件登录成功后的跳转与未登录用户的拦截由路由层完成。教程中Material UI React Router 路线的App.tsx关键结构为import { Refine, Authenticated } from refinedev/core; import routerProvider, { NavigateToResource } from refinedev/react-router; import { BrowserRouter, Routes, Route, Outlet } from react-router; import { RefineThemes, ThemedLayout, ThemedTitle, useNotificationProvider } from refinedev/mui; BrowserRouter Refine dataProvider{dataProvider} authProvider{authProvider} routerProvider{routerProvider} notificationProvider{useNotificationProvider} resources{[ { name: protected-products, list: /products, show: /products/:id, edit: /products/:id/edit, create: /products/create, meta: { label: Products }, }, ]} Routes {/* 已登录渲染布局 子路由 */} Route element{ Authenticated keyauthenticated-routes redirectOnFail/login ThemedLayout Title{(props) ThemedTitle {...props} textAwesome Project /} Outlet / /ThemedLayout /Authenticated } Route index element{NavigateToResource resourceprotected-products /} / Route path/products Route index element{ListProducts /} / Route path:id element{ShowProduct /} / Route path:id/edit element{EditProduct /} / Route pathcreate element{CreateProduct /} / /Route /Route {/* 未登录渲染登录页已登录则跳回资源列表 */} Route element{ Authenticated keyauth-pages fallback{Outlet /} NavigateToResource resourceprotected-products / /Authenticated } Route path/login element{Login /} / /Route /Routes /Refine /BrowserRouter这套路由模式在前序单元 routing/authentication/react-router/index.md 中已建立其原理是Authenticated省略fallback并使用redirectOnFail时会在未认证时把用户重定向到/login反之认证页路由通过fallback{Outlet /}让未登录用户看到登录页而已登录用户访问/login时会被NavigateToResource带回protected-products资源页。AuthPage /渲染的登录表单、useLogin钩子与这套路由守卫三者结合构成了完整的认证闭环。小结本单元完成了 Material UI React Router 教程中认证页面的最后一环用refinedev/mui的AuthPage /替换了手写登录页登录/注册/忘记密码/更新密码四种视图通过type属性切换并分别对接useLogin、useRegister、useForgotPassword、useUpdatePassword钩子分发逻辑见 packages/mui/src/components/pages/auth/index.tsx通过formProps.defaultValues预填演示账号验证了useFormrefinedev/react-hook-form在认证表单中的用法登录成功后的跳转、未登录访问的拦截由AuthenticatedredirectOnFail与NavigateToResource路由守卫协同完成至此教程覆盖的完整能力为Refine 与 UI 库的集成方式、布局与视图组件、表格/表单/按钮/字段的定制化钩子与组件、React Hook Form 表单管理、Material UI 通知系统以及AuthPage /认证页面处理。教程原文也指出下一章将介绍 Refine 提供的 Inferencer、Devtools 等进一步提升开发体验的工具与包可继续从 next-steps 单元 与 cli 单元 跟进。【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考