我們在開發web應用時，在服務器端都會控制某種或某個用戶是否有權限調用某個接口。在前端，我們除了根據用戶的角色或其他特性來控制一些頁面元素是否顯示以外，也需要控制用戶是否能夠進入某些頁面（例如通過直接輸入URL的方式直接進入）。要控制是否顯示，我們可以使用 *ngIf 、 [hidden] 等方式。而對于控制用戶能否進入某個頁面，Angular2的路由框架也提供了非常方便的方式來實現這個功能。

Angular2提供了2種組件， Guard 和 Resolve 。 Guard 顧名思義就是用來保護一個路徑。可以用來判斷用戶只有在滿足一定的條件的情況下才能打開這個路徑對應的頁面。 Resolve 用來在進入某個路徑之前先獲取數據。

Guard

Guard 其實是一系列接口，只要你實現了它的方法，配置了這些 Guard ，Angular路由框架就會根據這個方法返回的 true 或 false 來判斷是否激活這個路由。它包括幾種類型：

1、CanActivate

這種類型的 Guard 用來控制是否允許進入當前的路徑。

2、CanActivateChild

這種類型的 Guard 用來控制是否允許進入當前路徑的所有子路徑。

3、CanDeactivate

用來控制是否能離開當前頁面進入別的路徑

4、CanLoad

用于控制一個異步加載的子模塊是否允許被加載。

以 CanActivate 為例，這個接口的定義如下：

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

這個接口定義了一個方法，當你實現這個接口，并把它配置到某一個路由上以后，當用戶進入這個路由的路徑之前，就會調用它里面的 canActivate() 方法，它第一個參數，就是將要激活的路由，第二個參數是路由器當前的狀態。它返回一個布爾型的結果，或者是布爾型的 Promise 或 Observable 。

Resolve

這跟Angular1中ui-router庫的 resolve 類似，就是用來在打開一個頁面之前先獲取數據，而不是進入頁面以后再加載。這個接口中的方法，可以返回任意的對象，也可以返回一個 Promise ，或者 Observable

如果在一個路徑上同時設置了 CanActivate 和 Resolve ，首先 CanActivate 接口的方法會被執行，當這個路由可以被激活時， Resolve 接口的方法才會被執行。

實例

下面，我們來通過一個比較完整的實例，來看看， CanActivate ， CanActivateChild ， CanDeactivate 和 Resolve 的用法。( CanLoad 將會在之后介紹子模塊、異步加載的文章中再介紹)。這篇教程的源代碼可以在這里 查看。

場景

我們還是用之前的教程 Angular2入門教程-2 實現TodoList App 中的實例。