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