CODEWITHSUNDEEP
angularjwtbearer-tokenauth-guard
Amsel
Amsel

Reputation: 107

Angular 5 Authentication

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

 }

}

Upvotes: 2

Views: 1464

Answers (1)

Robin Dijkhof
Robin Dijkhof

Reputation: 19278

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

Upvotes: 1

Related Questions