1
00:00:00,180 --> 00:00:00,720
Nicely done.

2
00:00:00,840 --> 00:00:08,210
And one more feature that I would like to add to our app is restricting the access of the checkout page

3
00:00:08,550 --> 00:00:10,710
if we haven't logged in.

4
00:00:11,370 --> 00:00:14,050
And you might be wondering, well, what are you talking about?

5
00:00:14,490 --> 00:00:18,350
We are already hiring the checkout if the user hasn't locked them.

6
00:00:18,890 --> 00:00:20,120
Yep, that is true.

7
00:00:20,130 --> 00:00:26,370
But what do you think is going to happen if I log out and I can clearly see that since I have a login

8
00:00:26,370 --> 00:00:26,760
option.

9
00:00:27,120 --> 00:00:31,260
But if I go to the URL bar and if I just say check out.

10
00:00:31,560 --> 00:00:33,140
Hmm, that's interesting.

11
00:00:33,450 --> 00:00:40,350
So I can still navigate there, even though technically we restricted the access to the page.

12
00:00:40,620 --> 00:00:40,980
Correct.

13
00:00:40,980 --> 00:00:42,540
Because we were not showing the link.

14
00:00:43,020 --> 00:00:50,340
Now the issue here is that we need to set up a private route where again, we're going to check whether

15
00:00:50,340 --> 00:00:56,510
the user has logged in and then if he or she has logged and then, of course, we'll display the page.

16
00:00:56,880 --> 00:01:01,320
If not, then we'll redirect back to the homepage.

17
00:01:01,740 --> 00:01:09,720
Now, if you want to see where I got the info from, I can navigate to the single apps, the library

18
00:01:09,720 --> 00:01:11,950
one and protect the route.

19
00:01:12,270 --> 00:01:14,200
So this is where I got the idea.

20
00:01:14,460 --> 00:01:20,700
Now, I combined a little bit with, of course, the reactor, but idea stays exactly the same.

21
00:01:21,090 --> 00:01:30,000
So now I would want to go back to my application and I'm going to be looking for the app will start

22
00:01:30,000 --> 00:01:30,530
over there.

23
00:01:30,870 --> 00:01:37,620
And if you remember in the pages, there's also a page by the name of private route and just make sure

24
00:01:37,620 --> 00:01:39,670
that you export from next year.

25
00:01:40,140 --> 00:01:41,040
That's a must.

26
00:01:41,350 --> 00:01:48,810
And then in the app, J.S., notice where we're getting all these components now instead of just showcasing

27
00:01:48,990 --> 00:01:55,800
the checkout, using the route, I'll switch this around where I'll say that I wouldn't want to pass

28
00:01:55,800 --> 00:01:57,140
in my private route.

29
00:01:57,540 --> 00:02:00,900
So I have my component, which at the moment doesn't have anything in it.

30
00:02:01,440 --> 00:02:07,360
But instead of route component, we are using this private or component.

31
00:02:07,710 --> 00:02:10,450
And keep in mind that we're still passing the same props.

32
00:02:10,860 --> 00:02:13,530
So that is not changing in here, though.

33
00:02:13,680 --> 00:02:21,390
We have got an and essentially the main idea is following where in that private route I'll check for

34
00:02:21,390 --> 00:02:21,990
my user.

35
00:02:22,470 --> 00:02:29,270
If user exists, then I would just want to return my children, which in this case is the checkout.

36
00:02:29,550 --> 00:02:33,410
If it doesn't exist, then I'll show you another way how we can redirect.

37
00:02:33,480 --> 00:02:40,050
So in other words, I'll show you another way, how we can programmatically navigate to a different

38
00:02:40,050 --> 00:02:40,440
page.

39
00:02:40,720 --> 00:02:42,090
So let's save objects.

40
00:02:42,300 --> 00:02:44,630
Make sure, of course, that you have a private route and all that.

41
00:02:44,910 --> 00:02:51,300
Make sure that your app, the check out and then I'll close all my files now because we only want to

42
00:02:51,300 --> 00:02:55,310
work in the private world and then notice the imports.

43
00:02:55,680 --> 00:02:59,370
So I'm still importing the route from reacquired.

44
00:02:59,370 --> 00:03:00,300
I'm not.

45
00:03:00,360 --> 00:03:01,110
That is the same.

46
00:03:01,380 --> 00:03:03,800
And then I have my redirect component.

47
00:03:03,960 --> 00:03:08,580
So that is going to be that another way, how we can programmatically navigate to a different page.

48
00:03:08,970 --> 00:03:16,860
If you remember when we looked at it the first time, I showed you the history that push and essentially

49
00:03:17,100 --> 00:03:20,010
you can use either of these options.

50
00:03:20,310 --> 00:03:23,860
And then, of course, I also have this use user context.

51
00:03:24,450 --> 00:03:26,950
Now, how do we set up this private route?

52
00:03:26,970 --> 00:03:32,520
Now, first of all, we need to understand that in the app, G.S., when we were setting up this private

53
00:03:32,520 --> 00:03:35,770
route, we're still passing these props.

54
00:03:36,640 --> 00:03:42,220
And that's extremely important because, of course, I want to use them, because if the user has logged

55
00:03:42,220 --> 00:03:48,880
in, then I still want to direct the user to whatever page he or she wants to go on this case, check

56
00:03:48,940 --> 00:03:52,510
out in order to collect those values.

57
00:03:52,840 --> 00:03:57,460
We would want to go here with our programs and I'll say children.

58
00:03:57,460 --> 00:03:58,930
Remember, that was that special one.

59
00:03:59,150 --> 00:04:03,210
And the reason why I'm using children, because, of course, whatever is inside the private room,

60
00:04:03,580 --> 00:04:05,740
that is something that I would want to return.

61
00:04:06,100 --> 00:04:11,740
Because also keep in mind that we can use this private route in multiple places if we set it up correctly.

62
00:04:12,100 --> 00:04:19,150
And then the second thing is the rest of the parameters and emotional address more essentially in JavaScript,

63
00:04:19,420 --> 00:04:23,940
we have the operator by the name of operator.

64
00:04:24,220 --> 00:04:30,550
Now we use this operator when we're working with function parameters, though, so don't confuse.

65
00:04:30,550 --> 00:04:31,360
It would spread.

66
00:04:31,810 --> 00:04:35,620
So spread essentially just spreads out all our values.

67
00:04:35,620 --> 00:04:39,040
If we have an array, then it spreads out into individual items.

68
00:04:39,310 --> 00:04:45,040
But rest operator and when we use it, of course in the function parameter does the opposite.

69
00:04:45,250 --> 00:04:46,600
Where I said DataDot.

70
00:04:47,340 --> 00:04:52,010
And then I can call it whatever I want, but a common convention is calling this arrest.

71
00:04:52,260 --> 00:04:58,160
So this arrest is gathering is everything that we pass in over here.

72
00:04:58,440 --> 00:05:00,660
So we grab the children.

73
00:05:01,050 --> 00:05:06,520
This is going to be the check out, of course, and then we grab the rest of the parameters.

74
00:05:06,840 --> 00:05:10,860
Now, if you would want to blog, you can definitely do so.

75
00:05:11,100 --> 00:05:13,080
So I'm going to go with console log here.

76
00:05:13,320 --> 00:05:18,740
And let's just take a look at the children first and also let's take a look at the first one.

77
00:05:19,050 --> 00:05:20,190
So that is the name again.

78
00:05:20,190 --> 00:05:21,460
You can call this Bugs Bunny.

79
00:05:21,690 --> 00:05:22,860
It doesn't really matter.

80
00:05:23,160 --> 00:05:23,630
Let's see.

81
00:05:23,640 --> 00:05:25,730
Hopefully it's going to work.

82
00:05:25,740 --> 00:05:27,390
So at the moment, I have private route.

83
00:05:27,930 --> 00:05:31,320
And if I take a look at the console notice, I have object.

84
00:05:31,710 --> 00:05:36,390
So, of course, this is going to be those children first and then I have the second one.

85
00:05:36,570 --> 00:05:37,040
Correct.

86
00:05:37,230 --> 00:05:39,570
So these are the rest of the parameters.

87
00:05:39,810 --> 00:05:41,460
Now, why do I want those?

88
00:05:41,700 --> 00:05:48,350
Because when I return the children eventually from this component, I would want to dump them in that

89
00:05:48,360 --> 00:05:50,110
children as well.

90
00:05:50,520 --> 00:05:53,760
Now, let's go back to our component.

91
00:05:54,980 --> 00:06:02,230
And then I would want to grab my user, so let's go with Consed and I'm going to call this my user.

92
00:06:02,240 --> 00:06:05,630
So the same way I'm structuring from user contacts.

93
00:06:05,990 --> 00:06:09,770
OK, we get our hook and then I would want to set up the.

94
00:06:10,350 --> 00:06:16,700
So now exactly like we have in Abcess for us the route I'm going to use my route.

95
00:06:16,880 --> 00:06:23,540
So regardless of my user value, I'm going to go with route some still return this component, then

96
00:06:23,540 --> 00:06:25,560
I'll spread out my rest.

97
00:06:25,910 --> 00:06:31,430
So now I'll spread out those props that I gathered in rest again.

98
00:06:31,620 --> 00:06:33,480
Keep in mind the rest operator.

99
00:06:33,750 --> 00:06:35,320
This is a separate operator.

100
00:06:35,600 --> 00:06:41,840
So here we collect them and then I spread them out on this route, just like we have, for example,

101
00:06:41,840 --> 00:06:44,160
here, remember our exact path.

102
00:06:44,450 --> 00:06:46,400
So now I'm just collecting here.

103
00:06:47,280 --> 00:06:53,160
And I'm spreading them on the road, and then when it comes to route, I'm going to remove this text

104
00:06:53,580 --> 00:07:00,600
and once I have spread out all my props, then I would want to set up a special prop by the name of

105
00:07:00,600 --> 00:07:04,630
ORENDER and then inside of this prop, the runner up.

106
00:07:04,880 --> 00:07:11,400
This is where I'll pass in the function first and say that there's going to be a function and function,

107
00:07:11,790 --> 00:07:13,530
and then I'll say return.

108
00:07:13,860 --> 00:07:16,620
And I would want to set up my condition again.

109
00:07:16,920 --> 00:07:18,900
So ternary operator, my user.

110
00:07:19,140 --> 00:07:25,710
And if the user exists, then I would want to grab the children, which of course in our case is the

111
00:07:25,710 --> 00:07:26,190
check up.

112
00:07:26,370 --> 00:07:26,840
Correct.

113
00:07:27,090 --> 00:07:29,880
And if not, then we return a redirect.

114
00:07:30,150 --> 00:07:31,650
So we go here with children.

115
00:07:32,010 --> 00:07:38,520
And if the user is false and I'm not going to console like we should be in good shape as far as understanding

116
00:07:38,520 --> 00:07:38,790
that.

117
00:07:38,970 --> 00:07:41,040
And then we'll just go with the redirect component.

118
00:07:41,040 --> 00:07:43,920
And we need to keep in mind that we redirect.

119
00:07:43,920 --> 00:07:50,400
We just need to pass the two prop essentially where we're saying where we would want to go with this

120
00:07:50,400 --> 00:07:50,960
component.

121
00:07:51,270 --> 00:07:59,840
So we save it and now we should go back to home, even if we're just trying to access using the URL

122
00:07:59,880 --> 00:08:00,130
bar.

123
00:08:00,450 --> 00:08:03,630
Now, keep in mind, there's no way for us to access using the link.

124
00:08:04,170 --> 00:08:09,210
We are actually protecting that in our neighboring sidebar and all that.

125
00:08:09,600 --> 00:08:17,460
But we were able to navigate before using Uraba, but now we restricted the access so I can type all

126
00:08:17,460 --> 00:08:21,990
day long and I'll be directed back to my homepage.

127
00:08:22,000 --> 00:08:22,310
Why?

128
00:08:22,560 --> 00:08:25,770
Well, because we have restricted around again one more time.

129
00:08:25,770 --> 00:08:26,600
Let's try to login.

130
00:08:26,710 --> 00:08:29,910
In this case, I'm going to use my Twitter option.

131
00:08:30,950 --> 00:08:38,960
And if everything works correctly, we should see the check out and of course, I can navigate to a

132
00:08:38,960 --> 00:08:39,640
checkout page.