How to handle role based routing and role based component in React

all right all right welcome to vegas web channel and this is another video and as you saw in the thumbnail and title uh this video is about route permission so once again on the same project and what is this video uh about so i set out permission because you see when you are developing a big project where you have different roles of user so in that case depending on different role uh you might be showing them different routes or restricting them from some different routes so if they are admin they can see certain buttons they can see certain things and obviously your backend will also be restricting those but you will be also restricting those in your ui and that is what this video is about so if that sounds good please hit the like button if you are new to my channel and you like this kind of content subscribe my channel let's start the video [Music] okay for this video as well uh i am going to use the same uh react router project that i have been using in my previous videos you can go and check uh all those videos how did i set up how did i do what we have done so far in this project we have several routes and then we also have some nested routes on top of that we have protected and public route so this is one thing about route restriction which i have already gone in my previous video you can see that this is a protected route and all i am doing there is i am checking if user is authenticated or not if authenticated i'm rendering outlet if not i'm navigating to login page and in our public route it is basically the opposite of it and this is okay in most of the cases but what if you want to also go one extra step and check them and say that if the user is authenticated and user is admin user has a role of admin then only take me or take that person to that ui or to that route okay let's come back to all the ui state a little bit later but first let's try to go through the routine so for this we need to modify our code a little bit so in my previous uh this protected route tutorial in that video all we have done is when we are logging we are just setting item uh local storage set item and then the user will be just test now we need to also get some sort of role from the user and for this video let's go with the role just just two roles one will be admin and another will be user that's all but once you get this idea you can add many other roles for example it can be manager and so on but for now we just have user and admin two roles okay for now let's just go here and let's just say roll is admin and this doesn't work like that because we need to do json dot string if i and then we need to wrap this here and now we have this so now instead of retaining true or false we need to uh return two things one is so we need to return something like this uh we can do auth and that can be true or false and then we can also return role and that can be admin or user in our case so that's what we want to return so let's go and let's change this and then if if we have user then auth is true okay and then role is user dot role obviously it doesn't exist at the moment however that's what we want and if we don't have then what we do is auth is false and obviously role is null because there isn't any row all right so now let's go and modify this all right that's all we needed and if we don't have anything we have so now from oauth what we can do is instead of getting this off we can do like this auth and then roll why because as you can see we are returning those two things from here and we have roll so now our code will still work same like it if i log out this goes to login if i go and i can view all the routes and that's all good but on top of that now we have one more thing available and that is raw protected route state and that can be type protected route type and then here we can say role required and that is string or actually let's give this admin or user we need something like that one of those if needed we will change it to an ear string later but let's just have that for now okay so what we want is we want here props and that is protected route type okay so now if i go to do props dot and you can see we get roll required however okay so this can be optional so why i'm saying this can be optional is because in some cases we only want to check whether this is auth or not in in some cases we want to check whether the role required is present or not so now what we want is here we check like if the role required is there or not so if we have pass rule required then what we need to do is if roll props dot roll required in that case we do that else we can do this obviously we can also change this to similar approach so let's copy this again so if we have props dot roll required first we will check if off right and then if there is off we also check if props dot roll required is same as role if that's the case then we do outlet in any other case we will do navigation to this and i think there is still something missing and that is let's do this also here so that way what we are doing here is we have like so many if here so first let's go with this auth so if there is off then we go inside this if not we will navigate to login that's one thing and then second is if prop roll require a stroll then we render outlet so that means to render outlet we need two thing first it needs to be authenticated and it needs to have the rule that is required then we render outlet in any other two cases we navigate to login also it would be nice that here when we are navigating instead of this we can even have like some other things saying permission denied so we can have some other page instead of navigation so that can be also done then let's go to our routes okay and then somewhere here anywhere even outside our public routes we can have here so what we can do is i can just take one of this i have here and i can say that we can have some route called denied and here all we do want to do is permission denied and that's already imported there that's good so now here instead of this navigate to login we can just navigate to denied so let's go here let's refresh so now we are in these pages okay however if our role require will be not admin so um let's go to our routes here and then we can use protected routes component and let's go and let's see for visiting tab 2 we need protected route so you see we can use basically the same approach exactly the same approach what we we were doing earlier but one more thing so let's let's go here let's wrap so we can wrap all this okay and then that is our tab two okay and then what we can say is protected route and role required here is admin our tabs to is role required admin and since our user at the moment has admin let's give here role required is user what happens you see we are getting permission denied if you are in any other pages you can do nicely even if you can go tab 3 but if i go to tab 2 it will take me to permission denied so this is good however in a real case scenario there can be a different permissions so let's say we have permissions and you can have different role for example admin and similarly you have manager and you have user and so on so what you can do is you can give a value like this so and for your user you can give one and so on so your admin and super admin they will have the higher value and then what you can do is instead of checking exact string match here you can do is that permission and then like so what is permission and then you can pass the role here and if that is equals to or greater than whatever the rule that is required okay so this will be the real role of user and then that is role required so if anybody so now if our user is admin so permission that role of the user will be three and then role required in our case in our example here we are passing role required user so that road roll require user will be 1 so 3 is greater than 1 so if this matches then we continue with that so this is just idea how you can do it additionally we can also do with component which is what i'm going to show you as the last part of this video i'm not going to deal with this permission because in that case probably our this one uh protected route is not enough we might need to create a permission route instead of protected route and then do it there because our predicted route is only for oauth and not auth and then our permission route will be for each of those like where we want to have different permission we can pass there and so on i would like to create one component and that component will be something called use permission so let's go and let's duplicate our let's say this tab one and this we can say with permission it's just a name and with permission what we can do is first let's change this and let's say the name is with permission so what we want to do is we want to have some props here so let's go type and let's do props so the props is roll required that's what we want and that we can have a string okay at the moment we can just have user and then then what we can do the next one is we can have a message and this can be string all right so now what we can do we can have props and that will be props props type and then here we can do that rule required and then message from our props okay and additionally whatever we have done in our protected route we can also get all this use off and then let's do so so we have also use off from here and then i think we don't need to set auth okay so we don't need set off all we need is roll and then [Music] we don't need to control this i guess this should be all good actually instead of us we can say usual and then we don't need to even do this we can just return user role if we don't have else let's return our default user okay so we will be using use role and it will get everything from local storage okay so now here what we can do is const roll is from use row okay so now we have roll and also we have roll required and everything from props if we go to our tab that is permission design and we have tab three okay and then in our tab three let's go here and let's import our with permission so you know what better will be let's go here and with permission so we can have something like that and you can see it already needs something so with permission children never is missing okay so we require props role required and message so let's say role required here is admin and message is we can say only admin can view this okay and this is also saying that children is missing so let's go here and here what we can do is here we can have children and [Music] that can be optional and it can be our react dot react node okay so that's good now we go back to our tab three so we have this and here we can write something you can write any component anything inside this but here just for our fun i will just do hello for admin okay so so this is like only for admin and or we can say welcome admin okay so instead of this you can have any component anything you can wrap all your div whatever you want however this is how you can use with permission you can give what is the permission required for this and what message you want to display if there is nothing additionally we can go here and we can also make this message as an optional so now let's go here and all we need to do here is we don't want any div or anything so we need to check if roll required let's do that if we have role required is same as our user role we can render then we can render children if that's the case then only we require rendered gender children if role required is what we can do is instead of this if that's the case we render children if not we just show maybe s3 and we can show the message okay so if we have message we show message if not we show empty string so what we are doing we are saying that we are getting our role from whoever is our authenticated user okay just like in our uh protected route and then in our protected route we had a little bit more we had user if it exist or not but in this case we already know we should know that the user is authenticated there otherwise we wouldn't show them this route at all they will be redirected to login screen but in this case if they are user and if they have a role required then we will show that to them and if not we will not show that to them so now let's say let's go here it says welcome admin it says welcome admin because we have the role admin so now let's go back to our login here and here instead of it mean let's do user obviously in real case you will send request to back in and then back in will from database give whatever the real role user has so now let's log out let's login okay so let's go to tabs we can see let's go to tab two we can should see tab 2 because tab 2 is visible for our user role and that is our route level permission however we have also component permission and if you see go to tab 3 it doesn't redirect to anything because it is not route level permission it is just our component permission and it says only admin can view this so with this two approaches one approach as you can see is from our out here we pass this and then in our protected route or as i said earlier if you want to separate it from protected route just like we have with permission component you can also have a route that is called permission routes and there you take the user required role versus the component of that route required role and if it matches then you can render that route otherwise you can show the error message or redirect them to whatever the page you would like to rewrite it and same with the component you can do similar thing and also here as i said earlier you can have some sort of values like for example i was telling you earlier that you can have something called permission here and then permission can have admin manager developer user whatever you want and instead of this you can check that the role required numerical value is greater than or smaller than or whatever is your condition so in that case uh whatever the user can access developer manager admin can ss and so on so you can also change that to numerical value and then do it i hope now you have a very clear idea about how to handle a different kind of permission for different pages how to hide things how to solve things and so on you can do the same thing instead of s3 here like so if i go here now i can also have a button and then button can be edit so for example if i go here if i refresh only admin can view this but if i log out if i go here to login and let's change this back to admin again and now if i log in as admin if i go to tabs if i go to tab 3 now i can see the edit button and probably with this i can edit something and obviously just hiding it in front end is not enough your backend should also do the permission middleware check or whatever they do so that even in case if someone does postman request so then backing should be able to check that so that's all for this video if you like this kind of content hit the subscribe button with that's being said thank you so much for watching keep calling bye bye you

Channel: Bikash web

Views: 42,584

Keywords: React role based component, role based route react, React user permission, reactjs tutorial, react tutorial, node js

Id: Kl4cW7foO1I

Length: 24min 48sec (1488 seconds)

Published: Tue Mar 08 2022