Role-based routing using guards

This is the most elemental and important part of your application. With lazy loading, we have ensured that only the bare minimum number of assets will be loaded to enable a user to log in.

Once a user logs in, they should be routed to the appropriate landing screen as per their user role, so they’re not guessing how they need to use the application. For example, a cashier only needs access to the point of sale (POS) screen so that they can check out customers. In this case, cashiers can automatically be routed to that screen.

The following is a mock-up of the POS screen:

Figure 6.7: A POS screen mock-up

Let’s ensure users get routed to the appropriate page after logging in by updating the LoginComponent.

Update the login logic to each route per role in the function named homeRoutePerRole:

app/src/login/login.component.ts
async login(submittedForm: FormGroup) {
  ...
    this.router.navigate([
      this.redirectUrl...