Angular 2 路由器 - CanActivate Guard

我正在实现 CanActivate 防护，以便在用户会话无效时将用户重定向到登录页面。

关于会话是否有效的检查是通过服务完成的，因此我从警卫那里订阅服务调用以获取会话有效性状态。

我已经调试了代码，一切似乎都正常工作，事实上，当会话无效时，应用程序会重定向回登录页面。然而当我回来时true从守卫看来，该页面未加载。

我的代码与上面列出的类似角度文档 https://angular.io/docs/ts/latest/guide/router.html (Plunker 上的代码 https://angular.io/resources/live-examples/router/ts/plnkr.html).

我不确定我是否在守卫本身中实施了错误。我看到的区别是警卫正在访问服务中的财产 - 但我认为这并不重要。据我所知返回true来自守卫的操作将简单地继续正常的路由操作。

Note:我正在使用 Angular RC3

Code:

Guard

export class MyGuard implements CanActivate {
    constructor(private checkSessionService: CheckSessionService, private router: Router) {}

    canActivate(
    next:  ActivatedRouteSnapshot,
    state: RouterStateSnapshot
    ) {
        this.checkSessionService.checkUserSession(localStorage.getItem('userToken'))
        .subscribe(validSessionReturn => {

            if (validSessionReturn) {
                return true;
            } else {
                // redirect to login
                this.router.navigateByUrl('/login');
                return false;
            }
        },
        error => console.log(error));
    }
}

Edit

我进行了进一步调查，看来我遇到的问题与我试图退回boolean来自订阅方法本身。作为测试，我尝试了以下操作，一切都按预期工作：

export class MyGuard implements CanActivate {
    constructor(private checkSessionService: CheckSessionService, private router: Router) {}

    canActivate(
    next:  ActivatedRouteSnapshot,
    state: RouterStateSnapshot
    ) {
        if(localStorage.getItem('userToken') !== null) {
            return true; // or return Observable.of(true);
        } else {
            return false; // or return Observable.of(false);
        }
    }
}

您可以从上面的代码中注意到，可以返回一个boolean or an Observable<boolean>. The CheckSessionService我已经实现了返回Observable<boolean>。事实上，当我尝试下面的代码时，一切再次按预期工作，这意味着如果会话有效，则页面加载成功，否则路由将停止：

export class MyGuard implements CanActivate {
    constructor(private checkSessionService: CheckSessionService, private router: Router) {}

    canActivate(
    next:  ActivatedRouteSnapshot,
    state: RouterStateSnapshot
    ) {
        return this.checkSessionService.checkUserSession(localStorage.getItem('userToken'));
    }
}

但是，在上面的示例中，我找不到根据服务检索到的值重定向到特定页面的方法。我现在的问题是是否有办法检查结果this.checkSessionService.checkUserSession(localStorage.getItem('userToken'))没有订阅方法，或者有不同的方式如何从subscribe方法。我确实尝试过：

if(this.checkSessionService.checkUserSession(localStorage.getItem('userToken')) === Observable.of(false))

但正如预期的那样，它不起作用。

Replace

this.checkSessionService...

by

return this.checkSessionService...

您不必订阅可观察对象并返回订阅，您还必须返回可观察对象本身，但插入一些内容以防万一它是错误的：

return this.checkSessionService.checkUserSession(localStorage.getItem('userToken'))
    .do(‌​function(authenticated) { 
        if (!authenticated) ... 
    });