Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Web app with node express and vue 400x277
  • Overview
  • Transcript

6.1 Securing Our Routes

Security is a huge topic. We can barely scratch the surface here, so we'll focus on the most important part: preventing users from accessing things they shouldn't have access to. In this lesson, we'll finish our server security by implementing admin middleware, and we'll enforce some security on the client to prevent users from accessing views they shouldn't have access to.

Related Links

6.1 Securing Our Routes

Security is such a huge topic that we can spend an hour, two, and maybe even three hours talking about how to secure your Web applications. So allow me to cheat a little bit. Here at Tuts+ there is another course on how to secure an Angular application. Now, we did not use Angular. But the same ideas and concepts apply to our Vue-based application, and especially the server side. Because in that course, we used a Node application that uses Express. So I highly recommend that you check that out in order to better secure your applications. But for this course, I want to talk about keeping users out of resources that they shouldn't have access to. And one of those is our admin section. So let's log out. I'm logged in as a normal user, and we are going to just make a request. I'm not logged in, and we're going to try to go to admin/currencies, and look what happens. Now, yes, we have to know that that exists. But also, be aware that there are some very smart people. And even if you obfuscate and minify your JavaScript code, there are tools that can prettify that code, and they can use that to try to find weak spots. So even though there was no mention that this admin section existed, they could find it and try to exploit it. So the very first thing that you need to do is secure your server, because your server is the last line of defense for your application. So that means if your routes need to be secured, then secure your routes. And we have kind of already done that with the portfolio routes, but we didn't with the admin routes. So let's do that. Let's go our auth file, and we are going to write another function. Actually, we're going to copy and paste that function. We're going to change the name to isAdmin, and all we're going to do is add another check. So if we make it past the err and the user, then we want to check to see if the user is not an admin. And if they aren't, they get kicked out. So, a pretty easy little thing there, so let's export this along with isAuthenticated. And then inside of our api file, we will simply use this middleware. So this is going to protect our currency endpoints. Now, the UI is still available and, ultimately, we don't want that. But still, this is on the client and we don't control the client. Anybody that is knowledgeable can access that and be able to do anything that they want with the client. But the server, well, we control it. And by just setting up that middleware, we have now prevented a normal anonymous user from accessing it. So let's login now, and let's use our normal user, and let's try to access that once again. Now, because we are using the isAdmin middleware, then it's obvious that this won't work. But it's always good to check, just to make sure. And sure enough, we can still access the UI, but the server code is forbidding access to those resources. So from that standpoint, we are secure. But we also want to take this a step further, and we want to make sure that users that aren't going to break the rules, won't have access to other parts of the UI. Because it's not enough to just hide things here and there. If we do look at the app component, inside of src, and then App.vue, this layout page. Some of these links are hidden, some are not, based upon whether or not the user is logged in or if they are in admin. But even hiding them, they're still available. And a lot of times, we don't want them to be available. So what we can do then is add some security logic to our router. So that as a user tries to navigate to another page or another component, then we can add some checks to see, is this user authenticated? Yes, okay, they can go on. Are they an admin? No, okay, well, we won't show that to them then. So let's go to our router. And there's nothing built in, unfortunately. We have to write code to make this work. But what we can do is add some extra information. For example, our portfolio here, it requires authentication. So we can add a meta property here, and we can say that this requires authentication, and we'll set that to true. Now, for our routes with currencies, we want to take it a step further. Yes, the user needs to be authenticated, but yes, the user requiresAdmin. Now, that's kind of redundant, but just go with me here. Now this unfortunately, alone, still is not going to be enough. We still have to write some code. So what we're going to do then is, first of all, create this router object and store it within a variable, so that we can then access that. But we will export that again. And now we are going to hook in to a method called beforeEach. This accepts a callback, and this callback function is called every time you attempt to navigate to a different view. So if we are sitting at the home view and we click on login, then this callback function is going to execute. And because we have hooked into it, we can add some checks here. So the first thing we want to do is check to see if what we are going to, has that requiresAuth property. So we can say that if our route has a meta and requiresAuth, then there are some checks that we need to do. Otherwise, if it doesn't, then that's fine. The user has access to it, so we'll just send them on to the next thing. So we have where we're going to, where we're coming from, and then what is next, basically. And we get to kind of control what is next. So if the user is trying to navigate to something that does not require authentication, well, then that's fine. We'll just let them go on to the next thing. However, if it does require authentication, then we need to check to see if the user is authenticated. And on the client, we have been using localStorage for that, so we'll try to get the item with the key of token. If this is null, then the user is not logged in, and so we can send the user to the login page. And we'll do with the next function. We'll pass in an object that has a path property. We'll set that to login, and then we can set params. And in this case, we can say that the next URL afterwards is going to be wherever you were going to. So fullPath, there we go. All right, now, if we do have a token value, well, the user is logged in. So we need to do some more checks here. So let's, first of all, get our user. Because if we have a token, we have a user. And this is stored as JSON in localStorage, so we're going to parse it into an object that we can use, getItem. The key was user. And so now we're are going to, once again, check to see if what we're trying to navigate to has that requiresAdmin, I should say. So we have our route.meta, and then requiresAdmin. Now, if it requiresAdmin, then we want to check, is this user an admin? So we will say, if (user.isAdmin). Well, yes, they are an admin, they can go on to what they're trying to go to. Otherwise, we need to send them to the login page. They might already be logged in, but that's going to signify that they don't have the permissions to access our admin section, so there we go. Now, if the route does not have this requiresAdmin, well, then they are already authenticated. So all we really have to do then is say, okay, you can go on to the next. And so there we go, let's get rid of some of this white space. It's a little convoluted, but it'll work. So let's go to the browser. We are logged in as a regular user, because we see Portfolio here. Let's logout, let's try to go to admin/currencies. It routes us back to the Login page. Great, okay, so let's login as admin, no. Well, yeah, let's login as user@user.com. We can get to our Portfolio, that's great, okay? So let's, once again, try to get to our currencies, and we can't. Okay, fine, we'll login as admin. So once again, we get to our Portfolio. Now we can manage our currencies. And because we are logged in as admin, our server is authenticating us as admin, and we can access those endpoints. So when it comes to security, always secure your server, always. That is the last line, that is the source of truth, because that is the machine that you control. Everything else is secondary. Always, always secure your server

Back to the top