3.2 Authorizing Access to the UI

Securing the admin section is going to be a little more involved than a typical web application. Primarily because we have essentially two separate applications. We have a PHP application running on the server, then we have a JavaScript application running in the browser. And even though that this is primarily for the UI, it is still, technically, an application. And we need to be able to not only authorize the user for accessing the RESTful API but we need to authorize the user to access the individual components as we navigate to them. So what we can do is, for every attempt to navigate to a different component, we can make a request to our web API, and ensure that the user is authenticated. And if they are then great, we show them what they want to see, otherwise, we show them the login form. So, here's how that is going to work, let's go to admin.js. And after we create our router, we're going to use a method called beforeEach. This is a method that is going to execute before we attempt to navigate to anything as long as we are using the router to do that. And this accepts a call back function. It has three pieces of information. Where we're going to, where we're coming from, and what to do next. And so we will use these pieces of information in order to determine what we are going to do. So the basic logic is this. If we are authenticated, then great, we'll just go onto the next. If not, then we will show the login form. However, it's going to be a little bit more involved in our case, because the login form is going to be part of the admin section. And you can't really protect the login form, otherwise people won't be able to login. So we're going to have to check to see if what we are trying to go to is not the login form. And if it's not, then we're trying to access other pieces of the application. And then that's where we will make our request. So that's where this logic fits in. However, if we are trying to access the login form, then we don't need to do anything. We just need to allow the user to the login forms that they can attempt to login. And that's the basic logic behind this. So let's go to our admin folder. Let's copy our Dashboard and let's rename it as login. And let's change it so that it just says, this is the login, so that we can see that this is going to work. And then we need to set up the route. So, let's go to our route and, first of all, we need to import our Login. But when it comes to our routes, we're going to need to change what we defined for the Dashboard component. But it's not going to be that big of a deal. In fact, it's just going to be a single character. But what we want to say is that the path is going to be slash. That's how this is all going to work. And then the path for our login is going to be login, and of course we're going to use the login component. So, with that in place, we can go back to admin and we can finish this. So that if what we're going to has a fullPath that is not equal to login, then yes, we want to perform our check, otherwise, we will go to the login form. So here, we will use our router.push, and we will specify the login URL. So, we can test this, we can go to the browser. And whenever I press Enter on the address bar, we see, this is the dashboard. And that's what we would expect, because we are currently authenticated. However, let's change this to false. And whenever we go back and do the same thing, we should see, the login. So now let's write a controller that we could make a request to, to check to see if the user is logged in. So, let's just make a normal controller. This does not need to be a resource controller. And let's just call it ProfileController. And there we go. Let's go ahead and start back up the servers so that that will be running. And let's go to app > Http > Controllers and our profile controller once it magically appears there. So we will have the index method. We don't really need anything else. And all we are going to do is return json_encode and then $request user. Now, we do need access to that request variables, so let's make that the parameter, and there we go. Now, we do need to set up the routes. So let's go to our api routes and we will just say Route get, and as far as the path is concerned, for right now and we might want to change this, but for right now, we'll just say profile. And of course we need to specify the controller which is the ProfileController and index method. So, now, we need to issue that request. So let's go back to our admin.js and instead of using this if statement, we are going to make our requests. So, axios, this is a get request and we are going to make a request for api/profile. And then we might get a response. So we would need to do something with that response. Now, if the user is not logged in, then the response is going to be no. So we can have a check here if our data or rather if our data is falsy, then we need to go to the login page. Otherwise, everything is fine. So we will just go on to the next. However, if there is an error of any kind, we still want to show the login page. So we'll have catch, if we have that error, then all we will do is router.push to login and we're done with that. And then we can get rid of this little pseudo code that we had before. We still need this other else here, because that is for the users accessing the login page. But everything else should be fine. So once again, let's go to the browser. If we try to navigate to our dashboard, we should see the login view and we do. However, let's make sure that everything is actually doing what it is supposed to do. So let's make a request and let's look at what we have here. We didn't make a request to profile, we did give a 200 and the response is null. So we are seeing exactly what we need to see here. And that means in the next lesson, we can implement the authentication, which is actually going to be very simply to do.