I am trying to implement a frontend with angular, but I am not sure if my login and overall flow is correct.

I have a login component for the login page which sends the user information to an auth service for authentication, then I save the auth token in the localhost and send it with every get request for the user data, but also I need to check for expired jwt token so I logout the user and clear the localstorage from the information. But I am not sure where this logout should happen.

Also my home page displays 2 different views if the user is logged or not, so I have a boolean in the service that I check. This is my flow:

The login component: Here the error is bind to the html lets say if credentials are invalid

export class LoginComponent implements OnInit {
  error : string;

  constructor(private authService : AuthService) { }

  ngOnInit() {
    this.authService.login("Robocop1", "password").subscribe(
      data =>{
        localStorage.setItem('Authorization', data['token'])
        this.auth.isLoggedIn = true
      },
      err  => this.error = err['error']
    );
  }

}

Service component:

export class AuthService {

  isLoggedIn : boolean = false

  constructor(private httpClient : HttpClient) { }

  login(username, password) {
    return this.httpClient.post('http://localhost:8090/login', {
      username,
      password
    })
  }
}

This is my home component that checks first if the user is logged:

export class HomeComponent implements OnInit {

  isLoggedIn : boolean

  constructor(private auth : AuthService) { }

  ngOnInit() {
    this.isLoggedIn = this.auth.isLoggedIn

  }

}

And displays different part of the html:

   <div *ngIf="!isLoggedIn">
       <p>
           hey user
      </p>
   </div>
   <div *ngIf="isLoggedIn">
       <p>
           not logged
       </p>
   </div>

So my question is is injetcing a dependencies in the home component ok just to check for single boolean and is there a better way to do it.

Also I can have another data component where I get user data from the database. In the post request I am sending the authentication token so I will have something like:

this.dataService.getItems().subscribe(
    data =>{
        this.userData = data
    },
    err  => {
        if(err['error' === 'Jwt token has expired'){
            this.authService.logout()
        }else{
            this.error = err['error']
        }
    }
);

So is again injecting dependency just to call a logout method ok? should this logout method be in the authService or elsewhere?

1 Answers

1
Community On

So my question is is injetcing a dependencies in the home component ok just to check for single boolean and is there a better way to do it.

If your application will be about a couple of simple pages and will not expand, your approach might be enough but for it the best practise is using Angular Route Guards A route guard is a CanActivate implementation in which you implement your authentication/authorization logic to guard your routes (pages)

So is again injecting dependency just to call a logout method ok? should this logout method be in the authService or elsewhere?

This should be done implementing an HttpInterceptor. So that you don't need to handle each http call for handling faulty responses or adding authorization tokens. Catching the error response inside your http interceptor and logging out is the way to go. That way you do not have to inject your corresponding service into each place this is required. HttpInterceptor is also not a big deal. You can follow this step by step guide and implement your own