Angular guard介绍

发表于 更新于 分类于 阅读次数： 本文字数： 944 阅读时长 ≈ 1 分钟

1. 前言

我们在开发 web 应用时，在服务器端都会控制某种或某个用户是否有权限调用某个接口。在前端，我们除了根据用户的角色或其他特性来控制一些页面元素是否显示以外，也需要控制用户是否能够进入某些页面（例如通过直接输入 URL 的方式直接进入）。要控制是否显示，我们可以使用 *ngIf 、 [hidden] 等方式。而对于控制用户能否进入某个页面，Angular2 的路由框架也提供了非常方便的方式来实现这个功能。

Angular2 提供了 2 种组件， Guard 和 Resolve 。 Guard 顾名思义就是用来保护一个路径。可以用来判断用户只有在满足一定的条件的情况下才能打开这个路径对应的页面。 Resolve 用来在进入某个路径之前先获取数据。

2. Guard

Guard 其实是一系列接口，只要你实现了它的方法，配置了这些 Guard ，Angular 路由框架就会根据这个方法返回的 true 或 false 来判断是否激活这个路由。它包括几种类型：

1、CanActivate
这种类型的 Guard 用来控制是否允许进入当前的路径。
2、CanActivateChild
这种类型的 Guard 用来控制是否允许进入当前路径的所有子路径。
3、CanDeactivate
用来控制是否能离开当前页面进入别的路径
4、CanLoad
用于控制一个异步加载的子模块是否允许被加载。
以 CanActivate 为例，这个接口的定义如下：

1
2
3
exportinterface CanActivate {
 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean;
}

这个接口定义了一个方法，当你实现这个接口，并把它配置到某一个路由上以后，当用户进入这个路由的路径之前，就会调用它里面的 canActivate() 方法，它第一个参数，就是将要激活的路由，第二个参数是路由器当前的状态。它返回一个布尔型的结果，或者是布尔型的 Promise 或 Observable 。

3. Angular 系列文章

最新更新以及更多 Angular 相关文章请访问 Angular 合集 | 鹏叔的技术博客