Angular 2 路由器 - CanActivate Guard

Question

如果他們的會話無效，我正在實施一個 CanActivate 守衛將用戶重定向到登錄頁面。

檢查會話是否有效是通過服務完成的，因此我訂閱了服務調用以獲取會話有效性狀態。

我已經調試了代碼，一切似乎都正常工作，事實上，當會話無效時，應用程序確實重定向回登錄頁面。 但是，當我從守衛返回true時，頁面未加載。

我的代碼類似於Angular 文檔中列出的代碼（Plunker上的代碼）。

我不確定我是否在警衛本身中實施了錯誤。 我可以看到的不同之處在於警衛正在訪問服務中的屬性 - 但我認為這並不重要。 據我所知，從守衛返回true只會繼續正常的路由操作。

注意：我使用的是 Angular RC3

代碼：

守衛

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

編輯

我已經進行了進一步調查，看起來我遇到的問題與我試圖從 subscribe 方法本身返回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或Observable<boolean> 。 我實現的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'));
    }
}

但是，在上面的示例中，我找不到根據服務檢索到的值重定向到特定頁面的方法。 我現在的問題是是否有一種方法可以在沒有 subscribe 方法的情況下檢查this.checkSessionService.checkUserSession(localStorage.getItem('userToken'))的結果，或者有一種不同的方法如何從subscribe方法返回。 我確實嘗試過：

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

但正如預期的那樣，它沒有用。

Answer 1

替換

this.checkSessionService...

由

return this.checkSessionService...

除了訂閱 observable 並返回訂閱之外，您還必須返回 observable 本身，但插入一些東西以防它是假的：

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