介绍

Angular 路由器的导航守卫允许授予或删除对导航某些部分的访问权限。另一个路由守卫，CanDeactivate守卫，甚至允许你防止用户不小心留下未保存更改的组件。

注意：像这样的客户端路由保护并不是一项安全功能。它们不会阻止聪明的用户找到到达受保护路线的方法。这种安全性应该在服务器上实现。相反，它们旨在改善您的应用程序的用户体验 (UX)。

以下是 4 种可用的路由保护：

• CanActivate：控制是否可以激活路线。
• CanActivateChild：控制是否可以激活路由的子级。
• CanLoad：控制是否可以加载路由。这对于延迟加载的功能模块非常有用。如果守卫返回 false，它们甚至不会加载。
• CanDeactivate：控制用户是否可以离开路线。请注意，此防护不会阻止用户关闭浏览器选项卡或导航到其他地址。它只会阻止来自应用程序本身的操作。

使用CanActivate路由保护

路由防护通常作为实现所需路由防护接口的类来实现。

让我们考虑一个带有CanActivate路由守卫的示例，其中我们询问auth服务是否用户已通过身份验证：

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方法来实现接口的。如果您需要有关当前路线的信息，该方法可以选择访问ActivatedRouteSnapshot和RouterStateSnapshot。

在我们的示例中，canActivate返回一个布尔值取决于用户是否通过身份验证，但它也可能返回一个可观察的或解析为布尔值的承诺。

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

让我们将它添加到我们的应用程序模块的提供程序中：

// ...
import { AppRoutingModule } from './app-routing.module';
import { CanActivateRouteGuard } from './can-activate-route.guard';

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

最后，您需要将防护添加为路由配置的一部分。

这是一个带有路由模块的示例：

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路由。

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

实施CanLoad和CanActivateChild以类似的方式完成。

注意：该CanLoad接口对当前路由器状态或激活的路由没有那么多的访问权限。

CanActivate路线守卫的例子到此结束。

使用CanDeactivate路由保护

该CanDeactivate防护装置在我们需要提供的组件被停用其执行略有差异。这允许我们探测有问题的组件，看看是否有未保存的更改之类的东西。

让我们考虑一个带有CanDeactivate路由守卫的例子：

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';

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

在上面的示例中，我们假设仪表板组件类中有一个名为的成员，unsavedChanges只要有未保存的更改，它就会变为 true。除非没有未保存的更改或用户确认，否则不会停用该路线。

CanDeactivate路线守卫的例子到此结束。

结论

在本教程中，您了解了 Angular 中的路由保护，例如CanActivate和CanDeactivate。

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