WEBVTT 00:01.940 --> 00:07.070 In this section of the course, we want to get started on protecting roots on the front end, as you 00:07.070 --> 00:12.110 recall, we already have middleware for the backend that allows us to check for a valid barer token, 00:12.980 --> 00:15.930 but we actually don't have any such protection on the front end. 00:15.950 --> 00:21.140 And of course, if you're building an application using react or view or something like that, this 00:21.140 --> 00:24.920 isn't appropriate for you at all because those are single page applications. 00:25.280 --> 00:30.350 But if you're building a multipage application, this is actually quite helpful and fortunately, it's 00:30.350 --> 00:31.920 pretty easy to implement. 00:32.360 --> 00:40.370 So I'm going to go back to my idea and I'm going to open up our existing middleware in the API folder. 00:40.700 --> 00:43.940 OK, and I'm going to copy this entire function. 00:44.960 --> 00:50.150 And now I'll close that and I'll go back to the middleware for the front end and I'll actually paste 00:50.150 --> 00:51.920 that in there and we'll make some changes to it. 00:52.040 --> 00:57.140 OK, so obviously this stuff doesn't work at all, so I'll get rid of this. 00:58.900 --> 01:03.070 And what I'm going to put here instead is a really simple check. 01:03.560 --> 01:08.480 I'm going to check to see if a certain value exists in the session. 01:08.600 --> 01:13.840 And fortunately, that's really easy for us to do because we have that receiver app and that store secession. 01:14.630 --> 01:18.830 So we'll simply check to see if not after session. 01:21.710 --> 01:25.790 And I'll call the method built into that exists and then returns of Boolean. 01:25.790 --> 01:31.490 And it requires two parameters, the context which we get from our context and what we're looking for 01:31.490 --> 01:32.120 in the session. 01:32.120 --> 01:34.100 And I'll look for something called user ID. 01:34.280 --> 01:39.680 I'm going to assume that we're going to store the user ID in the session and if we find it, the user 01:39.680 --> 01:42.470 is authenticated and if not, that user is not authenticated. 01:42.680 --> 01:43.860 Really simple stuff. 01:43.890 --> 01:47.960 OK, so if that's true, sorry. 01:47.960 --> 01:55.370 If that's not true, if we can't find it and it resolves to false, then we'll just do a redirect redirect 01:57.080 --> 02:02.920 and we'll redirect the user from using W in our as you have to take them to the login page. 02:03.530 --> 02:06.470 And of course you can do whatever you want there and it needs some status. 02:06.470 --> 02:11.240 And I'm just going to go with http dot status or temporary redirect. 02:11.870 --> 02:13.300 Temporary redirect like that. 02:13.520 --> 02:15.950 OK, and we return because we don't want to go any further. 02:16.880 --> 02:19.640 So that is some middle where we can now use. 02:19.670 --> 02:22.850 So let's open up our routes on the front end. 02:23.540 --> 02:27.340 And what we want to protect, of course, is this one route, the virtual terminal page. 02:27.380 --> 02:28.750 These two don't exist anymore. 02:28.790 --> 02:29.960 Actually, they still exist. 02:30.710 --> 02:33.050 I'm going to comment them out because we're not using them anymore. 02:33.920 --> 02:40.130 And all we have to do here is the same sort of thing we did on the routes for the API marks dot route. 02:41.120 --> 02:44.720 And we're going to go to slash admin, which means we're going to have to change some new URLs. 02:44.720 --> 02:45.620 But that's pretty simple. 02:47.410 --> 02:53.740 And we call function or funk, that's the danger with working with JavaScript and go, I'm always typing 02:53.740 --> 02:56.650 func in JavaScript and function and go, but there you go. 02:57.430 --> 03:03.220 And we'll pass it mux, which is a cheat mux or don't root for there. 03:04.990 --> 03:07.020 And inside of here we'll just use that middleware. 03:07.510 --> 03:13.200 So we say use or muxtape use after all. 03:13.240 --> 03:17.500 And of course this is a different app off than the one on the back end. 03:18.610 --> 03:25.750 And I'll just move this route from here right up to here and I'll leave these ones here. 03:25.750 --> 03:29.470 But commented out in case you want to refer to those handlers at some point when you're reviewing the 03:29.470 --> 03:30.020 source code. 03:31.030 --> 03:35.060 So the next thing we have to do is to update this path again. 03:35.250 --> 03:41.110 Virtual Terminal should now become admin's virtual terminal because we're actually preparing this to 03:41.110 --> 03:41.470 the route. 03:41.980 --> 03:47.110 So we'll go to the Base Lab. We'll find the link to the virtual terminal, which is. 03:50.160 --> 03:55.830 Right there will just change that to admin now to find the rest of them. 03:55.860 --> 04:06.390 I'm just going to go to my command folder and say find in folder and look for virtual Dasch terminal. 04:07.710 --> 04:09.840 So Route's API, that's fine. 04:09.840 --> 04:11.040 We'll ignore that one. 04:11.040 --> 04:14.340 Handlers redirect to virtual terminal receipt. 04:14.340 --> 04:15.240 That's not being called. 04:15.240 --> 04:16.150 So it doesn't matter. 04:16.650 --> 04:19.320 This one is fine rootstock. 04:19.320 --> 04:22.050 Go still get virtual terminal. 04:22.050 --> 04:22.920 That's fine. 04:24.090 --> 04:26.750 And Bachelard and terminal page. 04:26.760 --> 04:28.220 So terminal page there. 04:28.290 --> 04:29.130 There's a link right there. 04:29.130 --> 04:30.090 So let's open that one. 04:30.210 --> 04:30.900 That's the button. 04:30.900 --> 04:35.260 We put in a couple of lectures ago and that becomes admin's virtual terminal. 04:35.760 --> 04:37.820 So now I should be able to start my application. 04:37.830 --> 04:38.940 Let's make sure it's stopped. 04:39.390 --> 04:39.990 It is. 04:40.560 --> 04:41.250 And started. 04:44.380 --> 04:54.380 Now let's go back to our Web browser and reload the homepage and I'll log in and log in as admin at 04:54.400 --> 04:58.770 example, dot com with a password, password log in. 05:00.010 --> 05:05.200 Now, at this point, even though I'm logged in, if I click on virtual terminal, I should get taken 05:05.200 --> 05:09.810 to the login page because I don't have a user ID in my session. 05:09.820 --> 05:14.200 We'll have to add that to the login logic before too long, but let's make sure that the protected routes 05:14.200 --> 05:15.010 actually work. 05:15.940 --> 05:18.230 And there we are taken back to the login page. 05:18.640 --> 05:20.100 That's exactly what I wanted. 05:20.560 --> 05:26.050 So in the next lecture will implement the logic that when a user logs in every store that value in the 05:26.050 --> 05:29.890 session and when they log out, of course, we'll have to remove that value from the session. 05:30.040 --> 05:33.850 But that's not terribly difficult and we'll get started on that in the next lecture.