Nebular Auth 路由守卫实战：基于用户认证状态保护 Angular 路由

前端UI组件【免费下载链接】nebular:boom: Customizable Angular UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode项目地址https://gitcode.com/gh_mirrors/ne/nebular点击查看免费下载导读本文以 Nebular Auth 模块为背景讲解如何利用 Angular 内置的 Router Guard路由守卫机制保护应用中的受保护区域。你将学会创建AuthGuard服务、通过NbAuthService.isAuthenticated()判断用户认证状态、将守卫注册到模块并挂载到路由配置以及实现未登录自动跳转登录页的完整闭环。文章末尾还会深入nebular/auth的源码实现揭示isAuthenticated()底层基于 token 有效性的判断原理并给出更进阶的isAuthenticatedOrRefresh()刷新方案。场景设定区分受保护区与认证区假设我们的应用具有如下路由结构/pages/*—— 受保护区域仅允许已认证用户访问/auth/*—— 认证区域登录 / 注册 / 忘记密码等仅对未认证用户开放。Angular 提供了名为 Router Guard 的机制来保护路由在路由激活之前执行一段逻辑返回true放行、返回false拦截。下面我们将它与 Nebular Auth 结合把/pages/*从匿名用户手中保护起来。第一步创建守卫服务在app-routing.module.ts附近新建auth-guard.service.ts先创建一个只实现CanActivate接口的空守卫import { Injectable } from angular/core; import { CanActivate } from angular/router; Injectable() export class AuthGuard implements CanActivate { canActivate() { return true; } }此时守卫对所有路由都放行它是后续所有逻辑的骨架真正完成是否允许激活路由判断的地方就在canActivate()中。第二步引入 NbAuthService 并完成 canActivate接下来从nebular/auth导入NbAuthService在构造函数中注入它并让canActivate()返回认证状态import { Injectable } from angular/core; import { CanActivate } from angular/router; import { NbAuthService } from nebular/auth; Injectable() export class AuthGuard implements CanActivate { constructor(private authService: NbAuthService) { } canActivate() { return this.authService.isAuthenticated(); // canActivate 可以返回 Observableboolean这正是 isAuthenticated 的返回类型 } }canActivate接口允许返回boolean、Promiseboolean或Observableboolean。由于isAuthenticated()返回的是Observableboolean我们直接将其返回即可当值为true时路由被激活为false时路由被拦截。源码佐证isAuthenticated 是如何工作的在 src/framework/auth/services/auth.service.ts 中可以看到isAuthenticated()的实现isAuthenticated(): Observableboolean { return this.getToken() .pipe(map((token: NbAuthToken) token.isValid())); }它先通过getToken()从 token 存储中取出当前 token内部委托给 NbTokenService.get()再映射为token.isValid()的布尔值。而isValid()的判断逻辑取决于 token 类型NbAuthSimpleToken只要 token 值非空即为有效token.tsNbAuthJWTToken除了值非空还要求未过期——super.isValid() (!this.getTokenExpDate() || new Date() this.getTokenExpDate())token.ts其中过期时间取自 JWT payload 中的exp字段token.tsNbAuthOAuth2Token/NbAuthOAuth2JWTToken同样在基础有效性之上叠加过期时间检查token.ts。也就是说是否已认证的判定最终落到存储中是否存在且有效的 token上。与之对应的测试用例位于 auth.spec.tstoken 存在时isAuthenticated()返回truetoken 为空时返回false。默认情况下 token 由NbTokenLocalStorage存入浏览器localStorage见 token-storage.ts登录成功后由NbAuthService.authenticate()自动写入auth.service.ts。这也是为什么登录前后同一路由的访问结果会不同。第三步在 app.module.ts 中注册守卫服务守卫本身也是一个可注入的服务需要注册到模块的providers中才能在路由解析时被实例化import { AuthGuard } from ../auth-guard.service; NgModule({ imports: [ // ... ], providers: [ // ... AuthGuard ] });第四步将守卫挂载到路由配置最后在app-routing.module.ts的路由表中引用AuthGuard把它配置到受保护路由的canActivate数组中import { AuthGuard } from ../auth-guard.service; // ... const routes: Routes [ { path: pages, canActivate: [AuthGuard], // 在这里告诉 Angular 用 AuthGuard 检查访问权限 loadChildren: app/pages/pages.module#PagesModule }, { path: auth, component: NbAuthComponent, children: [ // ... ], }, // ... ];这里有两个关键点canActivate: [AuthGuard]表示 Angular 在激活pages路由及其全部子路由之前会执行守卫逻辑因此pages/*下的所有页面都被整体保护/auth路由使用NbAuthComponent作为容器组件它的子路由login、register、logout、request-password、reset-password等由 Nebular Auth 预设的 auth.routes.ts 定义NbAuthComponent则在 auth.component.ts 中实现并已由NbAuthModule导出auth.module.ts。经过上述配置未认证用户将无法访问任何pages/*路由。进阶未认证时重定向到登录页单纯的拦截体验并不好通常我们希望在用户访问受保护页面时直接将其引导到auth/login。只需在守卫中注入Router配合 RxJS 的tap操作符监听认证结果即可import { Injectable } from angular/core; import { CanActivate, Router } from angular/router; import { NbAuthService } from nebular/auth; import { tap } from rxjs/operators; Injectable() export class AuthGuard implements CanActivate { constructor(private authService: NbAuthService, private router: Router) { } canActivate() { return this.authService.isAuthenticated() .pipe( tap(authenticated { if (!authenticated) { this.router.navigate([auth/login]); } }), ); } }逻辑说明isAuthenticated()发出的false会被tap拦截到此时调用this.router.navigate([auth/login])跳转到登录页由于tap不会改变流中的值canActivate最终仍会收到false路由依旧被拦截不会出现已跳转但页面仍被激活的闪烁问题。进阶token 过期后自动刷新再认证isAuthenticated()的判定依赖 token 有效性当 JWT 过期后守卫会直接拒绝访问。如果你希望在 token 过期但存在刷新令牌时自动续期Nebular 还提供了isAuthenticatedOrRefresh()auth.service.ts若 token 存在且有效直接返回true不触发刷新若 token 存在但已失效调用所属策略的refreshToken刷新成功则重新执行isAuthenticated()失败则返回false若 token 不存在返回false。对应的测试覆盖了有效 token 不刷新失效 token 刷新成功返回 true刷新失败返回 false无 token 返回 false四种场景auth.spec.ts。将该方法替换到守卫的canActivate中即可在用户会话过期时静默续期而不是直接踢回登录页。常见问题与注意事项守卫返回的是 ObservableisAuthenticated()是异步的canActivate会等待该 Observable 发出值后再决定是否激活路由因此不要在守卫中同步取一次isAuthenticated()就完事务必按本文示例直接返回流。提供者注册不能遗漏AuthGuard必须出现在模块providers中否则 Angular 无法解析注入路由访问会报错。懒加载路由同样受保护canActivate配置在父路由上会级联作用于所有子路由包括loadChildren懒加载的模块因此无需在子路由中重复配置。认证区域的路由/auth/*通常不挂守卫如需已登录用户不得再访问登录页的反向逻辑可另写一个基于isAuthenticated()取反的守卫。认证状态的初始化NbTokenService在构造时会从存储中发布已保存的 tokentoken.service.ts因此刷新页面后守卫依然能根据持久化的 token 判断认证状态。相关文章NbAuthServiceNbTokenService赞分享前端UI组件【免费下载链接】nebular:boom: Customizable Angular UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode项目地址https://gitcode.com/gh_mirrors/ne/nebular点击查看免费下载相关推荐TanStack Router 认证路由实战基于 React 的受保护路由、路由守卫与登录重定向完整实现TanStack Router 认证路由实战基于 React 的受保护路由、路由守卫与登录重定向完整实现 导读 本文围绕 examples/react/aut前端路由SSRAngular路由参数订阅awesome-angular路由守卫Angular路由参数订阅awesome angular路由守卫 你是否在Angular应用中遇到过这样的问题用户在详情页切换ID时组件没有重新加载数据文档Angular路由与导航精通基于angular-interview-questions项目的路由配置与守卫实现Angular路由与导航精通基于angular interview questions项目的路由配置与守卫实现 你是否在构建Angular应用时遇到路由跳转混前端知识库上一篇Instatic数据隐私合规实施自托管CMS的终极安全指南下一篇Vite Plugin Imagemin 使用教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考