Vuex & Vue Router

[00:00:00]
>> The next part is adding onto the concepts that we talked about. So Vuex is useful when used in the context of other pieces, so Vuex is useful in the context of Vue, obviously. But Vuex is also useful when using other parts of the Vue ecosystem, like Vue Router.

[00:00:19]
So for example, you might have an application and we looked at the application on the right, the screenshot on the right, which is just a list of all machines. Let's assume that we want to put a login screen in the top of it, so only admin and people with a certain username and password can log in to see this particular screen.

[00:00:38]
So this is one instance in which Vue Router is really useful because it has the ability for you to manage how users flow through the applications. You also are able to protect routes, so users without certain permissions or users who are not logged in cannot access parts of the application that are protected and secure.

[00:01:01]
So here we have a login screen and then we have the, we'll call it a quote unquote admin screen as well. And this is not a course on Vue Router, so I won't actually talk about Vue Router a lot, except for some pieces here and there. But I'll be talking about in the context of Vuex, so there'll be some pieces of Vue Router.

[00:01:22]
Don't worry if you don't fully understand Vue Router, you don't need mastery of it to use it. For this instance, I'm using Vue Router by importing Vue Router, it's essentially a module, so I'm importing it, and then I'm doing Vue.use. And if you remember from the Vuex code that I showed you, it's not much different because Vue has to use Vuex, so it has to also use Vue Router.

[00:01:51]
So your router code is where you initialize all of the routes in your application. Generally speaking, you do this only if you want fine grained control over the routes, which again can be really useful if you want to manage the flow of the application. So here, I'm defining two routes because I currently only have two screens.

[00:02:11]
I have a admin screen, which is called Dashboard, and then I have a login screen, which is called LoginScreen. And so again, those two, the path is / and /login respectively. And then once I have my router defined so it's in a router.js file, let's say, I can include that into my main.js, very similar to how I'm including the store.

[00:02:34]
I'm just parsing it into the Vue instance, I'm parsing router straight into the instance, so that's how you use router in a nutshell. And again, I want to focus a little bit on the parts of how you can hook up your router to use Vuex, which can be really useful as your application grows in size and becomes more complex.

[00:02:56]
So here, we have the different pieces of what you can parse to your route. Routes is an array of routes essentially, so path is the path that the URL use essentially like /, or /login. And I parse in the component as well, so the component is Dashboard, cuz that's the specific component I want to be loading.

[00:03:17]
And another piece of Vue Router, I know I mentioned, I wasn't gonna go into Vue Router. But I think this is a really useful and handy concept as you work your way through Vue Router and Vuex, is navigation guards. And this is a slightly more advanced concept but bear with me here, it will be incredibly handy as we work through these applications and these concepts.

[00:03:42]
So I'm gonna talk about per-route navigation guards, which is the ability for you to gate a specific route. So irregardless of whatever other components and other routes do, I'm only defining my Dashboard route which is supposedly admin specific to have these navigation guards. So it doesn't check before it lets people through, and so before enter is called, the per-route navigation guard.

[00:04:10]
And so it takes into from a next, again, I won't go into much detail here. But one thing to note is that I'm just adding navigation guard to my Dashboard component because it's admin. And then here's where I'm actually utilizing my store because I'm trying to access whether or not a user has been logged in.

[00:04:29]
So let's assume that I have a getter called isLoggedIn, I'm not using modules here, it's just a global namespace. You can feel free to use modules if you like, but the concept stands that you can use Vuex modules in Vue Router quite easily. I'm just checking to make sure that a user is logged in.

[00:04:48]
And if they are logged in, what next does is it essentially lets a user pass through. So you're not telling it to go anywhere, you're just allowing it to pass through. The else clause here is telling a user where to go in the event that a user is not logged in.

[00:05:05]
So if a user is not logged in, you have to pass them to the /login page.