Home Page Restriction - MERN Stack Series - 111

now in this lecture i'm going to show you how you can create restricted routes inside the react application as you know anyone can access this home page you don't need to be authorized to access the home page of this website i want to make this home page restricted if the user successfully log in i'm going to redirect the user to this home page otherwise i'm going to add some restriction to the user and only the authorized user can access this home page so let me show you i can create that inside the react application so i'm going back to my project and here you can notice inside these pages i have here a home page so i'm going to open the home.js file here i'm going to have my home page now inside this home page what we are going to do is i'm going to access my store value so at the top i'm going to simply say import in the current braces i'm going to say use selector from react redux i'm going to use hook of react redux which is use selector using this use selector hook we can access the current state of the redux store so inside this function here you can simply create a variable constant user is equal to and then i'm going to call this hook use selector and inside that you need to pass a callback function so i'm going to simply say here state and i'm going to just simply return the current state to this user variable let me show you what we are going to have inside this user variable i'm going to say console.log and print my user variable back to my browser i'm gonna have my current state as a response you can notice here now what i'm doing is i'm going to access this is logged in property from this store this time i have false inside this property but when i successfully logged in i'm going to change this property to true so i'm going to just see here dot and then i'm going to use this property here like this so now inside this user variable i'm going to have this property value if i reload the browser you can notice i'm going to have false as a result so inside the user variable i'm going to have this false value so just so that once i have the current status of the user so using this variable i can get the current status of the user this time as you can notice inside this user i have false so just down here i can just simply say if inside this user i'm going to just add here explanation mark and here i'm going to say if we have folks here inside this user variable i'm going to execute this if statement i only want to execute this if statement when we have false inside this user variable if i remove this exclamation mark right from here if statement is not going to execute because inside this user variable if you have false if statement is going to execute only when you have true value inside this parenthesis so this time i'm going to just invert this condition so i'm going to add here exclamation mark and if we have false inside this user variable i'm going to execute this e-statement but instead of just adding this if statement inside this home function i'm going to grab this if statement and i'm going to just use here a hook call use effect and inside this use effect i'm going to simply add my if statement just like this just after that you need to import this use effect hook inside your file so from this react module you can import this use effect hook so just press over here comma and in the curly braces you can specify here use effect so you can access the use effect hooked from the react module use effect is going to help us to tell the react application to do something after render method so when the react application renders something after that i'm going to execute this use effect and inside this use effect i'm going to say if we have false value inside this user i'm going to simply redirect the user to the login page because as you know if you have false inside this user variable if this is login is going to be false the user is not the authorized user i'm going to change this value only when the user successfully log in inside this if statement i'm going to redirect the user to the login page so i'm going to simply use here a hook call use history so i'm going to say here import in the curly braces i'm going to say use history from and i'm going to call here react router dome so from the react crowd to do module i'm gonna call here use history hook and just down here i'm gonna say constant history is equal to use history and inside this if statement i'm going to say history dot push and i'm going to push the user to the login page so i'm going to say here login and just start that as a dependency here i'm going to specify user and history back to my project and as you can see i'm going to redirect to my login page instead of the home page if i try to back to my home page you can notice react will going to redirect me to the login page if i specify my user credential inside these input text boxes and click on this login button i can easily access the home page and now if you try to print this easy login value in the console you will get true as a response let me show if i just print this value just down here before this return statement if i say here console.log and print this user when i save the changes as you can see i'm going to have true as a response if you want you can use use store hook to access the current state of your application and you can print your current state inside a console that's upon you so once you understand how you can restrict the user from accessing the home page of your website in the next lecture i'm going to show you how you can add a logout feature to your website [Music] do you

Channel: Daily Tuition

Views: 678

Keywords: daily tuition, Home Page Restriction - MERN Stack Series - 111, unauthorize user, how to secure routes in react, working with restricted routes in reat application, working with restrictedroutes, how to restrict the routes in react application

Id: nltaVcpQobg

Length: 5min 55sec (355 seconds)

Published: Thu Jun 24 2021