Per Route Guard Practice

[00:00:00]
>> I have my component running here. And it has a list of machines. The exercise is to add a per-route navigation guard. So the idea is that I don't want this to be the default. I want this to be the default. So to do that, I will move into my, Router code specifically so I'll cd into, I have to cd out.

[00:00:35]
Router and then I will look at the routes component. So again, route.js router slash index.js, whichever you prefer is fine. And so what I wanna do is I want to go into my LoginScreen because, actually my InventoryScreen, so I want to add my per-route navigation guard here. So what I'll do is I'll do a beforeEnter to, from, and next.

[00:01:11]
I think I need reference to this, yes. And then with this, I am essentially just checking the store. One other thing to note that I showed in this particular stage is that there's an import store. And we're gonna need access to that because your router file doesn't have access to this [INAUDIBLE] store.

[00:01:41]
You need to import the store in order to use it. So I'm gathering the getter, and I specifically care about, I believe I have a method call is locked in. This is the part where I forgot if I capitalized it properly. And then I do that. So I create a navigation guard very easily and I hope that works.

[00:02:25]
So if I navigate to localhost.8080, it automatically does not do what I need to do. [LAUGH] Why? Hold on. Okay, Let's figure out what I did. BeforeEnter: (to, from, next), if store.getters is logged in and that's probably because I have a user of item and I need it to be null.

[00:03:05]
That was my dad. There you go. So now automatically when I try to access my route, I'm navigated to login. And that's because users now, so previously, my user was an object. That was totally a typo on my part, I apologize. But now that user doesn't exist so it's null, it will return me to the login page.

[00:03:27]
So that's great, that's my first per-route navigation guard using Vuex. So really useful, but I think it's useful to hook that into various pieces of the application as well because, I have, let's look, I have an admin screen as well as an InventoryScreen, let's say. So I don't want users to have access to inventory because currently they can access inventory quite easily.

[00:04:00]
And that's not a good thing because I don't want them to have access to it. So what I'm gonna do is I'm going to, Essentially repeat what I did earlier. So that anytime a user tries to access inventory, They are navigated back to login so it automatically shuts anyone who's trying to access routes they're not supposed to out.

[00:04:28]
So that's really nice. This is all great because per-route navigation guards are really useful as a way of navigating specific routes that you want to protect from unauthorized users. But as you might notice, in applications oftentimes, there are many routes that you don't want people to have access to.

[00:04:47]
And it can be really hefty for you to constantly write per-route navigation guards for every single route. And so this sort of per-route navigation guards works in the instance when you want one route specifically protected. Or you have things that are very specific to that route that you wanna check for like permissions and so on.