In this lecture, we're going to quickly refactor the solution we've written in their previous lecture
to understand why.
Let's look at the navigation component class file.
Inside this class, we have a method called log out.
We didn't outsource the job of logging out the user to a service because it was one line of code.
However, that's no longer true.
We are performing additional logic whenever the user logs out of the application.
We should refactor our code to outsource this logic into a service.
It's common to refactor a code as you're building an app.
Let's quickly refactor this function.
We will add this function to the authentication service.
Cut this function from the component class.
Next, open the authentication service file.
Inside this class, we all add the method with the public keyword.
We want this method to be accessible outside of the service.
Moving the function will produce a couple of heirs.
They're mostly related to the service used by this method.
Our services need to be moved from our component to the authentication service back in the component
class.
We will grab the router import statement.
We don't need to import the angular fire off service because it's already injected into the authentication
service.
Therefore, we can safely remove this important statement.
Next, let's move the router import statement over to the authentication service.
After word, we will move the router instance from the components constructor function to the services
constructor function, the angular fire authentication instance can be removed.
There's one more error in the log function.
We need to update the name of the angular fire authentication service to authentication.
It's the same service, but with different names.
There's one more modification we will make to the logout function.
The log malfunction is expecting an event object as an argument.
In some cases, we may not be able to supply this object.
We should make this argument optional.
Next, we need to check if this argument is being supplied.
We will wrap the prevent default function with a conditional statement that checks if the event object
is not empty.
Our service is ready.
The last thing we need to do is update, the navigation component to use this service is log out method.
Open the navigation template file.
Search for the logout link in the template.
We will update the function to off dock logout.
Let's give our app a quick test in the browser.
Try logging out on a page other than the homepage.
We are redirected to the homepage.
We have the same functionality as before.
The only difference is that we've outsourced the logic into a service for convenience and reusability.
We will continue learning about the router in the next lecture.