Redirects

We cause 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 login, 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 request of resource from a server that is protected or 0:39 perhaps is being moved, the server will 0:43 often respond with the response call that 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 its happening. 1:00 For this reason, 1:06 redirects are often used to make the same work 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 first 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 nice than writing name colon 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