Angular 4：無法訂閱從CanActivate AccessGuard

Question

觀察值我遵循了很多教程，並嘗試了許多組合，但無法使這項工作。

我需要在用戶登錄時讓路由可用。如果他不是我需要將他重定向到主頁(this._popupService.setCallbackRoute(route.url.join('/')))並顯示一個彈出窗口(this._popupService.showPopUp())，讓他登錄或註冊。

我無法從authService獲取syncronized值。這是我的代碼：

app.module.ts

imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    RouterModule.forRoot(
     {path: '', component: HomepageComponent}, 
     { 
      path: 'protectedRoute', 
      component: SubmitComponent, 
      data: {requiresLogin: true}, 
      canActivate: [AccessGuard] 
     } 
    ), 
    ... 
] 

auth.service.ts

@Injectable() 
export class AuthService { 

    private loggedIn: Subject<boolean> = new Subject<boolean>(); 

    get isLoggedIn() { 
     return this.loggedIn.asObservable(); 
    } 

    login(user: IUser) { 
     return this._http.get('assets/api/responseSuccess.json?email=' + user.email + '&password=' + user.password) 
      .map((responseLogin => { 
       const jsonResponse = responseLogin.json(); 
       if (jsonResponse.response === 'success') { 
        const userResponse: IUser = jsonResponse.user; 
        this._sessionService.setUserSession(userResponse); 
        this.loggedIn.next(true); 
        return true; 
       } else { 
        this._customFlashMessages.show('Got error login, please check your credentials and try again!'); 
        return false; 
       } 
      })); 
    } 
} 

accessGuard.service.ts

import {Injectable} from '@angular/core'; 
import {ActivatedRouteSnapshot, CanActivate, Router} from '@angular/router'; 
import {Observable} from 'rxjs/Observable'; 
import {AuthService} from './auth.service'; 
import {PopUpService} from './popup.service'; 

@Injectable() 
export class AccessGuard implements CanActivate { 
    loggedIn$: Observable<boolean>; 

    constructor(private authService: AuthService, private _popupService: PopUpService, private router: Router) { 
     this.loggedIn$ = this.authService.isLoggedIn; 
    } 

    canActivate(route: ActivatedRouteSnapshot): Observable<boolean> | Promise<boolean> | boolean { 
     const requiresLogin = route.data.requiresLogin || false; 
     if (requiresLogin) { 
      this.authService.isLoggedIn.subscribe(// even tried with .map() 
       result => { 
        console.log(result); // Logs a promise object 
        if (!result) { 
         console.log("protected route"); // Never reached 
         // If not logged in shop popup and stay on that page 
         this._popupService.showPopUp(); 
         this._popupService.setCallbackRoute(route.url.join('/')); 
         return false; 
        } 
        console.log('logged in'); // Never reached 
        return true; 
       }); 
     } 
     return true; 
    } 
} 

我嘗試了幾件事情。我的代碼工作，如果我直接檢查sessionStorage（'用戶'），但不能使用observable。

任何幫助表示讚賞。

謝謝！

Answer 1

這是正確答案，問題出在訂閱方法裏面的邏輯裏。

這裏是正確的accesGuard.service.ts

@Injectable() 
export class AccessGuard implements CanActivate { 

    constructor(private authService: AuthService, private _popupService: PopUpService, private router: Router) { 
    } 

    canActivate(route: ActivatedRouteSnapshot): Observable<boolean> | Promise<boolean> | boolean { 
     const requiresLogin = route.data.requiresLogin || false; 
     if (requiresLogin) { 
      this.authService.isLoggedIn.subscribe(
       result => { 
        if (!result) { 
         // If not logged in shop popup and stay on that page 
         this._popupService.showPopUp(); 
         this._popupService.setCallbackRoute(route.url.join('/')); 
         this.router.navigate(['/']); 
         return false; 
        } 
        return true; 
       }); 

      return true; 
     }else{ 

     return true; 
     } 
    } 
} 

Answer 2

你需要返回一個observable。

canActivate(route: ActivatedRouteSnapshot): Observable<boolean> | Promise<boolean> | boolean { 
    const requiresLogin = route.data.requiresLogin || false; 
    if (requiresLogin) { 
     return this.authService.isLoggedIn; 
    } 
    return Observable.of(false); 
}