Node Auth Tutorial (JWT) #18 - Conditional Rendering

Key Takeaways

all right then gang so now we're applying this check user middleware to every get request and that middleware is applying this user property to response.locals now that is either going to be the current user if they're logged in or null if there's no user logged in at all so now we can access this property inside our views on every get request right so let's do that inside the header because this is where i want to output some user data so how do i now do this well we now have access to the user variable inside here so i could do an li tag like this and inside i could say welcome comma and then output a variable and in ejs to do that we do angle bracket then percentage then equal sign then whatever we're outputting and that is the user but we want the email property on the user and then we say percentage and close the angle bracket so that's all there is to it so now if i save this and come and refresh over here i'm logged in by the way at the minute if i refresh then i see in the header up here welcome mario at google.com that's who i'm logged in as but if i log out then we get an error and that's because it cannot read the property email of null and remember we said that user is going to be null if they're not logged in so we need to conditionally output this right also we only want to show this thing if they're locked in and we only want to show these two if they're not logged in that makes sense right so we want to check does this user exist inside the view does it have a value or is it null because if it has a value and they're logged in then we'll show these two things right here if it doesn't have a value if it's null then instead we'll show these two things so let's check for this user property all right then so to do this i'm gonna do angle brackets and then percentage and then say if and then use it and by the way we only use an equal sign if we're outputting data right here we're not doing it we're just doing an if check all right so we say if user now we only want the opening curly braces because we're going to close it down here in a minute and then we close off our ejs tags as well right here let me scoot all this in and if there is a user right we want to output these two things so we can come down here and do our ejs tags again and close that off and then say else and then open them up and then close our ejs tags so if there's a user that might output in these two else if there's not a user we're going to output these two so finally we can close our if else block by doing the closing angle bracket and then closing the ejs tags and that's all there is to it so now if we have that user property inside the view if a user's logged in we showed these two if they're not logged in we're gonna show these two simple show let me now go back and in fact i'll refresh and now we don't see the email over there and we don't see log out and that's because i'm logged out so if i log in now and i say mario at google.com and test12 then log in now we see welcome mario at google.com and log out and we don't see the other two links but if i log out it switches back so that's nice we're conditionally showing different things dependent on whether the user is logged in or not and that is pretty much it my friends so that is our node express mongodb and jwt authentication system done i really really hope you've enjoyed this series and you've learned at least a little bit along the way and i've not wasted all of your time if you do like the videos my friends do not forget to share subscribe and like and i'm going to see you in the very next series so then my friends i really really hope you've enjoyed this series and if you do want to join the course and support the channel you can do by clicking the join button on the channel page or underneath the video or right down below you also get a little cool ninja badge next to your name in the comments for that and it's 99 pence or cents per month and i've also created several premium in-depth courses on udemy so the first one is modern javascript the second one is d3 and firebase and the third one is vue.js and firebase so if you want to take one of those all the links with the discounts automatically applied to them are going to be in the video description down below so again thanks so much for watching and i'm going to see you in the very next course you