控制對路徑的訪問

預設的 Angular 路由器允許無條件地導航到任何路由和從任何路徑導航。這並不總是理想的行為。

在可以有條件地允許使用者導航到路線或從路線導航的情況下,可以使用 Route Guard 來限制該行為。

如果你的方案符合以下其中一項,請考慮使用 Route Guard,

  • 需要對使用者進行身份驗證才能導航到目標元件。
  • 需要授權使用者導航到目標元件。
  • 元件在初始化之前需要非同步請求
  • 元件需要使用者輸入才能導航離開。

鐵路衛隊如何運作

Route Guards 通過返回布林值來控制路由器導航的行為。如果返回 true ,則路由器將繼續導航到目標元件。如果返回 false ,則路由器將拒絕導航到目標元件。

路由防護介面

路由器支援多個保護介面:

  • CanActivate :發生在路線導航之間。
  • CanActivateChild :發生在路線導航到子路線之間。
  • CanDeactivate :導航離開當前路線時發生。
  • CanLoad :在路徑導航到非同步載入的要素模組之間發生。
  • 解決 :用於在路由啟用之前執行資料檢索。

這些介面可以在你的警衛中實現,以授予或刪除對某些導航過程的訪問許可權。

同步與非同步路線防護

Route Guards 允許同步和非同步操作有條件地控制導航。

同步路線保護

同步路由保護返回布林值,例如通過計算立即結果,以便有條件地控制導航。

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

@Injectable()
export class SynchronousGuard implements CanActivate {
  canActivate() {
    console.log('SynchronousGuard#canActivate called');
    return true;
  }
}

非同步路由防護

對於更復雜的行為,路線保護可以非同步阻止導航。非同步路由保護可以返回 Observable 或 Promise。

這對於等待使用者輸入回答問題,等待成功儲存對伺服器的更改或等待接收從遠端伺服器獲取的資料的情況非常有用。

import { Injectable }     from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable }     from 'rxjs/Rx';
import { MockAuthenticationService } from './authentication/authentication.service';

@Injectable()
export class AsynchronousGuard implements CanActivate {
    constructor(private router: Router, private auth: MockAuthenticationService) {}

    canActivate(route:ActivatedRouteSnapshot, state:RouterStateSnapshot):Observable<boolean>|boolean {
        this.auth.subscribe((authenticated) => {
            if (authenticated) {
                return true;
            }
            this.router.navigateByUrl('/login');
            return false;
        });
    }
}