Angular2는 경로에 대한 액세스를 허용하기 위해 비동기 액세스의 결과가 필요합니다.

Question

내 경로를 보호하기 위해 AuthGuard를 사용하여 사용자가 앱의 대시 보드를보기 전에 올바르게 로그인했는지 확인합니다.

AuthGuard :

getValidLoginCheck(): boolean { 
    let headers = new Headers(); 

    let options = new RequestOptions({ headers: headers }); 

    headers.append('authorization', this.getToken()); 

    this.http.get(this.baseUrl + 'api/auth/checkToken', options) 
     .map(res => res.json()) 
     .subscribe(data => {return data.message === 'valid token' }); 

    } 

내가 왜 이런 일을 알고,하지만 난 getValid ... 기능 대기를하는 방법을 만들 수 있습니다 다음 getValidLoginCheck()는 부울을 반환하지 않습니다 그러나

canActivate(
    next: ActivatedRouteSnapshot, 
    state: RouterStateSnapshot 
) { 
    // return true; 
    return this.userService.getValidLoginCheck(); 
} 

http.get이 끝나면 내 경로를 올바르게 보호 할 수 있습니까?

allowed: Observable<boolean> 
getValidLoginCheck(): boolean | Observable<boolean> { 
    let headers = new Headers(); 

    let options = new RequestOptions({ headers: headers }); 

    headers.append('authorization', this.getToken()); 
//save URL from routerStateSnapshot from canActivate like URL = state.url 
    this.http.get(this.baseUrl + 'api/auth/checkToken', options) 
     .map(res => res.json()) 
     .subscribe(data => { this.allowed = Observable.of(true); 

this.router.navigateByUrl (URL)를 활성화 할 수 있습니다에서

Answer 1

당신은 관찰 반환하여이 작업을 수행 할 수 있습니다; return data.message === '유효한 토큰'}, 오류 => {this.allowed = Observable.of (true);}) 반환 this.allowed; 당신이 관찰 응답을 활용하여 서비스의이 관찰 가능한 설정할 수 있습니다, 따라서

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean; 

:

Answer 2

CanActivate 방법은 여기에 응답 (관찰 가능한 약속 및 부울)의 3 개 종류를 받아들이는 방법의 서명입니다 에이 같은 관찰 가능한 :

canActivate(
    next: ActivatedRouteSnapshot, 
    state: RouterStateSnapshot 
) { 

     return new Observable<boolean>((observer: Observer<boolean>) => { 
     this.userService.getValidLoginCheck() 
     .subscribe(data => {observer.next(data.message === 'valid token')}, 
      error => { console.log("error while calling getValidLoginCheck"); observer.next(false)}); 
     observer.complete(); 
     }); 
} 

당신은 당신의 서비스에서 관찰을 반환해야합니다

getValidLoginCheck(): Observable<Response> { 
    let headers = new Headers(); 

    let options = new RequestOptions({ headers: headers }); 

    headers.append('authorization', this.getToken()); 

    return this.http.get(this.baseUrl + 'api/auth/checkToken', options) 
     .map(res => res.json()); 
    } 

,

이것은 내가 한 일이며 그것은 나를 위해 일하고있다. 나는 subscribe 메소드를 호출하여 옵저버와 http 응답을 보낸 다음 격리 된 메서드 내에서 응답을 평가하는 것을 선호하지만 이것이 내 개인적인 취향이다. 도움이됩니다.