Dynamic UI components and navigation
AuthService
provides asynchronous auth status and user information, including a user's name and role. We can use all this information to create a friendly and personalized experience for users. In this next section, we will implement the LoginComponent
so that users can enter their username and password information and attempt a login.
Implementing the login component
The login
component leverages the AuthService
that we just created and implements validation errors using reactive forms.
Remember that in app.module.ts
we provided AuthService
using the class InMemoryAuthService
. So, during run time, when AuthService
is injected into the login
component, the in-memory service will be the one in use.
The login
component should be designed to be rendered independently of any other component, because during a routing event, if we discover that the user is not properly authenticated or authorized, we will navigate them...