Angular 2 路由器 - CanActivate Guard

Question

我正在实施一个 CanActivate 守卫，以在用户的会话无效时将用户重定向到登录页面。

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

我已经调试了代码，一切似乎都在正常工作，事实上，当会话无效时，应用程序会重定向回登录页面。但是当我从守卫 return true 时，页面没有加载。

我的代码与 Angular documentation (Code on Plunker) 中列出的代码相似。

我不确定我是否在守卫本身实施了错误。我可以看到的区别是守卫正在访问服务中的属性 - 但我认为这无关紧要。据我所知，returning true 守卫只会继续正常的路由操作。

注：我用的是AngularRC3

代码：

后卫

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));
    }
}

编辑

我已经进一步调查，看起来我遇到的问题与我试图从订阅方法本身 return 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);
        }
    }
}

从上面的代码可以看出，return 可以是 boolean 也可以是 Observable<boolean>。我实施的 CheckSessionService return 和 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 方法中获取 return 。我试过了：

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

但不出所料。

Answer 1

替换

this.checkSessionService...

来自

return this.checkSessionService...

除了订阅 observable 和 return 订阅之外，您还必须 return observable 本身，但插入一些东西以防它是假的：

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

Angular 2 路由器 - CanActivate Guard

Angular 2 Router - CanActivate Guard

angular-routing

angular