When the backend is ready, it's time for frontend. In this lesson you will integrate user API with Angular. You will implement the user authentication flow.
Once the application's backend and the API are ready, it's time to go forward and build the frontend Angular application.
To be able to retrieve data using the API, remember to keep your backend built and running:
You are now about to implement the user authentication flow:
FavoritesComponentcomponent will display the user's favorite products.
AuthGuardservice will protect
FavoritesComponentfrom unauthorized access.
In case of unauthorized access, the user will be redirected to
To generate these components and services, type the following commands in a new terminal window:
The code you are about to implement will depend on two modules that
AppModule does not import by default:
To fix this, add two import statements to src/app/app.module.ts:
Then update the
Before you start coding
UserService, you need to implement the
User model that it will be using.
Create a new folder, src/model/. Inside this folder, add a new file, user.model.ts, with the following code:
Now you can start implementing
UserService. Start with declaring class fields, injecting services that you'll need, and checking if the user is authenticated. Add the following code to src/app/user.service.ts:
The code above introduces four variables:
API_URLis the URL of the API that the service is going to communicate with.
Observablerepresenting the currently authenticated user, or
nullif there is no authenticated user.
redirectUrlis a placeholder that
AuthGuarduses to define where the user should be redirected after successful authentication.
redirectParamsrepresents path params of the URL above.
The constructor injects two services:
HttpClientis used to perform HTTP calls to the API.
Routeris used to redirect the user to the desired URL after successful authentication.
Within the constructor, you've piped the
currentUser$ observable with a set of operators that includes a call to the
checkCookie() function whenever the value of
currentUser$ changes to
Notice that you've called the
subscribe() method of the
currentUser$ object. You should be aware of keeping opened subscriptions in your code, because doing this may lead to memory leaks.
Keeping a subscription open is only acceptable here because we're dealing with a service. Thanks to the Dependency Injection mechanism, you are guaranteed that you will only have one instance of this class (
UserService) in your application.
As to components, you should avoid opening subscriptions to them whenever you can. Components can be instantiated multiple times during your application lifecycle, which makes them difficult to manage. If you have an
Observable in a component, it is much better to pass it to the template and let an
async pipe handle subscribing to and unsubscribing from it.
checkCookie() function calls the /api/isLoggedIn endpoint, which checks that the cookie exists and validates its content. Based on the API's response,
checkCookie() emits the logged-in user (or
null) using the
Because you've set up your cookie as
Once you're done with handling service instantiation, it's time to implement the login functionality:
The code above introduces the following functions:
Observableemitting a boolean value based on what is emitted by
setRedirectUrl()is a setter for the
login()is responsible for user authentication using
passwordpassed as parameters. It's emitting authenticated user data via the
currentUser$observable, based on response from the api/login endpoint. When the user is authenticated, they are redirected to the URL specified in the