新闻详情

新闻详情

首页 / 资讯中心 / 详情

Ever Gauzy 平台认证 UI 库 @gauzy/ui-auth 完整指南:组件、路由守卫与构建发布实战

发布时间:2026/10/1 16:08:12来源:尧图网络
Ever Gauzy 平台认证 UI 库 @gauzy/ui-auth 完整指南:组件、路由守卫与构建发布实战
后端前端企业应用MCP 服务【免费下载链接】ever-gauzyEver® Gauzy™ - Open Business Management Platform (ERP/CRM/HRM/ATS/PM) - https://gauzy.co项目地址https://gitcode.com/GitHub_Trending/ev/ever-gauzy点击查看免费下载gauzy/ui-auth是 Ever Gauzy 开源业务管理平台ERP/CRM/HRM/ATS/PM仓库地址 README.md中负责认证场景的 Angular 前端库集中提供登录、注册、找回密码、邀请接受、OAuth 授权、魔法登录magic sign-in等全套认证组件与路由守卫。本指南以 packages/ui-auth/README.md 为主体结合该库在 packages/ui-auth/src 下的源码实现系统讲解它的组件体系、路由结构、工作流原理以及基于 Nx 工作区的构建、测试、发布与安装全流程。读完本文你将掌握如何在 Gauzy 生态中复用它、如何理解其认证页面背后的工作流并能直接运行命令完成该库的开发与发布。库定位Gauzy 平台专用的认证前端模块根据 packages/ui-auth/README.md 的说明gauzy/ui-auth提供「为 Gauzy 平台量身定制的认证相关组件、服务与工具」目标是实现「流式且安全的用户认证与用户管理」。它不是一个通用认证库而是深度绑定 Gauzy 生态依赖gauzy/ui-core/core提供AuthService、NoAuthGuard、PageRouteRegistryService、Store等核心服务、gauzy/ui-core/theme、gauzy/ui-core/shared、gauzy/contracts、gauzy/constants等仓库内部包见 package.json底层基于 Nebular 的nebular/auth与nebular/theme因此多数组件如NgxLoginComponent直接继承自 Nebular 的NbLoginComponent并在其上进行 Gauzy 特有能力的扩展。从 index.ts 的公开 API 面看该库对外只暴露 4 类内容export * from ./lib/auth.module; export * from ./lib/auth.routes; export * from ./lib/sign-in-success/sign-in-success.component; export * from ./lib/sign-in-success/sign-in-success.module;即模块NgxAuthModule、路由工厂createAuthRoutes以及「登录成功」组件/模块主要用于 OAuth 回跳场景。组件体系覆盖完整认证生命周期的预构建组件该库在 packages/ui-auth/src/lib/components 下组织了一整套认证组件按功能划分如下功能域组件对应路径认证外壳布局NgxAuthComponent继承NbAuthComponentcomponents/auth/auth.component.ts账号密码登录NgxLoginComponentcomponents/login/login.component.ts工作区登录多租户NgxLoginWorkspaceComponentcomponents/login-workspace/login-workspace.component.ts魔法登录邮箱验证码NgxLoginMagicComponent、NgxMagicSignInWorkspaceComponentcomponents/login-magic/login-magic.component.ts、components/magic-login-workspace/magic-login-workspace.component.ts注册NgxRegisterComponent、NgxRegisterSideFeaturesComponent、NgxRegisterSideSingleFeatureComponentcomponents/register/register.component.ts密码找回与重置NgxForgotPasswordComponent、NgxResetPasswordComponentcomponents/forgot-password/forgot-password.component.ts、components/reset-password/reset-password.component.ts邮件确认ConfirmEmailComponentConfirmEmailResolvercomponents/confirm-email/confirm-email.component.ts邀请接受员工/客户AcceptInviteComponent、AcceptClientInviteComponent及各自的表单子组件components/accept-invite/accept-invite.component.ts、components/accept-client-invite/accept-client-invite.component.ts估算邮件确认EstimateEmailComponentEstimateEmailResolvercomponents/estimate-email/estimate-email.component.tsOAuth 授权确认OAuthAuthorizeComponentcomponents/oauth-authorize/oauth-authorize.component.ts工作区选择WorkspaceSelectionComponentcomponents/workspace-selection/workspace-selection.component.ts辅助 UISocialLinksComponent、NgxWhatsNewComponentcomponents/social-links/social-links.component.ts、components/whats-new/whats-new.component.ts登录成功页SignInSuccessComponent含独立模块sign-in-success/sign-in-success.module.ts从 auth.module.ts 的模块声明看NgxAuthModule通过declarations: [...COMPONENTS]一次性注册了上述全部组件并导入了 Nebular 的按钮、卡片、表单、对话框、图标、选择器等模块以及TranslateModule.forChild()国际化和gauzy/ui-core的主题、共享模块。登录组件的三个扩展层次登录是认证体系的核心该库提供了三个层次互补的实现NgxLoginComponent经典账号密码登录继承NbLoginComponent在此基础上加入Remember Me 记忆功能通过ngx-cookie-service读取rememberMeCookie 自动回填邮箱见checkRememberdMe()Demo 环境自动填充读取gauzy/ui-config的environment.DEMO等配置在演示环境自动填充超级管理员账号并支持autoLogin(role)按RolesEnum.SUPER_ADMIN / ADMIN / EMPLOYEE一键切换演示角色后直接提交表单见 login.component.ts密码格式校验复用gauzy/constants中的patterns.passwordNoSpaceEdges正则约束密码首尾不能有空格。NgxLoginWorkspaceComponent多工作区登录面向 Gauzy 多租户架构。提交邮箱密码后调用AuthService.findWorkspaces({ email, password })后端返回该用户可访问的所有工作区IWorkspaceResponse[]。如果total_workspaces 1会自动免选登录否则弹出工作区选择器用户选定后用signinWorkspaceByToken({ email, token })换取正式会话并将user、token、refresh_token、tenantId等写入Store后跳转首页见_handleLoginResponse。它对应的注册路由为login-workspace。魔法登录无密码NgxLoginMagicComponent先用邮箱调用AuthService.sendSigninCode({ email })发送一次性验证码输入 6 位长度由gauzy/constants的ALPHA_NUMERIC_CODE_LENGTH约束验证码后跳转到auth/magic-sign-inNgxMagicSignInWorkspaceComponent在该路由上用confirmSignInByCode({ email, code })校验并拉取工作区列表同样支持单工作区自动登录验证码输入错误时展示错误状态并在 5 秒后跳回auth/login-magic见 magic-login-workspace.component.ts。发送成功后邮箱输入框会被禁用重发验证码带 30 秒倒计时见startTimer()。认证外壳路由分发与回跳处理NgxAuthComponent是所有认证页面的父布局继承自 Nebular 的NbAuthComponent。它有两个值得关注的职责按 URL 切换页面样式updateAuthPageClasses(url)通过url.split(?)[0]去除查询串后判断当前是否为/auth/register或/auth/login从而控制外壳的展示形态例如注册页与登录页不同的侧栏布局returnUrl 回跳goBack()读取路由快照中的returnUrl查询参数若目标 URL 以当前window.location.origin开头则用 Angular 路由跳转否则视为外部 URL 用window.location.href跳转同时给出console.error(No return URL provided.)兜底见 auth.component.ts。路由结构认证子路由全图认证路由由 auth.routes.ts 中的createAuthRoutes()工厂统一生成在NgxAuthModule中通过依赖注入{ provide: ROUTES, useFactory: ... }动态注册。路由表如下路径组件守卫 / Resolver重定向到loginpathMatch: fullloginNgxLoginComponentNoAuthGuardregisterNgxRegisterComponentNoAuthGuardrequest-passwordNgxForgotPasswordComponentNoAuthGuardreset-passwordNgxResetPasswordComponentNoAuthGuardconfirm-emailConfirmEmailComponentConfirmEmailResolver刻意不加守卫accept-inviteAcceptInviteComponentNoAuthGuardaccept-client-inviteAcceptClientInviteComponentNoAuthGuardestimateEstimateEmailComponentNoAuthGuardEstimateEmailResolveroauth-authorizeOAuthAuthorizeComponent无logoutNbLogoutComponent无auth-sections动态路由插件注册的页面由注册时指定路由源码中的注释揭示了一个安全设计细节confirm-email刻意不使用NoAuthGuard。原因在于注册即登录用户点击邮件中的确认链接时通常已是登录态若加了守卫用户会被提前重定向到仪表盘导致 resolver 从未执行、邮箱地址永远得不到验证。这里的信任依据是链接中的一次性 token——API 只接受该 token 一次见 auth.routes.ts 中confirm-email路由的注释。插件化路由PageRouteRegistryService 机制createAuthRoutes的最后一个子路由是..._pageRouteRegistryService.getPageLocationRoutes(auth-sections)它把认证区域做成可插拔的。在 auth.module.ts 的构造函数中NgxAuthModule通过PageRouteRegistryService.registerPageRoutes(...)注册了三个初始页面login-workspace、login-magic、magic-sign-in均使用canActivate: [NoAuthGuard]。模块用静态标志hasRegisteredPageRoutes保证这些页面只注册一次。这意味着 Gauzy 插件可以在不修改认证模块源码的前提下向auth-sections位置追加新的认证页面。登录成功与 OAuth 回跳sign-in-success/sign-in-success.module.ts 定义了success与google两个子路由都渲染SignInSuccessComponent用于社交/OAuth 登录成功后的回跳落地页搭配NbCardModule与NbSpinnerModule呈现加载态。守卫与拦截器安全访问的基石README 的 Features 中明确列出「Auth Guards Interceptors路由守卫与 HTTP 拦截器」。路由层面最核心的是NoAuthGuard它定义于 packages/ui-core/core/src/lib/auth/no-auth.guard.tsgauzy/ui-core/core是ui-auth的关键依赖语义与常见的AuthGuard相反已登录用户访问登录/注册等页面时会被重定向走避免已登录用户重复进入认证流程。上面的路由表中可以看到除confirm-email、oauth-authorize、logout之外的所有认证页面都挂载了该守卫。至于 HTTP 拦截器层README 将其列为该库的组成部分仓库中与认证相关的拦截器如 token 注入、认证失败处理统一实现在gauzy/ui-core/core依赖包内供ui-auth的组件与服务调用实现「组件负责交互、服务与守卫负责安全」的分层设计。构建、测试与发布Nx 工作区下的标准流程README 给出了完整的开发命令均基于仓库根目录的 Nx 工作区nx.json执行构建库yarn nx build ui-auth该命令会触发gauzy/ui-auth的 Nx project 构建。若要按开发/生产模式区分package.json 还预置了以下脚本lib:build: yarn nx build ui-auth --configurationdevelopment, lib:build:prod: yarn nx build ui-auth --configurationproduction, lib:watch: yarn nx build ui-auth --watch --configurationdevelopment其中lib:watch适合开发期间持续增量构建产物默认输出到dist/packages/ui-auth。注意该库sideEffects: false声明为纯模块便于摇树优化tree-shaking。运行单元测试yarn nx test ui-auth测试环境基于jest-preset-angular与types/jest见 package.json 的 devDependencies仓库中已有的测试用例可作参考例如 login-magic.component.spec.ts、magic-login-workspace.component.spec.ts、social-links.component.spec.ts、whats-new.component.spec.ts。发布到 npmyarn nx build ui-auth cd dist/packages/ui-auth npm publish先构建、再进入dist/packages/ui-auth目录执行npm publish即可把库发布为 npm 包。需要留意的是package.json 当前标记为private: true即仓库默认不对外发布该包正式发布前需要先移除该私有标记并确认gauzy/ui-core、gauzy/ui-config等内部依赖已可被安装方解析。安装使用在已配置好的 Gauzy 项目中按 README 执行以下任一命令安装npm install gauzy/ui-auth # 或 yarn add gauzy/ui-auth安装后引入NgxAuthModule即可获得整套认证页面。由于该库面向 Gauzy 生态README 明确说明「intended to be used within the Gauzy ecosystem」安装前需要先具备完整的 Gauzy 工作区并安装好全部依赖它的 peerDependencies 要求 Angular 21angular/common、angular/core均为21.0.7运行环境要求 Node22、Yarn1.22。集成要点速览把gauzy/ui-auth接入 Gauzy 应用时关键动作如下导入模块在应用路由模块中引入NgxAuthModule其构造器会自动通过PageRouteRegistryService注册登录工作区、魔法登录等页面路由挂载认证父路由应用级路由需把createAuthRoutes()返回的路由数组挂到/auth前缀之下源码中NgxAuthComponent通过updateAuthPageClasses按/auth/login、/auth/register判断布局说明认证页面默认部署在/auth路径下依赖准备确保gauzy/ui-core/core提供的AuthService、Store、NoAuthGuard、ErrorHandlingService、PageRouteRegistryService已就绪它们承担了实际的登录请求、会话持久化与安全校验环境配置gauzy/ui-config中的DEMO、DEMO_SUPER_ADMIN_EMAIL、DEMO_EMPLOYEE_PASSWORD等字段控制演示模式的一键登录行为发布前检查移除private: true、确认 Angular 21 依赖兼容、先跑yarn nx test ui-auth与yarn nx build ui-auth验证通过。综上所述gauzy/ui-auth并非简单的登录页集合而是围绕 Gauzy 多租户业务模型构建的完整认证前端方案从经典密码登录、工作区选择登录、魔法验证码登录到注册、找回密码、邮件确认、邀请接受与 OAuth 授权配合NoAuthGuard路由守卫与插件化的页面注册机制构成了 Gauzy 平台安全、可扩展的认证基础设施。读者既可以按 README 的命令直接构建、测试、发布与安装该库也可以深入 auth.routes.ts 与 auth.module.ts 理解其路由设计与插件机制为在自身 Gauzy 应用中定制认证流程打下基础。赞分享后端前端企业应用MCP 服务【免费下载链接】ever-gauzyEver® Gauzy™ - Open Business Management Platform (ERP/CRM/HRM/ATS/PM) - https://gauzy.co项目地址https://gitcode.com/GitHub_Trending/ev/ever-gauzy点击查看免费下载相关推荐深入解析 Ever Gauzy 桌面端 UI 组件库 gauzy/desktop-ui-lib构建、测试与发布实战指南深入解析 Ever Gauzy 桌面端 UI 组件库 gauzy/desktop ui lib构建、测试与发布实战指南 导读 gauzy/desktop后端前端企业应用MCP 服务Ever Gauzy 视频管理 UI 插件 gauzy/plugin-videos-ui 完整实战指南Ever Gauzy 视频管理 UI 插件 gauzy/plugin videos ui 完整实战指南 gauzy/plugin videos ui 是 E后端前端企业应用MCP 服务Ever Gauzy Plane 集成 UI 插件指南构建、发布、安装与配置实战Ever Gauzy Plane 集成 UI 插件指南构建、发布、安装与配置实战 Ever® Gauzy™ 是开源的商业管理平台ERP/CRM/HRM/AT后端前端企业应用MCP 服务创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
网站建设高端定制企业官网
RELATED

相关资讯

更多精彩内容,欢迎继续阅读

较早相关资讯

最新相关资讯

因果模型与因果推断入门:从DAG、Uplift到去混淆建模 2026/10/1 16:56:52

因果模型与因果推断入门:从DAG、Uplift到去混淆建模

1. 从"相关不等于因果"说起:为什么做模型的人迟早要补上这一课做推荐、风控、增长的同学大概都经历过这种场面:离线模型的AUC涨了两个点,上线之后核心指标纹丝不动,甚至倒退;反过来,某个拍脑袋的…

阅读更多 →
北邮编译原理课程设计:词法分析到目标代码生成全流程拆解 2026/10/1 16:56:52

北邮编译原理课程设计:词法分析到目标代码生成全流程拆解

简介:这份资源是北京邮电大学编译原理课程设计的完整实践项目,面向正在学习编译原理、需要动手实现编译器的计算机专业学生。项目以Pascal语言为源语言,覆盖词法分析、语法分析、语义分析、代码生成及符号表管理、错误处理、中间代码生成等核…

阅读更多 →
HowToCook 闽南风味炒年糕:葱油提香的软糯主食完整实战指南 2026/10/1 16:56:52

HowToCook 闽南风味炒年糕:葱油提香的软糯主食完整实战指南

文档教程 【免费下载链接】HowToCook Programmers guide about how to cook at home. 项目地址: https://gitcode.com/GitHub_Trending/ho/HowToCook 点击查看 免费下载 导读 本篇技术指南基于 HowToCook 开源项目中的 炒年糕.md 菜谱文档,系统讲解以米…

阅读更多 →
Anaconda 安装、conda 环境与 Navigator 闪退排查 2026/10/1 16:56:52

Anaconda 安装、conda 环境与 Navigator 闪退排查

1. Anaconda 到底解决了什么问题,Navigator 又在其中扮演什么角色刚入行的朋友问我最多的一句话是:"我不就是想写个 Python 脚本吗,为什么非要装 Anaconda?"这个疑问很合理,因为如果你只写单文件脚本、只用标…

阅读更多 →
SystemVerilog中的automatic关键字:从存储类型到并发安全的完整解析 2026/10/1 16:56:52

SystemVerilog中的automatic关键字:从存储类型到并发安全的完整解析

最近在复盘System Verilog面试题的时候,我总会被同一个关键字击中——automatic。说句实话,这可能是整个SV里“看起来最简单、用起来最嚣张”的一个关键字。很多朋友背了一堆概念,知道“函数加automatic可以递归”,可在真实仿真环…

阅读更多 →
收集回来的中国广电网络(不分省区)IP地址段 2026/10/1 16:56:33

收集回来的中国广电网络(不分省区)IP地址段

注:本文 原 在2019年4月27日发表于笔者的个人博客《IT人的工作生活》,略有修改。原文链接 :https://www.cntse.com/306.html,如需转载,请私信笔者,征得笔者同意后,方可转载,并且需要…

阅读更多 →

今日资讯

本周资讯

本月资讯

看完文章仍有疑问?

联系尧图顾问,获取一对一建站咨询

立即免费咨询 📞 400-888-8888
📞 ✉