简介
角度路由器的导航警卫允许允许或删除对导航的某些部分的访问。另一种路径守卫--可停用守卫--甚至可以防止用户意外地留下未保存更改的组件。
<$>[备注] 注意： 这样的客户端路由守卫不是一个安全功能。它们不会阻止聪明的用户想出一种方法到达受保护的路线。这样的安全性应该在服务器上实现。相反，它们是为了改善应用程序的用户体验(UX)。 <$>
以下是可用的4种类型的路由守卫：
CanActivate：控制路由是否可以开通。CanActivateChild：控制路由的子项是否可以激活。CanLoad：控制路径是否可以加载。这对于延迟加载的功能模块非常有用。如果后卫返回假，他们甚至不会加载。CanDeactive：控制用户是否可以离开路由。请注意，此保护不会阻止用户关闭浏览器选项卡或导航到其他地址。它只阻止来自应用程序本身的操作。
使用CanActivate路由防护
路由防护通常作为实现所需的路由防护接口的类来实现。
让我们考虑一个带有CanActivate路由守卫的示例，其中我们询问auth服务是否对用户进行了身份验证：
1[label can-activate-route.guard.ts]
2import { Injectable } from '@angular/core';
3import {
4 CanActivate,
5 ActivatedRouteSnapshot,
6 RouterStateSnapshot
7} from '@angular/router';
8import { AuthService } from './auth.service';
9
10@Injectable()
11export class CanActivateRouteGuard implements CanActivate {
12 constructor(private auth: AuthService) {}
注意我们是如何通过声明canActivate方法来实现CanActivate接口的。当您需要当前路由的信息时，该方法可以选择性地访问激活的路由快照和路由器状态快照。
在我们的示例中，根据用户是否经过身份验证，canActivate返回一个布尔值，但它也可以返回一个可观察或可解析为布尔值的承诺。
为了使用它们，应该像提供服务一样提供路障。
让我们将其添加到我们的应用程序模块的提供者中：
1[label app.module.ts]
2// ...
3import { AppRoutingModule } from './app-routing.module';
4import { CanActivateRouteGuard } from './can-activate-route.guard';
5
6import { AuthService } from './auth.service';
最后，您需要在您的路由配置中添加警卫。
这里有一个路由模块的例子：
1[label app-routing.module.ts]
2import { NgModule } from '@angular/core';
3import { Routes, RouterModule } from '@angular/router';
4
5import { HomeComponent } from './home.component';
6import { DashboardComponent } from './dashboard.component';
7import { CanActivateRouteGuard } from './can-activate-route.guard';
8
9const routes: Routes = [
10 { path: '', component: HomeComponent },
11 { path: 'dashboard',
12 component: DashboardComponent,
13 canActivate: [CanActivateRouteGuard]
14 }
15];
现在，只有经过身份验证的用户才能激活/dashboard路线。
请注意我们是如何在路由定义中提供一组警卫的。这意味着我们可以为一条路由指定多个警卫，并按照指定的顺序对其进行评估。
CanLoad和CanActivateChild的实现方式类似。
<$>[备注]
注意： CanLoad接口对当前路由器状态或激活的路由没有那么多的访问权限。
<$>
这就结束了CanActivate路由卫士的示例。
使用CanDeablate路由守卫
由于我们需要提供要停用的组件，所以`CanDeactive‘防护在实现上有一些细微的不同。这使我们能够探测有问题的组件，以查看是否存在类似于未保存的更改。
我们来看一个带有CanDeablate路由守卫的例子：
1[label can-deactivate-route.guard.ts]
2import { Injectable } from '@angular/core';
3import { CanDeactivate } from '@angular/router';
4
5import { DashboardComponent } from './dashboard.component';
在上面的示例中，我们假设仪表板组件类上有一个名为unavedChanges的成员，只要有未保存的更改，该成员就会变为True。除非没有未保存的更改或用户确认，否则不会停用该路由。
‘CanDeactive’路由守卫的例子到此结束。
结论
在本教程中，您了解了CanActivate和CanDeactive等角度的路由守卫。
如果您想了解更多有关ANGLE的信息，请查看我们的ANGLE主题页面以获取练习和编程项目。