React JS Role-Based Routing: The Ultimate Guide for Seamless Navigation

hello everyone this video is about role-based routing using react.js so now this is a demo that I have created we will do something like this okay in this video so let's check it okay all right now we are logged in as admin okay we can access all the pages dashboard user admin and now bar okay we can access all the pages but if we logged in as user or a public user so we cannot see this dashboard and also we cannot access these pages so now let's check it okay I will change the user so which I change the user to the public user okay we cannot see this board right now because that was just accessible for the admin so now let's move to the admin page see you are not authorized also if user we cannot access this page okay you cannot access because you are just a public user you can just access the home page okay so now let's login as a registered user we logged in as registered user so again we cannot see the dashboard because that is just for the admin so if you move to the admin see you are not authorized you cannot the user cannot access the admin also but if he can like if he would like to move to the user so you can access the user page and also the home page so we will do something like this in this video so let's get started before starting if you are new to my YouTube channel don't forget to subscribe go with yourself so let's get started so I have created my react app so now I will install just react auto Dom and bootstrap npm install bootstrap or react Auto down first of all for routing will carry out router it is used for routing and also bootstrap so I will install these two packages and the packages has installed now let's run our server npm run due so it will start our react app let's close this and here let's open it back and let's move to this URL let's Control Plus the URL so it will move us to the browser so now let's write something okay first of all we will create a note bar so to create a no bar um before creating no bar I will just use react auto Dom for routing so let's import it first of all import browser router routes and route okay so let's create routes first of all then we will create the components browser router sorry what happened to this browser router and inside this we will Define routes and inside the trout in this out we have two parameters the first one is path is equal to where this is just for home and here we will Define the element we didn't create it any component right now so later I will create the components let's copy this using shipped alt in vs code okay this is for admin and this one is for our user and the cell I will create one for so that is okay just okay control exit now let's create the components so here I will create um two or three components home.jsx and also here I will use our afce react functional component so it will create a component automatically for this to write this code automatically for that you need to install this extension okay react which is let's see this one this extension install this one so it will help you to generate code automatically and a lot of other things you can do with this and also let's create one another component for admin .j6 and one for user I have created this company let's write code for user for admin also so now let's import them so here I will write let's import first of all the home let's import it and admin admin and also user so now let's write them here this one is for home and forward Main and also for a user so now let's create these links in our home page okay we will create an over now so for creating an O Bar I will just move to the browser and here I will light bootstrap now bar let's move to the fifth version and let's copy one of them and let's copy yeah copy this one and just let's move in the home we will create that no bar yeah let's close the tags in react yes you should close all the tags each other we should close that also and that is okay now so let's import the bootstrap I have installed the bootstrap import s slash bootstrap Dot main.css let's check it now yeah this is our drop down so now let's customize it we will import a link from react autodome also that has imported now we will use instead of Bunker tag this link tag uh let's um just come here to the button now bar and instead of this we will change it to the link and also this is class name into is equal to we should move to the admin let's change it to the admin remove this now let's remove all these things and we will copy this one and paste it here for user and we should move to user and here to admin that is okay now so now let's create instead of this we will print here at the user okay right now which is logged in we will print that user here so right now we don't have one user so let's skip it now let's check it now yeah it looks like this now so let's check it now let's press on the admin we came to the admin but instead of this let's make it the now bar should be present at all components so for that let's create one another component now bar Dot j6 and here are afce close it and just come here to the home and we will copy all this code cut it okay we will cut all this code but here in this we will light just home now let's paste it inside this now bar and let's import link here and also in app.j6 we will import no bar here right okay now bar let's close it now let's check it yeah right now the nobody's at the top let's move to the user let's move to the home let's go to the home for moving to the home we will change the yeah this one we should change it to the link and 2 is equal to we should move to the home page close it and let's check it now see let's move to the home our domain and user now let's make them roll based okay if the admin was login they should move to the admin page if the user login it should move to the user page and if the um a general user was logged in normal user so we should move to the home page so for that let's move to our app.j6 and this is just a react JS okay if you are pitching data or rules of users from bit database when you pitch them so then you should assign them okay right now we will just normally write the users but if you switch from the database so then you can use those usernames so let's create an object users is equal to it is an object registered registered is equal to it we will assign register registered and if that is public okay public user and one is admin with us admin admin so now let's write here a const user current user is equal to with for example we will assign users data like registered okay so this is our current user you maybe pitch it from database but right now rooted main value okay so now now let's pass this user to our components now so let's copy the current user and we will pass it first of all to the now bar and we will display it on no bar so let's paste it is equal to paste it again so now let's move to our now bar and we will extract it current user and now let's display it down at the bottom here okay after the list we will display that now let's take it a okay just come here see we are registered user it means that we are registered right now the user is register if we change the user so like our domain okay so let's check it now see admin so now let's uh apply a protection okay role-based protection so now let's pass it to all these components then I will check there I will first of all I will pass yeah the home page can access everyone but let's pass the user to the admin and also to the user okay let's distract them between the admin and also the user now let's check in the admin page okay and now we will check that apple if the current user was equal to equal to with our domain so then what we will do we will pitch this admin page else if it was not the admin so then what we will display we will display him you are not authorized let's check it now right now okay just come here to the page and we are registered right now we are as login as admin so let's move to the admin yeah admin and user we can access the user but we if we logged in as the user just come here and we would like to like public okay now let's move to the U admin okay see you are not authorized okay we saw this page you are not authorized also if you log in as user as registered one let's save it and let's come here back we are logged in as registered user okay this home page and the admin you are not authorized okay to access this admin page so let's do the same task for user also if the current user was equal to equal to with the um our domain r current user was equal to equal to with the registered so the net can access this page otherwise let's write here the question mark and otherwise we will just display a message you can you cannot access this page let's save it and now let's move to the okay we are logged in as a user okay registered user so let's move you are not if you came to the you cannot access this page I think there is a misspelling mistake come here to the registered copy this and come here activating let's check it now see we came to the user if you would like to move to the admin you are not authorized and the user it means we came to the user and also to the home page but if we log in as public user it means the one who is not logged in so let's change it to the public and now we will check it okay let's come here and a home page admin you are not authorized user you cannot access this page hey also if you would like to have here the dashboard button and just the admin can see that button okay no one else can see that button just the admin can see that button so we can do that the same okay let's write that also come here to The Note bar and here we will print a button and we will write the code okay let's write if the current user was equal to equal to with our domain so then we can see this button okay let's come here cut this else nothing okay save it and now let's move and check it we can now see right now this admin it means dashboard okay let's change the title of that also dashboard and also you can create another component for that see we cannot see that right now because we are logged in as a public user so now let's login as a domain let's save it see the dashboard button we can see that that link also so it is all about role based routing using react.js I hope this video was helpful for you if you like this video don't forget to subscribe our YouTube channel thanks for watching

Channel: Code With Yousaf

Views: 6,338

Keywords: react, react router, react js, role based routing in react js, react router v6, react router dom, react tutorial, react router tutorial, role-based access control in react, react user role-based access control, role based react routing, role based authentication in react js, role-based access control, role based react routing hindi, react auth, react login, react authentication, protected routes in react, react router v6 tutorial, implement role based routing in react js

Id: QgY8XNJv-qw

Length: 16min 56sec (1016 seconds)

Published: Thu Sep 21 2023