각도 2+ 방법/관찰 완료 대기

Question

인증 상태를 확인하려면 te 백 엔드를 확인해야하지만 관찰 가능한 반환이 완료되기 전에 te 코드가 완료됩니다. 어떤 결과가 나올지 모릅니다.

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
    this.isAuthenticated();   
    return this.authenticated; 
} 

isAuthenticated(){ 
    this.loginService.isAuthenticated() 
     .subscribe(status => this.authenticated = status) 
} 

코드가 반환되기 전에 관찰 가능 상태가 완료되기 위해 관찰 가능 상태가 완료 될 때까지 기다릴 수 있도록이 코드를 어떻게 변경합니까?

주 : 아래 그림과 같이 각도 canActivate 방법은 내가 코드를 작성하는 것을 허용하지 않습니다

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
    this.loginService.isAuthenticated() 
     .subscribe(status => { 
      this.authenticated = status; 
      return this.authenticated; 
     }); 
} 

이는 따라와 오류가 발생합니다 :

Class 'AuthGuard' incorrectly implements interface 'CanActivate'.
Types of property 'canActivate' are incompatible. Type '(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => void' is not assignable to type '(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => boolean | Observable | Pr...'. Type 'void' is not assignable to type 'boolean | Observable | Promise'.

이에 대한 해결책에 대한 제안 오류도 도움이 될 것입니다.

Answer 1

으로 관찰을 반환 할 수 있습니다

LoginService 첫 수입 toPromise :

import 'rxjs/add/operator/toPromise'; 

그런 다음에 비동기 방식을 만들어 로그인 서비스

async isAuthenticated(){ 
    const response = await this.http.get('/login/authenticated').toPromise(); 
    return response.json(); 
    } 

그런 다음 구성 요소

:

async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
    this.loginStatus = await this.loginService.isAuthenticated(); 

    console.log("LOGGED IN STATUS: " + this.loginStatus); 

    if (this.loginStatus == true){ 
     return true; 
    } 

    // not logged in so redirect to login page with the return url 
    this.router.navigate(['/layout/login'], { queryParams: { returnUrl: state.url } });  
} 

Answer 2

당신은 비동기/기다리고와 약속의 문제 해결 Observable<boolean>

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
    return this.loginService.isAuthenticated() 
     .map(status => { 
      console.log(status); 
      this.authenticated = status; 
      return true; 
     }).catch((err) => { 
      console.log(err); 
      return Observable.of(false); 
     }); 
}