如何在 Angular 路由中使用路由守卫

介绍

Angular 路由的导航守卫允许授予或移除对导航的某些部分的访问权限。另一个路由守卫,CanDeactivate 守卫,甚至允许您防止用户意外离开具有未保存更改的组件。

以下是可用的 4 种路由守卫类型:

  • CanActivate:控制是否可以激活路由。
  • CanActivateChild:控制是否可以激活路由的子路由。
  • CanLoad:控制是否可以加载路由。对于懒加载的特性模块来说,这变得非常有用。如果守卫返回 false,它们甚至不会加载。
  • CanDeactivate:控制用户是否可以离开路由。请注意,此守卫不会阻止用户关闭浏览器选项卡或导航到不同的地址。它只会阻止应用程序内部的操作。

使用 CanActivate 路由守卫

路由守卫通常被实现为实现所需路由守卫接口的类。

让我们以一个使用 CanActivate 路由守卫的示例为例,我们将询问一个 auth 服务用户是否已经认证:

typescript 复制代码
import { Injectable } from '@angular/core';
import {
  CanActivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot 
} from '@angular/router';
import { AuthService } from './auth.service';

@Injectable()
export class CanActivateRouteGuard implements CanActivate {
  constructor(private auth: AuthService) {}

请注意,我们通过声明 canActivate 方法来实现 CanActivate 接口。在某些情况下,该方法可以选择访问 ActivatedRouteSnapshotRouterStateSnapshot,以获取有关当前路由的信息。

在我们的示例中,canActivate 根据用户是否已认证返回一个布尔值,但它也可以返回一个解析为布尔值的可观察对象或承诺。

为了使用它们,路由守卫应该像服务一样提供。

让我们将其添加到我们的应用程序模块的提供者中:

typescript 复制代码
// ...
import { AppRoutingModule } from './app-routing.module';
import { CanActivateRouteGuard } from './can-activate-route.guard';

import { AuthService } from './auth.service';

最后,您需要将守卫添加到路由配置的一部分。

以下是一个带有路由模块的示例:

typescript 复制代码
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home.component';
import { DashboardComponent } from './dashboard.component';
import { CanActivateRouteGuard } from './can-activate-route.guard';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'dashboard',
    component: DashboardComponent,
    canActivate: [CanActivateRouteGuard]
  }
];

现在,只有经过认证的用户才能激活 /dashboard 路由。

请注意,我们在路由定义中提供了一个守卫数组。这意味着我们可以为单个路由指定多个守卫,并且它们将按照指定的顺序进行评估。

实现 CanLoadCanActivateChild 也是以类似的方式完成的。

这就是关于 CanActivate 路由守卫的示例。

使用 CanDeactivate 路由守卫

CanDeactivate 守卫在其实现上有一点不同,因为我们需要提供要停用的组件。这使我们能够检查相关组件是否存在未保存的更改等情况。

让我们以一个使用 CanDeactivate 路由守卫的示例为例:

typescript 复制代码
import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';

import { DashboardComponent } from './dashboard.component';

在上面的示例中,我们假设仪表板组件类上有一个名为 unsavedChanges 的成员,当存在未保存的更改时会变为 true。除非没有未保存的更改或用户确认,否则路由不会被停用。

这就是关于 CanDeactivate 路由守卫的示例。

结论

在本教程中,您了解了 Angular 中的路由守卫,如 CanActivateCanDeactivate

如果您想了解更多关于 Angular 的信息,请查看我们的 Angular 主题页面,了解练习和编程项目。

相关推荐
疯狂动物城在逃flash2 分钟前
数据库入门:SQL学习路线图与实战技巧
前端
前端小巷子7 分钟前
跨域问题解决方案:开发代理
前端·javascript·面试
前端_逍遥生8 分钟前
Chrome 插件开发到发布完整指南:从零开始打造 TTS 朗读助手
前端·chrome
JohnYan8 分钟前
Bun技术评估 - 07 S3
javascript·后端·bun
Mintopia8 分钟前
Three.js 材质与灯光:一场像素级的光影华尔兹
前端·javascript·three.js
天涯学馆9 分钟前
JavaScript 跨域、事件循环、性能优化面试题解析教程
前端·javascript·面试
掘金一周18 分钟前
别再用 100vh 了!移动端视口高度的终极解决方案| 掘金一周7.3
前端·后端
晴殇i20 分钟前
CSS 迎来重大升级:Chrome 137 支持 if () 条件函数,样式逻辑从此更灵活
前端·css·面试
咚咚咚ddd22 分钟前
cursor mcp实践:网站落地页性能检测报告(browser-tools)
前端
MiyueFE23 分钟前
让我害怕的 TypeScript 类型 — — 直到我学会了这 3 条规则
前端·typescript