如何在 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 主题页面,了解练习和编程项目。

相关推荐
黑云压城After2 小时前
H5使用环信实现视频或语音通话
前端·javascript·vue.js
未来之窗软件服务3 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
你的人类朋友4 小时前
什么是断言?
前端·后端·安全
FIN66685 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4955 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1245 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树5 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端
FIN66685 小时前
昂瑞微冲刺科创板:硬科技与资本市场的双向奔赴
前端·人工智能·科技·前端框架·智能
im_AMBER5 小时前
杂记 14
前端·笔记·学习·web
牧杉-惊蛰5 小时前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js