Role Based Routing in React JS | Role Based Navigation Links | React Router Dom tutorial

hello guys welcome back in this video tutorial we will learn how to create role-based routing like I am loading ion admin user so I have access to all of these roads and I can move to any of these pages and if I'm logged in as a normal user then I do not have access to the admin page and if I directly go to that road then it will say that you do not have access to that particular page and if I'm logged in as a public users then I do not have access to the user user profile the admin links and I cannot even go to that particular Pages directly writing in the browser address bar it will redirect me to the home page and maybe if I go to that man it will say you do not access to that page and if I type something maybe ABC it says that this page is not found to see how we will implement this role-based routing let's get started I have an empty react.js project that is using react Auto Dome and right now it's showing nothing so let's go ahead and start adding role based routing so for that first you need to install the rectoto Dom you can install that using npm install Direct Auto down so once that is installed first thing we need to do is we need to encapsulate our main root component that is the app inside the browser router so we can do that browse the router that is from the electro2 down and cut it from here paste here okay once that is done we can start using the roads in our app component so let's define the roads again from Direct Auto down and inside the roads we can define a single Road and here we can say for a path if it is a single slash or we can say the home what element we need to render so suppose in that case we want to render our home component and let's define this home component as well so we can say function home and we can return maybe a simple div we can say home if I save it here you go I'm on the route and this home is shown right let's add few more robots uh we can see if it is like and a user we want to show a user component and if it is uh admin we want to show a admin component right so let's copy this one and add those components as well you can say user and here we can see admin page Maybe admin and you can see this is a user page maybe you can set home page right save it right if it is a home page and if I go to the user this is user page and if I go to the admin it says admin page right and if I go something which is not there it shows empty we can write something here as well so we can say in case of the roads if it is not between these roads slash or slash user or slash admin if it is other than this we can say inside a div Maybe you can see page not found right save it there you go it says page not found so right now you see I can access any of these routes so if you want to make them role based like if I am logged in as a normal user I should be able to access only this user or the home and if if I am an admin then I can assess all of these right so for that we can mimic the behavior and we can create a constant here we can see cons cost you can see current user type and we can Define some user types as well we can say const user types and here we can see it is a public user and maybe then we can say uh normal user right a purple user will be only able to access this home and the normal user will be only able to access this user as well as this home and then we can say the admin user and this user should be able to access all of these pages right so by default maybe we can say user types Dot Public right and here we can say we can Define uh some elements we can say this is a public element this is a normal user element and this is uh you can say the admin element right so while returning this these elements home we can encapsulate them inside some elements we can say this is a we can see public element right if I cut it from here and paste it here right and we can Define this public element here here we can say a function and public element and we will be getting the children here and we can return just the children right save it and if we see to whom this is home page right so we have defined defined a public element so for all of the roads that you need to be accessible for any type of user you can encapsulate that inside a public element or even you can skip this public element as well because we are just uh returning the children whatever is inside that but but to make it uh symmetry uh we will be adding the elements here we can say user elements then the ultimate elements right so we can copy this one and here we can say public element instead of the public we can say user element right and we can Define this user element here maybe we can copy this one and cut it from here right and here we instead of this children we will be first checking if the current user type is something we can say user types dot admin user or it is a normal user then we can it is an admin or the normal user then we will be returning the children right otherwise we can return anything else maybe we can say return uh div we can say you do not have access to this page right if I receive it and now if I go to the user it says you do not have access to this page right because I am logged in as a public user and if I change this to a normal user if I save it let's say that the user page has been rendered right so that means you have access to this page right and if I logged in as an admin user still I will be able to have access to this user page right and if I again back to the public so it will say that you do not have access to this page right and in in this case if user does not have access to a particle page we can show uh simple tags or we can navigate to our Different Page maybe we can navigate user back to the home we can do this that as well we can say return uh navigate that is again from the left Auto Dome and here we will be providing the two we have to navigate and we can say navigate to the this one and this will not be executed okay here you go so if I know go to the user it will navigate me to the home page so we can either uh keep the user on the same page and we can show the message or we can navigate the user to some other pages right or maybe we can navigate the user to maybe we can say page not found right and save it and if I go to the maybe use it it says page not found right instead of the home right and if I make this to home it will say homepage right okay so similarly we can add a element for the admin as well so maybe we can copy this user element and here we can see the admin element and it will have only access if it is the user type is admin user and then we will be showing the children and instead of navigating we can here we can say you do not have access to this page right and while we are defining our road here we can see it is a admin element right you can cut it from here and paste it here okay so for Admiral road we have returned the admin element and inside that we are running the admin component right okay save it and now if I go to the admin it says you do not have access to this page and if I change the user type to the normal user save it still it says you do not have access and if I change this to admin user it says no you have access and it has rendered the admin page right so this is how we can create role-based robots so we while we are defining the roads we encapsulate those components uh inside our elements and in in those elements we define whether it is accessible for this particular type of user or not and if it is not accessible either we can navigate to some other page or we can just show the message by keeping the user on the on the same page right so similarly if I add another route maybe copy this one and here I say instead of this user I want to say my profile and it is you know if a user element save it and if I say my profile so it should be accessible right it's a user page right because I just created a new route and the element type is the user type so as as long as the user type is admin user or the normal user it should be accessible but if I change this to public it should not be accessible right it should navigate back to the home page because in the user element we are navigating to the home page right so this is how we create the role-based routing uh but if we want to add the links based on the roles we can add that as well so maybe for that we can create a simple component for these rows we can cut it from here and we can create a small function we can say approach and here we can return whatever we have written inside the roads right and here inside the div we can see approach right it is still the same and above these roads we can add the links that we can say maybe inside a div we can say uh link that will be again from the react Toto Dome and here we can see to go to this home and we may call this uh home right if I save it there you go it has added that link and let's copy this one and clear the links for other routes as well so here we can see the user then we have the user profile and then we have one for the admin we can say user and then the user profile and then we can say the admin right if I save it and let's add some styling here and we can say it displays Flex and we can say Gap is 12 pixels save it and maybe we can add a little padding as well maybe 24 pieces or maybe only uh it is enough right and now if I click of any of these it will go to that particular page right the home page then the user and if it changes to advance so that it has access to all of the pages and home the user page the user profile what is inside that that is my profile right save it okay user page and then the admin right so it has access to all of these pages and uh you can navigate to any of these right from here and maybe we can show your login right in this way so for that maybe we can say inside a div uh we can say you are logged in as and here we can see current user type here you go your login as admin user then you have access to all of these pages and if I am logged in as a public so for public users I do not have access to the admin no access to the user profile no access to the user and I only have access to the home page I am if I click on any of these it will navigate me to the home page right and in case of admin we are saying that you do not have access to this page right and if I normal user then I should not access to admin but I have access to user file as well as user and the home page right let's add a little more styling to the header to look it little better so I have added a little styling so I said background color this one and added a bottom border of red and made the color to white and add a margin bottom to 8 pixels and then I have also added the style to all of these links and made the color to white right and here you see we are always showing uh the links in the header and if you want that we want to hide the links which are not applicable we can do that as well so we will be doing the similar work we did for the defining the user elements so we can copy this condition from here and while we are showing these links so then we can say here if it is this user type then you can show that inside a fragment these two links cut it from here and show it here and otherwise we can say show null right so right now I'm a normal user if I say it's a public so the user and then the user profile is not shown here right and similarly we can do that for this admin as well so let's copy this one and paste it here and here we can only say if it is a admin user then we can show this particular link right otherwise don't show so it has not shown the link and we cannot even go from here as well right it says admin is I do not have access to that page right and if I'm uh the admin user save it it says that you have access to all of these pages and I'm gonna go to any of these from here as well as from browser dashboard so as somebody what we did is we have defined the user types at the very top and then we have defined the current user type so we mimic the behavior here by defining our constant but in actual use case you will be having your current user type inside a you can see redox reducer are in a global state or somewhere right and then we have defined our links for the header and there we have added the conditions when to show those links based on the current user types and similarly we have defined the approach and while defining each approach we said what is the type of that particular route if it is popular then this will be accessible for all users and if it is of user element then it will be accessible for uh the normal user as well as the admin users and if it is an admin element then it will be only accessible for the admin users right and then here we have defined the different pages so for now we just defined the only divs but uh in actual applications you will be defining a whole page here whole page here and whole page here right and then at that we Define these elements if it is public we are returning all of the children whatever the page is inside that we are turning that and if it is a user element then we will first check if the user type is normal user or the admin user then we will returning that particular page otherwise we will be navigating to the home page and in case of the admin uh we are checking if the user type is admined then return the children otherwise show this div right so that this children will be actually whatever is inside these elements so for the children of the user element will be the user and the children of these admin element will be the this admin component right so if the condition is fulfilled then these children will be shown otherwise it will be showing uh this div right so this is how we create the role based roads we'd find the role based links but still if you have any questions please let me know in the comments below and if you have learned something in this video please hit like subscribe to my channel see you in the next video thank you

Channel: CodeWithAamir

Views: 41,507

Keywords: reactjs, react, react router dom, react-router-dom v6, Role Based Routing in React JS, Role Based Navigation Links, React Router Dom tutorial, implement role based routing in react JS, define role based navigation links, create protected or private routes in reactJS, User Role Based Router Elements, react page not found routes, custom messages on protected routes access, Separate routes based on user roles, codewithaamir, role based routing in react js, role based components in react

Id: ZSOFwhbvHOg

Length: 20min 17sec (1217 seconds)

Published: Mon Dec 12 2022