We cause a pretty cool greeting page right now, but it doesn't do one crucial thing.

When you submit a form like this in a website,

that website generally redirects to another page, like the Welcome page.

Redirecting after a form submission prevents

duplicate submissions if a user refreshes the page.

Likewise, when you try and

visit a protected page on a website, it will often redirect you to a login screen.

Then when you've login, it will redirect you back to the page you wanted to visit.

So, what is redirecting?

In terms of HTTP, it represents a series of specific events.

When a client request of resource from a server that is protected or

perhaps is being moved, the server will

often respond with the response call that redirect which contains a URL.

The client receiving this response will usually make a second

instant request to the new URL.

If you're redirected in your browser,

it happens so quickly that you'll often not even notice its happening.

For this reason,

redirects are often used to make the same work page available from several URLs.

If you type in gogle.com, for

example, you are instantly redirected to Google's home page.

Google bought the domain name to help its users find their page

even if they mistype it.

Apps will often use redirects to manage authentication by sending users

to a log in page before they are permitted to view certain pages, or

redirect users to those pages when they log in successfully.

After users enter their name,

let's redirect them to our app's main welcome page.

Here is how the app will behave at the end of this video.

I'm on the hello page right now, I'll enter my name, and then I'll hit Submit.

Notice that the URL has changed from slash hello to the home welcome page.

Here's the documentation for the redirect method on the response object.

It's pretty straightforward.

We can just call the redirect method instead of the render method to complete

the response.

And then the browser will get the URL that we enter as an argument.

I'll go into the app.js file and in the first route,

I'll change render to redirect,

Replace hello to just have a slash, and

then I can remove this second argument.

Now when I go to this sign-in page and I clear the cookie,

When I sign in, we see we're redirected to the home page.

If I hit the back button, I still see that I have this greeting.

We should probably move this to the welcome page.

In the hello template, I can just remove this conditional altogether.

No one will ever land on this page unless the app doesn't know their name.

It can simply display the form to collect the information

before the user is redirected to the welcome page.

Now I'll go to index.pug and

replace the generic greeting with our personalized one.

Now I need to make sure that the template has access to the cookies name value.

I'll go back to the app.js code, and I'll cut this code from the get,

where it's reading from the cookie, and I can paste it in the home route.

But what I want to do is put the username in its own variable on the name above.

I'm going to call it name.

For the variable available in the view, let's keep it as name,

and then assign it to the variable of name.

Because both the key and the value have the same name, I

can use the ES6 object shorthand to remove the usage of the colon and the extra name.

It's just a little nice than writing name colon name.

Going back to the index route in the browser, we see it working.

Now I'll go to the DevTools and remove the cookie.

Refresh and we're on the index route.

We need this index route to redirect to the hello route

when there's no cookie to read.

But we want to be able to visit the page when the cookie does have a value.

Can you figure out how to do that?

Give it a try and we'll see you in the next video.

And I'll show you how I solved it.