refineAuthenticated组件完全指南以声明式组件保护自定义页面的访问权限【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refineAuthenticated是 refine 中useAuthenticatedHook 的组件形态用于在 JSX 层面声明式地控制哪些内容只有登录用户才能看到。本文将基于 refine 3.x 版本文档结合当前仓库中packages/core的实际源码与测试用例完整讲解该组件的渲染逻辑、fallback/loading属性、重定向机制以及如何在自定义页面中用它构建仅认证用户可访问的路由。Authenticated是什么useAuthenticated的组件形态Authenticated是useAuthenticated的组件形式。它内部使用useAuthenticated的返回值isSuccess、isLoading、isError来提供功能因此你无需在组件里手动调用 Hook、再根据状态自行判断渲染而是直接以 JSX 包裹内容即可当isSuccess为true时渲染children即已登录用户可以访问的内容当isLoading为true时渲染loading属性提供的内容当isError为true时若提供了fallback属性则渲染它否则页面会被重定向到/login。在 refine 3.x 中useAuthenticated底层调用的是authProvider的checkAuth方法详见authProvider文档而在当前仓库的packages/core中Authenticated的现代实现则基于useIsAuthenticatedHook它通过tanstack/react-query的useQuery封装authProvider.check方法源码。无论哪种版本核心语义一致询问认证系统当前用户是否已登录再据此决定渲染内容还是执行重定向。基础用法最简用法是将需要保护的任意内容包在Authenticated中示例来自 3.x 文档import { Authenticated } from pankod/refine-core; const MyPage () ( Authenticated YourComponent / /Authenticated );未登录时组件会自动重定向到/login登录用户可以正常看到YourComponent /。想了解如何与自定义页面配合使用可以参考 Custom Pages自定义页面 教程中的 Authenticated Custom Pages 一节以及对应的 with-custom-pages 示例。属性详解fallback当用户未登录时渲染的组件。如果该属性为undefined页面会被重定向到/login。Authenticated fallback{divYou cannot access this section/div} YourComponent / /Authenticated利用这一点你可以在不改变路由的情况下为未登录用户渲染一段提示文字或一个登录引导区块而不是强制跳转。loading在检查用户是否登录期间渲染的组件。由于认证检查通常是一个异步过程例如读取 token、请求远端会话接口在此期间显示一个加载态可以避免页面闪烁或误渲染受保护内容Authenticated loading{divloading.../div} YourComponent / /AuthenticatedAPI 参考3.x 文档中的属性总表如下PropertyDescriptionTypeDefaultfallbackComponent to render if the user is not logged in. Ifundefined, the page will be redirected to/loginReactNodeloadingComponent to render while checking whether user is logged inReactNode需要说明的是这是 3.x 版本公开的属性集合。在当前仓库的packages/core中AuthenticatedProps类型还额外定义了更多能力源码这些属性在现代版本中同样可用key必填同一层级存在多个Authenticated实例时用于唯一标识强制 React 在属性变化时正确卸载/重挂载避免fallback与children互相污染渲染redirectOnFailstring | true默认true认证失败时的重定向目标。不设置时使用check方法响应中的redirectTo设置为字符串时强制重定向到该路径。该属性仅在未设置fallback时生效appendCurrentPathToQuery默认true是否把当前路径拼接到重定向 URL 的查询参数to上供登录成功后回跳使用params透传给认证提供方check方法的可选参数。实现原理渲染决策与重定向机制查看Authenticated的源码实现可以梳理出清晰的渲染决策流程没有配置authProvider直接渲染children组件不执行任何认证检查hasAuthProvider为false时视为已认证正在检查认证状态isFetching为true渲染loadingContent未提供则为null已认证authenticated为true渲染children未认证且提供了fallback渲染fallback内容不发生跳转未认证且没有fallback执行重定向。重定向目标优先取redirectOnFail当其为字符串时否则取check方法响应中的redirectTo字段。重定向动作通过内部Redirect组件完成源码它调用路由提供方routerProvider的go函数并传入type: replace以替换当前历史记录而不是压栈避免用户通过浏览器后退重新进入受保护页面。当appendCurrentPathToQuery为true时当前路径会被解析并放入重定向 URL 的to查询参数中例如/login?to/dashboard这样登录成功后useLogin可以利用该参数回跳。该行为在仓库的单元测试中有完整覆盖测试文件可验证的关键场景包括已认证时正常渲染children未认证时不渲染children未认证时渲染fallback检查期间渲染loading未认证时按check响应的redirectTo如/my-path执行type: replace重定向redirectOnFail属性覆盖check响应的重定向目标在根路径/下重定向到/login时不携带to查询参数而在/dashboard等具体路径下重定向到/login?to/dashboard通过params向check方法传递参数如{ allowAuth: false }模拟带条件认证的场景。实战保护自定义页面Authenticated Custom Pagesrefine 允许通过routerProvider的routes属性添加自定义页面而自定义页面默认对所有访问者开放。要把它变成仅认证用户可访问只需将页面组件用Authenticated包裹起来。以下完整示例来自 自定义页面教程以 React Router V6 为例import { Refine, Authenticated, AuthProvider } from pankod/refine-core; import routerProvider from pankod/refine-react-router-v6; import { CustomPage } from pages/custom-page; const authProvider: AuthProvider { login: (params: any) { if (params.username admin) { localStorage.setItem(username, params.username); return Promise.resolve(); } return Promise.reject(); }, logout: () { localStorage.removeItem(username); return Promise.resolve(); }, checkError: () Promise.resolve(), checkAuth: () localStorage.getItem(username) ? Promise.resolve() : Promise.reject(), getPermissions: () Promise.resolve([admin]), }; const AuthenticatedCustomPage () { return ( Authenticated CustomPage / /Authenticated ); }; const App () { return ( Refine authProvider{authProvider} routerProvider{{ ...routerProvider, routes: [ { element: AuthenticatedCustomPage /, path: /custom-page, }, ], }} / ); }; export default App;要点说明只有已登录用户才能通过/custom-page路径访问该页面未登录用户会被重定向到/login该用法要求应用必须配置authProvider否则Authenticated无从检查认证状态按源码逻辑会直接渲染children对于 React Location路由配置中element写法一致path不需要前导/对于 React Router V5则需使用exact: true与component属性。常见问题与最佳实践同一层级多个Authenticated必须设置keyReact 默认以属性更新复用组件实例可能导致fallback与children交错渲染。为每个实例分配唯一key如Authenticated keydashboard可强制卸载/重挂载保证状态隔离。fallback优先于重定向只要提供了fallback组件就不会跳转而是渲染fallback内容redirectOnFail也只在未设置fallback时生效。若业务上需要渲染提示 手动跳转可在fallback内部自行触发导航。善用to参数回跳默认开启的appendCurrentPathToQuery会在重定向 URL 上附加当前路径/login?to/dashboard登录成功后即可回到用户原本想访问的页面显著改善体验。没有authProvider时组件直接放行从源码可以看到未配置认证提供方时hasAuthProvider为false组件无条件渲染children。因此Authenticated是认证感知的守卫部署在无认证需求的应用中不会造成功能阻塞但也不要依赖它做未配置认证时的安全兜底。加载态不要省略认证检查是异步的建议始终提供loading内容避免受保护内容在检查完成前闪现。小结Authenticated把是否已登录这一认证语义抽象成了声明式组件成功渲染children、检查中渲染loading、失败渲染fallback或重定向到登录页。本文覆盖了其 3.x 文档中的全部属性与用法并对照当前仓库的 组件源码 与 单元测试 展开了渲染决策、重定向与to回跳机制的底层解析。结合useAuthenticatedHook 与authProvider文档你可以进一步自定义认证逻辑构建出既灵活又安全的访问控制层。【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考