WEBVTT

1
00:00:00.630 --> 00:00:02.040
Earlier on in this course,

2
00:00:02.040 --> 00:00:05.760
we saw how we were able to use React Router

3
00:00:05.760 --> 00:00:09.470
in order to programmatically redirect a user

4
00:00:09.470 --> 00:00:12.010
from one page to another page.

5
00:00:12.010 --> 00:00:14.080
Now, in this guide, what I'd like to do

6
00:00:14.080 --> 00:00:17.190
is to show how you can perform the same task

7
00:00:17.190 --> 00:00:18.780
using Vanilla JavaScript.

8
00:00:18.780 --> 00:00:22.830
And we're gonna talk about why you'd wanna use one option

9
00:00:22.830 --> 00:00:24.390
versus the other.

10
00:00:24.390 --> 00:00:28.850
So I'm gonna start off on our Admin Login page here

11
00:00:28.850 --> 00:00:33.550
and I'm gonna enter in some admin credentials that I have.

12
00:00:33.550 --> 00:00:35.640
So you'd use the same ones that you use

13
00:00:35.640 --> 00:00:38.460
to log into DevCamp Space

14
00:00:38.460 --> 00:00:41.070
and I'm gonna press Login.

15
00:00:41.070 --> 00:00:44.680
And you can see we are redirected to the home page.

16
00:00:44.680 --> 00:00:46.910
So that's exactly what we'd expect

17
00:00:46.910 --> 00:00:48.970
and that redirect happened

18
00:00:48.970 --> 00:00:53.970
because our Home page and the Admin page are both nested

19
00:00:54.380 --> 00:00:59.050
inside of our application and they both are able

20
00:00:59.050 --> 00:01:00.710
to use React Router.

21
00:01:00.710 --> 00:01:03.880
Now, one of our components though,

22
00:01:03.880 --> 00:01:08.880
specifically our component that manages the login status,

23
00:01:10.430 --> 00:01:14.420
so that is gonna be, if you open up the file system her,

24
00:01:14.420 --> 00:01:18.220
in your providers directory, the AdminProvider,

25
00:01:18.220 --> 00:01:20.980
this does not have access

26
00:01:20.980 --> 00:01:22.530
to work with React Router

27
00:01:22.530 --> 00:01:25.190
and that's the main goal for this guide

28
00:01:25.190 --> 00:01:26.620
is because I wanna show you

29
00:01:26.620 --> 00:01:29.990
how you can still work with redirection,

30
00:01:29.990 --> 00:01:32.220
even when you may not have access

31
00:01:32.220 --> 00:01:35.350
to the React Router functions.

32
00:01:35.350 --> 00:01:38.107
So you can still use pure Vanilla JavaScript.

33
00:01:38.107 --> 00:01:39.720
And the way that you can do it

34
00:01:39.720 --> 00:01:42.420
is inside of the logout function,

35
00:01:42.420 --> 00:01:45.220
after we've set LoggedIn to false

36
00:01:45.220 --> 00:01:49.410
and we've removed that token from local storage,

37
00:01:49.410 --> 00:01:53.387
what we can do is type window.location.href

38
00:01:57.990 --> 00:02:00.270
and then we're gonna set this equal

39
00:02:00.270 --> 00:02:02.550
to just a string

40
00:02:02.550 --> 00:02:04.920
and then that string's just gonna have a slash.

41
00:02:04.920 --> 00:02:06.440
So what this is gonna do

42
00:02:06.440 --> 00:02:08.730
is this is not touching React at all.

43
00:02:08.730 --> 00:02:11.260
It's not touching React Router, or React,

44
00:02:11.260 --> 00:02:13.730
this is pure Vanilla JavaScript.

45
00:02:13.730 --> 00:02:17.720
The window is a object that we have access to

46
00:02:17.720 --> 00:02:19.970
whenever we're working in the browser.

47
00:02:19.970 --> 00:02:21.980
So what I'm doing is I'm saying I wanna grab

48
00:02:21.980 --> 00:02:23.360
the window object,

49
00:02:23.360 --> 00:02:26.900
I want to grab the location object inside of window

50
00:02:26.900 --> 00:02:30.140
and then from there, I wanna set the href.

51
00:02:30.140 --> 00:02:32.270
Now, you may remember href

52
00:02:32.270 --> 00:02:35.140
whenever you're creating an a tag,

53
00:02:35.140 --> 00:02:37.050
you use a href prop

54
00:02:37.050 --> 00:02:40.350
or is you're writing in pure, just Vanilla HTML,

55
00:02:40.350 --> 00:02:42.890
you're gonna use a href for saying

56
00:02:42.890 --> 00:02:44.850
this is where I'd like to point to.

57
00:02:44.850 --> 00:02:46.220
This is the same concept.

58
00:02:46.220 --> 00:02:49.570
We're saying that we want to use a reference here

59
00:02:49.570 --> 00:02:53.400
for the location and we want it to just be slash

60
00:02:53.400 --> 00:02:55.190
and that is what the home page is.

61
00:02:55.190 --> 00:02:56.930
So let's hit Save here.

62
00:02:56.930 --> 00:02:58.120
So now what's gonna happen

63
00:02:58.120 --> 00:03:01.060
is whenever this logout function is triggered,

64
00:03:01.060 --> 00:03:02.270
no matter where we're at,

65
00:03:02.270 --> 00:03:05.210
and the main reason why I wanted to build this in

66
00:03:05.210 --> 00:03:06.390
is let's imagine,

67
00:03:06.390 --> 00:03:08.130
so we're logged in as an admin

68
00:03:08.130 --> 00:03:12.110
and let's go to blog-form.

69
00:03:12.110 --> 00:03:14.480
So this is an admin page here

70
00:03:14.480 --> 00:03:19.300
and we're also gonna have to add our dashboard layout

71
00:03:19.300 --> 00:03:20.490
to the blog-form.

72
00:03:20.490 --> 00:03:21.670
So let's do that first.

73
00:03:21.670 --> 00:03:25.410
Open up your BlogForm component

74
00:03:25.410 --> 00:03:28.560
and then import the DashboardLayout,

75
00:03:28.560 --> 00:03:31.170
so I'm gonna import DashboardLayout

76
00:03:33.670 --> 00:03:38.670
from ../components/layouts/DashboardLayout

77
00:03:40.310 --> 00:03:44.330
and then we simply want to wrap up the Blog form

78
00:03:44.330 --> 00:03:47.683
with that DashboardLayout component.

79
00:03:49.480 --> 00:03:50.313
Nope.

80
00:03:52.130 --> 00:03:53.470
There you go, just like that.

81
00:03:53.470 --> 00:03:56.480
Okay, so now you can see we have DashboardLayout.

82
00:03:56.480 --> 00:03:59.850
We are wrapping up that h1 tag for Blog form

83
00:03:59.850 --> 00:04:02.190
and then that means we're gonna be able

84
00:04:02.190 --> 00:04:03.860
to see our logout button.

85
00:04:03.860 --> 00:04:05.970
So now I'm back on the Blog form

86
00:04:05.970 --> 00:04:07.960
and you can see we have our navigation links

87
00:04:07.960 --> 00:04:10.580
and this is the reason why I wanted to show you

88
00:04:10.580 --> 00:04:11.600
how to do this.

89
00:04:11.600 --> 00:04:13.610
Imagine that you're on a computer,

90
00:04:13.610 --> 00:04:15.090
you're working on your blog

91
00:04:15.090 --> 00:04:16.810
and you wanna log out.

92
00:04:16.810 --> 00:04:20.410
You do not want to stay logged in as an admin.

93
00:04:20.410 --> 00:04:22.850
Maybe someone else is about to get on the computer.

94
00:04:22.850 --> 00:04:25.770
Well, you wanna be able to hit Logout

95
00:04:25.770 --> 00:04:28.330
but then if you were to then simply hit Logout

96
00:04:28.330 --> 00:04:30.160
with our old functionality,

97
00:04:30.160 --> 00:04:32.910
what would happen is you'd hit Logout

98
00:04:32.910 --> 00:04:36.660
but then you'd still technically be on this Blog form page.

99
00:04:36.660 --> 00:04:37.900
So that would create an issue.

100
00:04:37.900 --> 00:04:39.240
That'd create a security issue

101
00:04:39.240 --> 00:04:40.750
because if you left the computer,

102
00:04:40.750 --> 00:04:42.940
another user would still be able

103
00:04:42.940 --> 00:04:46.160
to see that Blog form even though they weren't logged in.

104
00:04:46.160 --> 00:04:47.560
So what we're going to do

105
00:04:47.560 --> 00:04:49.870
is we're gonna force a redirect

106
00:04:49.870 --> 00:04:53.110
so that even if you're on a page

107
00:04:53.110 --> 00:04:56.760
where you are not supposed to be on,

108
00:04:56.760 --> 00:04:57.690
then what's gonna happen

109
00:04:57.690 --> 00:05:00.010
is you can be redirected automatically.

110
00:05:00.010 --> 00:05:03.060
So now if I click on this Logout link,

111
00:05:03.060 --> 00:05:06.270
you can see we've been redirected to the Home page.

112
00:05:06.270 --> 00:05:08.380
Now, one question you may have

113
00:05:08.380 --> 00:05:10.076
is why wouldn't we do that

114
00:05:10.076 --> 00:05:12.670
for our regular component?

115
00:05:12.670 --> 00:05:14.770
So for our regular login component,

116
00:05:14.770 --> 00:05:16.840
why didn't we use that same approach?

117
00:05:16.840 --> 00:05:17.900
And the main reason

118
00:05:17.900 --> 00:05:20.890
is because if you scroll back in the video

119
00:05:20.890 --> 00:05:22.590
and you see exactly what happened

120
00:05:22.590 --> 00:05:23.423
when I hit Logout

121
00:05:23.423 --> 00:05:27.010
and you looked up here on the top left-hand side

122
00:05:27.010 --> 00:05:28.100
where the favicon is,

123
00:05:28.100 --> 00:05:31.870
you'll see that we actually refresh the page.

124
00:05:31.870 --> 00:05:35.650
So when you use window.location.href,

125
00:05:35.650 --> 00:05:38.010
you are using standard routing.

126
00:05:38.010 --> 00:05:40.600
You're no longer using React Routing

127
00:05:40.600 --> 00:05:44.500
and so that can lead to some issues in certain cases.

128
00:05:44.500 --> 00:05:46.670
It works perfectly fine for a logout.

129
00:05:46.670 --> 00:05:48.360
For our logout functionality,

130
00:05:48.360 --> 00:05:50.020
we want to redirect the user.

131
00:05:50.020 --> 00:05:53.220
We don't care if the page refreshes or anything like that.

132
00:05:53.220 --> 00:05:56.290
In a login for our login process,

133
00:05:56.290 --> 00:05:58.150
then we really don't want that.

134
00:05:58.150 --> 00:06:02.820
We'd much rather be able to seamlessly use the redirect

135
00:06:02.820 --> 00:06:04.540
and be able to push the user,

136
00:06:04.540 --> 00:06:06.560
the admin user right to the Home page

137
00:06:06.560 --> 00:06:09.300
without actually refreshing anything.

138
00:06:09.300 --> 00:06:11.490
So that's all working very nicely

139
00:06:11.490 --> 00:06:14.580
and so now my main goal with this

140
00:06:14.580 --> 00:06:18.160
was so that you could see side by side both

141
00:06:18.160 --> 00:06:19.500
of those login processes.

142
00:06:19.500 --> 00:06:22.660
You could see how you can redirect a user

143
00:06:22.660 --> 00:06:25.490
and how you can perform that task with React Router

144
00:06:25.490 --> 00:06:26.570
and then you can also see

145
00:06:26.570 --> 00:06:29.680
how you can use just Vanilla JavaScript

146
00:06:29.680 --> 00:06:31.410
for performing the same task.

147
00:06:31.410 --> 00:06:32.840
And so now as you go on

148
00:06:32.840 --> 00:06:34.770
and you build your own applications,

149
00:06:34.770 --> 00:06:36.180
you'll know both options

150
00:06:36.180 --> 00:06:37.790
and then you can pick and choose

151
00:06:37.790 --> 00:06:41.513
which option you need in a certain circumstance.

Resources

• Source code