Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Learn about HTTP redirects and how they can be used in a web application.
-
0:00
We cause a pretty cool greeting page right now, but it doesn't do one crucial thing.
-
0:05
When you submit a form like this in a website,
-
0:08
that website generally redirects to another page, like the Welcome page.
-
0:13
Redirecting after a form submission prevents
-
0:15
duplicate submissions if a user refreshes the page.
-
0:19
Likewise, when you try and
-
0:20
visit a protected page on a website, it will often redirect you to a login screen.
-
0:26
Then when you've login, it will redirect you back to the page you wanted to visit.
-
0:31
So, what is redirecting?
-
0:33
In terms of HTTP, it represents a series of specific events.
-
0:39
When a client request of resource from a server that is protected or
-
0:43
perhaps is being moved, the server will
-
0:46
often respond with the response call that redirect which contains a URL.
-
0:51
The client receiving this response will usually make a second
-
0:55
instant request to the new URL.
-
0:58
If you're redirected in your browser,
-
1:00
it happens so quickly that you'll often not even notice its happening.
-
1:06
For this reason,
-
1:07
redirects are often used to make the same work page available from several URLs.
-
1:13
If you type in gogle.com, for
-
1:17
example, you are instantly redirected to Google's home page.
-
1:22
Google bought the domain name to help its users find their page
-
1:26
even if they mistype it.
-
1:28
Apps will often use redirects to manage authentication by sending users
-
1:32
to a log in page before they are permitted to view certain pages, or
-
1:37
redirect users to those pages when they log in successfully.
-
1:43
After users enter their name,
-
1:45
let's redirect them to our app's main welcome page.
-
1:49
Here is how the app will behave at the end of this video.
-
1:53
I'm on the hello page right now, I'll enter my name, and then I'll hit Submit.
-
2:03
Notice that the URL has changed from slash hello to the home welcome page.
-
2:12
Here's the documentation for the redirect method on the response object.
-
2:18
It's pretty straightforward.
-
2:20
We can just call the redirect method instead of the render method to complete
-
2:24
the response.
-
2:26
And then the browser will get the URL that we enter as an argument.
-
2:35
I'll go into the app.js file and in the first route,
-
2:40
I'll change render to redirect,
-
2:45
Replace hello to just have a slash, and
-
2:50
then I can remove this second argument.
-
2:56
Now when I go to this sign-in page and I clear the cookie,
-
3:04
When I sign in, we see we're redirected to the home page.
-
3:12
If I hit the back button, I still see that I have this greeting.
-
3:18
We should probably move this to the welcome page.
-
3:22
In the hello template, I can just remove this conditional altogether.
-
3:32
No one will ever land on this page unless the app doesn't know their name.
-
3:37
It can simply display the form to collect the information
-
3:40
before the user is redirected to the welcome page.
-
3:45
Now I'll go to index.pug and
-
3:47
replace the generic greeting with our personalized one.
-
3:54
Now I need to make sure that the template has access to the cookies name value.
-
4:00
I'll go back to the app.js code, and I'll cut this code from the get,
-
4:07
where it's reading from the cookie, and I can paste it in the home route.
-
4:14
But what I want to do is put the username in its own variable on the name above.
-
4:20
I'm going to call it name.
-
4:28
For the variable available in the view, let's keep it as name,
-
4:35
and then assign it to the variable of name.
-
4:41
Because both the key and the value have the same name, I
-
4:47
can use the ES6 object shorthand to remove the usage of the colon and the extra name.
-
4:57
It's just a little nice than writing name colon name.
-
5:03
Going back to the index route in the browser, we see it working.
-
5:09
Now I'll go to the DevTools and remove the cookie.
-
5:19
Refresh and we're on the index route.
-
5:24
We need this index route to redirect to the hello route
-
5:28
when there's no cookie to read.
-
5:30
But we want to be able to visit the page when the cookie does have a value.
-
5:36
Can you figure out how to do that?
-
5:38
Give it a try and we'll see you in the next video.
-
5:42
And I'll show you how I solved it.
You need to sign up for Treehouse in order to download course files.
Sign up