One of the questions I hear the most often when I teach Angular is: How do I implement authentication? There are a lot of options out there so I’ll stick with the tools Angular provides out of the box, which allow to implement authentication without any external dependency.
First, I’m assuming that you’re familiar with the Component Router. In a nutshell, the router decides which component to display based on the current URL, thus emulating multi-page behavior in Angular (which is a single-page application framework).
It’s easy to guess that the router will be involved in all-things authentication. By default, configuring a route in the router looks like this:
Now if I want to protect the above route, I can use a guard to do that. The route declaration then becomes:
In the above code, AuthGuard is a class that implements the CanActivate interface, which consists of a single canActivate method that returns an Observable. Below is what a basic guard looks like – it has to be an Angular service – note that this one doesn’t do much as it would basically let all requests go through since it always returns true:
In order for that guard to be useful, it would have to use a LoginService that would tell whether the current user is logged in or not. That’s where the implementation becomes specific to your application as that service will depend on how your back-end wants to authenticate the user. The guard code then becomes:
Note that you can also use the guard to redirect the user to a LoginComponent whenever the user has to log in. Here is the full code of such a guard:
You now know the basics of how to implement authentication with Angular. The specifics of what the LoginService would do depends on your back-end, though it is very likely that you will have to make a request to your authentication server and get some kind of token or session object as a result.