Angular 5身份验证

Question

我试图了解Angular和.Net核心的身份验证过程，它向我发送了一个jwt Bearer令牌（Works）。所以我的问题是我不知道我应该在guard和auth服务中做些什么来正确管理用户（稍后有角色）。但我尝试了一些东西，现在我不知道在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');
 }
}

现在我不知道如何检查令牌是否在那里以及如果它的Observable如何返回布尔值。登录完成后，检查未来调查的重要性是什么？

而且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。注意：您需要在登录组件中进行订阅。

login( email:string, password:string ) :Observable<boolean>{
  return this.http.post('/login', {email, password})
    .map(data => {
      let userAuth = data;
      if(userAuth) {
        localStorage.setItem('currentUser', JSON.stringify(userAuth));
        return true;
      }else{
        return false;
      }
    }
}

现在关于你的警卫。你检查的确非常一周。您可以请求检查它是否有效，但这会使您的应用程序变得非常慢。在我看来，最好只检查令牌在前端是否有效。这假设您后端服务在每个请求上检查令牌。由于前端的所有内容都可以修改，因此无需在前端处理此方法。同样，请确保您的后端根据请求检查您的令牌。

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}});
}