사용자 데이터가로드 될 때까지 응용 프로그램 차단

Question

나는 angular2 응용 프로그램을 작성하고 있습니다. 사용자를 인증하기 위해 로컬 저장소에 토큰을 저장합니다. 이 토큰에는 사용자를 식별하는 데 필요한 약간의 정보 만 포함되며 사용자 역할 등의 추가 정보는 없습니다. 이제 이것을 보관하고 싶습니다.

사용자가 페이지를로드 할 때 (경로) 토큰이 저장된 경우 사용자 데이터를 검색하기 위해 XHR을 만들고 싶습니다. 서버가 데이터를 전송할 때까지 응용 프로그램 (라우터?)을 기다리고 싶습니다.

내 질문은 :이 요청을 어디에 배치해야하며 서버가 응답 할 때까지 응용 프로그램을 어떻게 차단합니까?

Answer 1

응용 프로그램의 특정 경로를 보호하기 위해 보호 기능을 사용할 수 있습니다. 가드에는 비동기 작업을 수행하고 사용자가 경로를 탐색 할 수 있는지 여부를 결정할 수있는 CanActivate 메소드가 있습니다.

구현에 대한 자세한 내용은 here 및 here입니다.

주요 아이디어는 아이들에게 모든 저장된 쿠키와 사용자 정보를 검색하고 사용자가 로그인되어 있는지 확인합니다 'AuthGuard'에 의해 보호하면 응용 프로그램에 대한 경로를 만드는 것입니다.

또한

당신이 코드를 참조 할 수 있습니다 아래 : 여기

import { Injectable } from '@angular/core'; 
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; 

import { Observable } from 'rxjs'; 

@Injectable() 
export class AuthGuard implements CanActivate { 
    constructor(private router: Router, private userDataService: UserDataService) {} 

    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 


     return Observable.fromPromise(this.userDataService.isUserAuthenticated()).map((isUserAuthenticated: boolean) => { 
      return true; 
     }).catch(error => { 
      this.router.navigate(['/login']); 
      return Observable.of(false); 
     }); 
    }; 
} 

isUserAuthenticated 방법은 우리가 사용자 정보와 서버의 응답을 받았을 때 거절 해결 될 것입니다 약속을/반환