Global Guards Solution

[00:00:00]
>> What I will do now is I'm gonna pull away this. So I'm just gonna add metadata here. So I pulled away my navigation guard, so I'm not using it anymore. And then I'm gonna create an authRequired: true to my, Admin screen, as well as my authRequired screen.

[00:00:39]
Awesome, so I hooked that up, which means, hang on, store is not being used. I'm gonna uncomment the store or comment out the store for now, because I wanna make sure that things are working. So I pulled out my navigation guard, which means that I should at liberty be able to access whatever I wanna access, which is fair, I can.

[00:01:02]
And so I'm gonna add that back in. And I'm going to also do, A check to do router.beforeEach. And then it runs some code here. And so I don't have this memorized, so I'm going to grab this. So all I'm doing now is I'm checking for authRequired, and then if authRequired, it returns next.

[00:01:47]
And then the next step is to also check those getters. I think it was, yeah, square brackets. And then I can do next else it goes to /login. So this code should make it such that it automatically reroutes to login. If I try to go to another page, like inventory, it kicks me out, so that's good.

[00:02:30]
That checks whether a user's logged in. That was the exercise we did, I believe, yes. And then, of course, the next step is to sort of hook up the other logic pieces that we didn't talk about. I didn't talk about how exactly to log a user in. We've just been sort of hard coding the things, but none of these things work.

[00:02:48]
So let's change that so that it works. And for this to work, of course, you might want to hook into the store and the router. So far we looked at the router accessing the store, but now what we wanna do is we want the store to access the router.

[00:03:08]
And the thing with that is, you can't access the router from within the store, you just can't. But there's a way in which you can have the two talk to one another, and that's within the component itself. So let's assume we have a method called handleLogin. And we wanted the, handleLogin to dispatch a login method, and then push the user to the admin route.

[00:03:35]
So in this case, it pushes it to slash. So that's one way in which we can hook a Vuex, in this case action, with a router-specific thing. So we're gonna dispatch a login. So what we'll do is we'll do this.$store.dispatch. I believe I called it login, I need to check if it's log with capital I.

[00:04:01]
Yes it is, so that's logIn. And then, of course, we can do something with it. We don't really care about the return value, but we want it to, $router.push. And so here what we're doing is we're essentially pushing to the slash itself. So here in this code that I showed you, I'm doing a route query to check where the redirect happened.

[00:04:40]
But for now what we'll do is we'll just push it to slash. So that hooks that piece up, I believe. I think logIn is already working. So let's say, Password, and if I click Login, it logs me in automatically. And then, of course, this hasn't been hooked up yet, so it needs to be hooked up, so let's do that as well.

[00:05:11]
We're going to look in OperatorView, you might see this particular logout. What we'll do here is we're going to dispatch, again I need to check if I capitalized it. I did, [LAUGH] I should just not second guess myself. logOut, and then from there, I'm going to do a push back to the login screen.

[00:05:43]
Cuz the assumption is that the user is no longer logged in. So from that, if I click, well I need to refresh. So let's assume I logged in. And I want to log out. Ta-dah, it logs me out. So this is one way in which you can have Vuex and Vue Router talk to one another.

[00:06:13]
And that's a really useful aspect in which we can hook all these different pieces up.