Angular 5 Authentication

Question

I'm trying to understand the authentication process with Angular and .Net core which sends me an jwt Bearer token(Works). So my Problem is that I don't know what i should do in the guard and auth service to manage users (with roles later) properly. But I tried some stuff and now I don't know what I should do in my AuthService.

EDIT I will get a Token and expiration date from server after login post is done. so i want to store those and later also claims but idk how. and what i should return.

This is how my AuthService looks like:

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

Now i don't know how to check if the token is there and how to return boolean if its Observable. And After After login is done what is also important to check for future investigations?

And m AuthGuard looks like this:

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

 }

}

I'd assume you'd want to store the token as well. Or what is the content of currentUser? And yes, as mentioned, what is the problem? :) — AVJT82
– AVJT82, Commented Dec 18, 2017 at 13:56
@AJT_82 I get a Token and expiration date which i want to store. after that i would like to store also claims but thats maybe another question. if you have some good examples or links i would be happy if you could share. — Amsel
– Amsel, Commented Dec 18, 2017 at 14:01
Your auth-guard is doing a very week control, it is checking if browser's localStorage has an element called 'currentUser'.. Instead of that a good auth guard make a request to the server and check if currentUser's token is valid.. Consider that anyone can manually simply add a localStorage value with that name and then have access to your routes! — Rodriguez David
– Rodriguez David, Commented Dec 18, 2017 at 14:17

Robin Dijkhof · Accepted Answer · 2017-12-18 14:41:55Z

1

Just my remarks and ideas.

Personally I would do this in my login method. This would actually return a Observable. Note: you need the subscribe in your login component.

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

Now about your guard. You check is indeed very week. You could make a request to check if it is valid, but this would make you application very slow. In my opinion its better to simply check if the token is valid on the front end. This assumes you backend services check the token on every request. Since everything on the frontend can be modified there is no save way to handle this on your frontend. Again, just make sure your backend checks your token on overy request.

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

answered Dec 18, 2017 at 14:41

Robin Dijkhof

19.3k14 gold badges72 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Amsel Over a year ago

okay i understand. and if i what if i have roles? btw. thanks good awnser.

Robin Dijkhof Over a year ago

Simply build it in you guard. Perhaps instead of redirecting, just return false.

Collectives™ on Stack Overflow

Angular 5 Authentication

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related