控制对路径的访问

默认的 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;
        });
    }
}