1 00:00:00,330 --> 00:00:05,070 In this lecture, we are going to apply a routine guard to some of our roots. 2 00:00:05,310 --> 00:00:09,750 We've talked about protecting our roots from non authenticated users. 3 00:00:10,080 --> 00:00:15,480 Users shouldn't be able to access specific routes based on their authentication status. 4 00:00:15,810 --> 00:00:22,440 For example, the manage and upload pages should be inaccessible to non authenticated users. 5 00:00:22,950 --> 00:00:27,330 To tackle this issue, we redirected the user after logging out. 6 00:00:27,570 --> 00:00:31,260 However, our solution is not entirely foolproof. 7 00:00:31,530 --> 00:00:34,290 I'm logged out of the application at the moment. 8 00:00:34,470 --> 00:00:39,840 It's not possible to navigate to either page because both links are hidden from the user. 9 00:00:40,230 --> 00:00:42,780 That doesn't mean they're completely inaccessible. 10 00:00:43,080 --> 00:00:48,150 I can manually navigate to either page through the address bar in the browser. 11 00:00:50,640 --> 00:00:55,770 As you can see, the component gets rendered, our route is not completely safe. 12 00:00:56,100 --> 00:01:01,830 Angular is routing library introduces a solution for protecting routes called guards. 13 00:01:02,220 --> 00:01:06,450 A guard is a function that'll run before navigation is performed. 14 00:01:06,810 --> 00:01:11,140 Guards have the final say before the user is navigated to a page. 15 00:01:11,460 --> 00:01:14,910 We can choose to tell the router to reject the request. 16 00:01:15,480 --> 00:01:18,300 We can create a guard, but we don't have to. 17 00:01:18,570 --> 00:01:24,330 The angular fire package exports guards for checking the user's authentication status. 18 00:01:24,630 --> 00:01:29,130 We can use these guards to reject authorization to a specific route. 19 00:01:29,460 --> 00:01:31,920 Let's give them a try in your editor. 20 00:01:32,070 --> 00:01:34,140 Open the video routing module. 21 00:01:36,600 --> 00:01:43,620 At the top of the file, we are going to import a guard called angular fire off guard from the angular 22 00:01:43,650 --> 00:01:48,300 slash fire slash compat slash off guard package. 23 00:01:50,720 --> 00:01:55,940 Next, we are going to add a property called can activate to the manage routes. 24 00:01:58,460 --> 00:02:02,360 The can activate property, can accept an array of guards. 25 00:02:02,600 --> 00:02:05,480 It'll run the guard whenever the route is accessed. 26 00:02:05,780 --> 00:02:09,470 Let's pass in the angular fire off guard class. 27 00:02:12,000 --> 00:02:14,400 Applying a guard is as simple as that. 28 00:02:14,610 --> 00:02:17,220 Let's give our app a test in the browser. 29 00:02:17,310 --> 00:02:21,110 Try navigating to the Manage page while being logged out. 30 00:02:23,660 --> 00:02:27,200 Unlike before, Angular is not rendering the components. 31 00:02:27,500 --> 00:02:29,720 Our request is being rejected. 32 00:02:29,990 --> 00:02:35,720 If we look inside the console panel of the developer tools, an error does not get thrown. 33 00:02:36,080 --> 00:02:41,090 Previously, errors would be thrown if angular couldn't match the path to a. 34 00:02:41,960 --> 00:02:46,970 This time, Angular did find a match, but chose not to render the components. 35 00:02:47,570 --> 00:02:48,590 We're almost there. 36 00:02:48,800 --> 00:02:54,830 I think it would be a good idea to redirect the user to the home page if their request is rejected. 37 00:02:55,310 --> 00:02:59,810 Luckily, we can modify the guards from the angular fire package. 38 00:03:00,140 --> 00:03:03,950 We can use our as pipes to modify the behavior. 39 00:03:04,250 --> 00:03:10,490 In fact, the angular fire team has provided some pipes for some of the most common actions. 40 00:03:10,820 --> 00:03:12,320 Switch back to the ED. 41 00:03:14,960 --> 00:03:22,550 We will update the import statement to the angular slash fire slash compat slash off guard package to 42 00:03:22,550 --> 00:03:26,180 include a pipe called redirect unauthorized to. 43 00:03:28,660 --> 00:03:35,050 This pipe will redirect the user A to a page if they are not authorized to visit or route, rather than 44 00:03:35,050 --> 00:03:36,850 writing the logic ourselves. 45 00:03:36,910 --> 00:03:42,220 We can use this pipe to perform the behavior for us below the import statements. 46 00:03:42,370 --> 00:03:47,110 We will create a variable called redirect unauthorized to harm. 47 00:03:49,740 --> 00:03:55,260 It's now will be a function that returns the redirect unauthorized to pipe. 48 00:03:56,650 --> 00:04:01,720 When we have this pipe to our guard, we must pass in the function that returns the pipe. 49 00:04:02,110 --> 00:04:09,130 This pipe function has one argument, which is the path to redirect the user to let's pass in a forward 50 00:04:09,130 --> 00:04:12,430 slash character to redirect them to the home page. 51 00:04:14,870 --> 00:04:22,040 Next, we can apply this pipe to the guard by adding it as a data property in the data object for the 52 00:04:22,040 --> 00:04:22,940 managed route. 53 00:04:23,540 --> 00:04:26,810 We will add a property called off guard pipe. 54 00:04:29,350 --> 00:04:34,990 Lastly, we will set this property to the redirect unauthorized to home function. 55 00:04:37,560 --> 00:04:44,130 If this data property is present in the route, the guard will run the pipe function, the pipe function 56 00:04:44,130 --> 00:04:48,570 will only run if the guard rejects the request out of the box. 57 00:04:48,720 --> 00:04:51,480 The angular fire package is very helpful. 58 00:04:51,780 --> 00:04:58,860 Before we test our app, let's apply the same guard to the upload route on the upload route object. 59 00:04:59,100 --> 00:05:04,860 We will add the can activate property with the angular fire off guard class. 60 00:05:07,410 --> 00:05:14,820 Inside the data object set the off pipe property to the redirect unauthorized to home function. 61 00:05:17,330 --> 00:05:19,740 Let's test our app in the browser. 62 00:05:19,820 --> 00:05:22,220 Try navigating to the Manage page. 63 00:05:24,650 --> 00:05:26,750 We are redirected to the homepage. 64 00:05:27,020 --> 00:05:27,560 Awesome. 65 00:05:27,770 --> 00:05:31,730 We've successfully guarded our routes against unauthorized users. 66 00:05:32,030 --> 00:05:34,310 This concludes this section on routing. 67 00:05:34,610 --> 00:05:39,200 We've learned a handful of techniques for adding routing capabilities to our app. 68 00:05:39,530 --> 00:05:41,540 We're not completely finished with routing. 69 00:05:41,840 --> 00:05:44,570 There are more features we will explore in the future. 70 00:05:44,780 --> 00:05:47,600 For now, let's move on to uploading files. 71 00:05:47,780 --> 00:05:50,750 When you're ready, I'll see you in the next section.