각도 5 인증

Question

각도 및 .Net 코어 jwt 무기명 토큰 (작품)을 보내는 인증 프로세스를 이해하려고합니다. 그래서 내 문제는 내가 (나중에 역할을 가진) 사용자를 적절하게 관리하기 위해 내가 보호 및 인증 서비스에서해야 할 일을 제대로 모른다는 것이다. 하지만 몇 가지 물건을 시도하고 지금은 AuthService에서 내가 해야할지 모르겠다.

수정 로그인 게시물이 완료되면 서버에서 토큰 및 만료 날짜가 표시됩니다. 그래서 나는 그것들과 나중에 idk를 어떻게 주장 하는지를 저장하고 싶다. 그리고 내가 무엇을 돌려줘야하는지.

이 내 AuthService 같은 모습입니다 :

@Injectable() 
export class AuthService { 

isLoggedIn = false; 

    constructor(private http: HttpClient) {} 

login(email:string, password:string) :Observable<boolean>{ 
    this.http.post('/login', {email, password}) 
    .subscribe(data => 
    { 
     //TODO: check for Token ??? 
     let userAuth = data; 
     if(userAuth) { 
      localStorage.setItem('currentUser', JSON.stringify(userAuth)); 
      return true; 
     }else{ 
      return false; 
     } 
    }, 
    (err: HttpErrorResponse) => { 
     if(err.error instanceof Error){ 
     console.log("error client side"); 
     }else{ 
     console.log("Server side error."); 
     } 
    }); 
    //what should i return ????? and how 
    } 

logout() { 
    localStorage.removeItem('currentUser'); 
} 
} 

지금 내가 토큰이 존재하고 관찰 가능한 경우 부울을 반환하는 방법을 여부를 확인하는 방법을 모르겠어요. 이후 로그인이 완료되면 향후 조사를 확인하는 것이 중요합니다.

그리고 m AuthGuard은 다음과 같습니다

@Injectable() 
export class AuthGuardService implements CanActivate{ 

constructor(private router:Router) { } 

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

if(localStorage.getItem('currentUser')){ 
    return true; 
} 

this.router.navigate(['auth/login'], 
    {queryParams: { returnUrl: state.url}}); 

} 

} 

Answer 1

그냥 내 발언과 아이디어를.

개인적으로 로그인 방법에서이 작업을 수행합니다. 이것은 Observable을 반환합니다. 참고 : 로그인 구성 요소에 가입해야합니다.

이제는주의해야합니다. 당신은 실제로 매우 일 주일간 확인합니다. 그것이 유효한지를 확인하라는 요구를 할 수는 있지만, 이것은 당신을 매우 느리게 만들 것입니다. 내 의견으로는 토큰이 프론트 엔드에서 유효한지 단순히 확인하는 것이 좋습니다. 이것은 모든 요청에서 백엔드 서비스가 토큰을 확인한다고 가정합니다. 프론트 엔드에있는 모든 것을 수정할 수 있기 때문에 프론트 엔드에서이를 처리 할 저장 방법이 없습니다. 다시 말하지만, 지나친 요청에 대해 백엔드가 토큰을 확인하는지 확인하십시오.

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> { 
    if(localStorage.getItem('currentUser') && 
    JSON.parse(localStorage.getItem('currentUser')).expireTime < new Date().getTimeInMillis()){ //You need to have the expire value in your token. 
     return true; 
    } 

    this.router.navigate(['auth/login'], {queryParams: { returnUrl: state.url}}); 
}