Angular 5 认证

Question

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

编辑登录 post 完成后，我将从服务器获取令牌和到期日期。所以我想存储那些，后来也声称但我不知道如何。以及我应该 return。

这是我的 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');
 }
}

现在我不知道如何检查令牌是否存在以及如何 return 布尔值（如果它是 Observable）。登录完成后，检查哪些内容对以后的调查也很重要？

而 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

只是我的评论和想法。

就我个人而言，我会在我的登录方法中这样做。这实际上是 return 一个 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}});
}

Angular 5 认证

Angular 5 Authentication

jwt

bearer-token

angular

auth-guard