48 - Handle Logout
Transcript
00:00Alright guys, welcome back. In this lesson we're going to look at handling the
00:04logout operation. So we already know that we talk to the API, get the token and
00:10once the token is present, we can use that as an indicator that the person is
00:15currently logged in and even more so if it is valid at the time the app is open
00:21then they remain logged in. Otherwise we basically log them out, send them to the
00:26registration page. So what we want to do is add an actual logout operation or
00:32logout button that would allow them to log out at will. So what I've done to
00:39start off is create a new component called logout page. Now if you pay close
00:44attention in my in my solution explorer you'll see that I only have the page I
00:49don't have an example. So with that I simply added a new item and we had
00:55looked at that earlier in the course. Add new item and for .NET MAUI I added a
01:01C-sharp content page. So that means I didn't get the XAML and the C-sharp, I
01:08just got the C-sharp file. I just took a different approach this time because
01:11it's really just going to handle certain things in the background. I don't need
01:15the whole XAML and everything on top of it. It came by default with this content
01:21section and I just changed the text to say logging out. So for the split second
01:27that it might be displayed we'll just display that text even though of course
01:32we really don't need to display much if any content on this logout content page.
01:37So you can decide that for yourself with your app. Then I also created a logout
01:43view model. So we know now with the view models one we create them. I created this
01:47one logout view model and once we create the view model we inherit from the base
01:52view model we also need to make sure that we register both the view model
01:57that is going to be used and the new page. Alright so once you create those
02:03two, create the new page, create the view model, just register them so you don't
02:07forget later on. So now with the logout view model that has inherited from the
02:14base view model, I have a relay command here that says logout and I'm just going
02:20to call that logout operation inside of the constructor. So this logout operation
02:26is going to remove the token from secure storage, null out all of the user info
02:31and then navigate to our login page. Alright so I already know about
02:37navigation. We already know that we want to go to the login page once the person
02:41has logged out. So if they force the logout then show them the login or you can
02:46force them to go to whichever landing page is appropriate for the way your app
02:51is going to run. So once you do that then that should be fine. Then in the menu
02:59builder I also made an adjustment where I add the logout button to our flyout
03:06menu item. So of course we have the if statements for if their role is
03:11administrator or user but regardless of their role I want to add this logout
03:18flyout item. Alright so title is logout, the root is logout page, it's going to
03:23display as a single item and we only have the shell content here where I just
03:29do the same thing that I did for the others and of course you can choose a
03:34more appropriate icon and then we add it to the shell content, the shell
03:39current items. So once the user has logged in they'll see whatever menu
03:44options they need to see and then they'll see their login. So one thing
03:52that I've done is I removed the additional shell content for no
03:55particular reason. I just did it because I just wanted to shorten my code a bit
03:59but we already saw the relevance of it and how it works so that you don't have
04:04to do that. I'm just showing you that I did it which is why my app might look
04:08slightly differently when we are looking at it. So now that you have the view
04:13model created just jumping back over to the page of course we inject it and then
04:19we set it as the binding context. So as soon as we hit the login page we hit the
04:25binding context which will instantiate the login view model and then the login
04:30view model once instantiated will effectively do the logout operation. So
04:34let's see what that looks like. Alright here we are I've already logged in and
04:38when I look at the menu items I'll see here that I have one that says logout. So
04:43when I click logout then look at that it just goes straight back to the login
04:47page. So to logout of course all you have to do is remove the token which is the
04:51main symbol of being logged in. We want to remove any other data that was set at
04:57the time of login as well as any preferences that you may have created.
05:01And finally we want to navigate to a page that indicates that you are not
05:07authenticated send them to that page so that they can do what they need to do
05:11from that point onward. And that's really it for the logout operation.