Angular 角5认证

我试图了解Angular和.Net core的身份验证过程，它向我发送一个jwt承载令牌（Works）。所以我的问题是，我不知道应该在guard and 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');
 }
}

@Injectable（）
导出类身份验证服务{
isLoggedIn=false；
构造函数（私有http:HttpClient）{}
登录（电子邮件：string，密码：string）：可观察{
this.http.post（'/login'，{email，password}）
.订阅（数据=>
{
//TODO:检查令牌？？？
让userAuth=data；
if（userAuth）{
setItem（'currentUser'，JSON.stringify（userAuth））；
返回true；
}否则{
返回false；
}
},
（错误：HttpErrorResponse）=>{
if（err.error instanceof error）{
日志（“错误客户端”）；
}否则{
log（“服务器端错误”）；
}
});
//我应该返回什么？如何返回
}
注销（）{
localStorage.removietem（'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}});

 }

}

@Injectable（）
导出类AuthGuardService实现CanActivate{
构造函数（专用路由器：路由器）{}
canActivate（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）：
布尔|可观测{
if（localStorage.getItem（'currentUser'））{
返回true；
}
this.router.navigate（['auth/login']，
{queryParams:{returnUrl:state.url}}）；
}
}

只是我的评论和想法

我个人会在我的登录方法中这样做。这实际上会返回一个可观察的结果。注意：您需要在登录组件中使用subscribe

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

登录（电子邮件：字符串，密码：字符串）：可观察{
返回此.http.post（'/login'，{email，password}）
.map（数据=>{
让userAuth=data；
if（userAuth）{
setItem（'currentUser'，JSON.stringify（userAuth））；
返回true；
}否则{
返回false；
}
}
}

现在谈谈你的守卫。你的检查时间确实非常短。你可以请求检查它是否有效，但这会使你的应用程序非常慢。我认为最好只在前端检查令牌是否有效。这假设你的后端服务在每个请求上都检查令牌。因为前端上的所有内容都可以修改在您的前端没有保存方法来处理此问题。同样，请确保您的后端在overy请求时检查您的令牌

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

canActivate（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）：布尔值|可观察{
if（localStorage.getItem（'currentUser'）&&
JSON.parse（localStorage.getItem（'currentUser'））.expireTime

问题出在哪里>？发布代码，而不是它的图像。我假设您也想存储令牌。或者

currentUser

的内容是什么？是的，如前所述，问题出在哪里？：）@AJT_82我得到了一个令牌和要存储的过期日期。在那之后，我也想存储索赔，但这可能是另一个问题。如果您有一些好的示例或链接，我很乐意与您分享。您的auth guard正在执行一个非常周的控件，它正在检查浏览器的localStorage是否有一个名为“currentUser”的元素。。相反，一个好的身份验证守卫会向服务器发出请求，并检查currentUser的令牌是否有效。。考虑到任何人都可以手动添加一个带有该名称的LoalSturk值，然后访问您的路由！好吧，我明白了。如果我有角色呢？顺便说一句，谢谢你的好阿恩瑟。只需在你的守卫中建立它。也许不是重定向，而是返回false。