React JS role based authentication using JSON Server REST API | Handling EDIT DELETE ADD VIEW Access

authentication series part 3. so part of this video let me explain the scroll based authentication using Json servers GP and also we can handle add ad delete view access based on the role permission and this is the continuation of my last video in my previous videos I have explained the functionality of login implementation using the same Json server as gpe now let me go to my application so we have this registration screen and also the login screen okay now let me go to my db.json file so actually this is for the Json server so if you noted here I am having one user array so there is having these two objects that means I am having two users so in this field I don't see any field like a role so let me include one field role okay so we can provide some static value the first one I am providing is that mean and the second one I am going to provide user okay so these are the two roles and then I am going to create one more object for wall based access so here I am going to get my first object the role admin and menu customer okay and then permission have ADD for the admin user I'm going to your true okay the similar way I'm going to include have edit and also have delete okay so this is for one of the menu the similar way we can include multiple menus also for the same admin user and the same way I am going to create the record for the role of user so the user how the add access and also edit touches the delete formation I am going to remove okay and finally I am going to include one more role it basically it is used for our testing purpose so this user have the access for only view okay so let me Mark everything into files okay our data is fine now let me take this URL the Rolexes okay it will return all the records so I am going to get the record for the particular user role okay rolly so admin So currently I'm having only one menu so that's what it's coming like this so in case if I'm added uh one more menu for the same role maybe the menu I can give like supplier okay see it is returning the two records so now I'm going to pass one more parameter the menu okay customer so now our AP is ready so the thing is we are passing two input the first one is role and the second one is the menu so we are checking in our table so instead of the table we are having this db.json file so once we have the records it will return so there we can identify okay we have this add access and edit and remove access okay so in case if I am passing some other menu it won't return any data okay so in the EPA point of view we are good now let me check my login admin user and admin login field due to the fetch so let me check this one yeah understood actually we implemented this login functionality using kind of.net core vbpa so let me switch into our Json server API okay so proceed login I believe we are calling this one proceed login using APA so let me bind our Json server method okay then I hope it will be work okay so now we are in the home page so there we have some tables so let me comment everything So currently it's not required okay okay this is fine another one more thing the header section available in our home component so better we can move this into our app component okay so then only we can reuse for all the pages so let me create one new command here app header.js okay so whatever code is there let me move this into our half getter common okay and then in our app component inside the browser router we can call this app header that's it so here I can see some error we can resolve one by one so the first one is link and then we have to declare this display name so let me get it from our home component it's not required here and then we can move this function also so let me include this use a fight hook and here we have to declare this use navigate also okay the most of the exceptions are got resolved so now I am going to include one more menu so this is actually for our customer screen so in this customer screen only I am going to handle edit delete and add functionality based on the user Rolexes so customer okay now let me create a new component also for this customer screen and customer and let me include this component into our routing section customer okay this is fine okay Home customer so if I'm clicking so it is simply redirected into our customer page so the design point of view somewhere it's not fair okay now it is somewhat fine so we have this home and also this customer right and let me try to log out and also currently I'm in the login page so in this login page I should not show this menu okay for that what we supposed to do in our half header component we have to get the current menu okay for that we have to use the one more code use location so that also comes from our react router Dom first we can include this into our console section okay this is the path name right so we can take this one if location Dot path name equal to login so in this case uh we should not show our menu okay so better I'm going to declare on New State variable and show menu so the initial value I'm going to provide as false okay and if it is login again it should be false and the else scenario we can set this into true and this should be applicable for our register screen also okay not even redirected into our register screen okay let me verify this one okay this function actually blocking okay so what we supposed to do so let me move this kind of code also in our scenario so only the exception for login and the register screen okay so still the main is showing so because uh we have this variable I am not it mapped this anywhere so I'm going to have one more parent due so let me format this one and then we can apply this conditional template okay this is done see now the menu got removed so if I'm trying to login that means admin why it is not showing okay in this conditional template we can use this location because every time the data change we supposed to update this one okay now let me log out once again so see I am currently in our login page so the menu is not showing so if I'm trying to login see the menu is showing okay and again if I'm trying to log out now I am trying to access our home page it won't allow now we completed our login registration with our complete authentication scenarios so let me focus on our customer menu then we can complete our role-based access okay so let me log in one second so now let me move on our customer screen so in this customer screen I am going to load some list of customer information and the functionality point of view add edit delete I'm not going to implement the function so instead of that I'm going to have one dummy function so that should be accessed based on the user role permission only okay for loading the customer we should have the data okay so now let me include some static data in our db.json file so here already we have this user and also this role axis so after that we can include one more array so it should be customer so let me duplicate and creating some new records okay now our data is ready so that means our AP also fine customer okay now what I'm going to do in our customer screen so let me declare one use State variable so the initial value should be empty array okay and then we can call our APA so we have our endpoint and first time checking the response if it is not equal to ok then return false and the else scenario we can return into Json format okay so what our data is coming we are just updating here okay so basically I can move this section into our not the function that is better load customer and we can use one use CFI hook also so I hope we have the data so next let me focus on the HTML side so anyway already we have installed this bootstrap so we can use some of the booster classes here okay see the screen it is somewhat fine okay the full screen is not required means so we can include this container class okay and in this body section we can include our table the first one is called the name an email so we have only three fields so finally we can have this action for the time consuming only I have added the limited columns okay so in this table we can have this table and table and here BC dark text White okay see now let me bind this body section so let me take this cast list variable so basically it is the array I'm going to check the conditional variable first so if we have the data then only I'm going to bind it here and then let me generate the for Loop for the for Loop we can use this map option so instead that we can use this G do so in this parent element we have to include the key option okay so here key is nothing but an ID okay it should be in code that's my mistake see the First Column is coming the same way I am going to include the next two columns also okay our primary focus it's all about the authentication that's what I'm not spending much time here so in this final TD we can have the buttons okay and it's for edits and another one is for the remove this is our listing okay and then top of that I'm going to include one button also that is for the ad okay this is fine under the next thing is I am going to bind some dummy events handle add the same Bay handle edit then handle remove okay so we can declare the functions also otherwise it will throw the error so the same way let me declare two more functions so the next one is for edit and the final one is remove okay so if I'm clicking see it's added edited and removed so these are with just a dummy function now for implementing this tool based access we can call this AP okay so let me create one more function get user access same way we can call our APA the steps are again same first time checking this response if it is 200 response fine otherwise will return files in the past few response we can convert this into Json and the next section so basically I will get an array only so I'm just checking the length of array which is more than zero basically I will get only one object in this array so if it is the fastest scenario I can declare one more upset here the first object okay and let me call this one also in our ucf8 hook section and the next thing is parameter the role and this menu so menu it is fine anyway we are checking only the customer I am just passing so the role should be an Dynamic one so let me get it from our local storage user role so let me check I just added this username only after the login also I am adding this into our system storage so what I'm going to do let me include one more thing okay user rule and in this response dot role now hopefully I will have this role information also so once I am having this one let me get it from our session storage first time checking not equal to null if it is the positive scenario we can get it from our storage if it is null I can Ascend this into a empty okay now this is fine and the next step is B how to declare some U State variable okay have edit and edit change so the default value should be False only the similar way I am going to declare three more variables okay with this much of space so the first one is edit right so next I'm going to provide View and the third one is ADD and the final one is remove so let me format it here first let me take this view change function so if we have the data only I'm going to mark this into true okay and the second one is have edit for this one I can assign it from our object okay have edit the same way we can include for have ADD have remove also okay it should be edit change the next one is ADD change and the final one is pretty much change So currently I am just explaining using only one menu so in the real time scenario we may have a number of minus types so in this situation uh what we supposed to do so we can create one custom hook so in this custom hook we can move this function and everything so wherever it is the functionality is required we can just use the hook in our starting point itself okay so anyway let me complete this functionality so next time checking this have you it is having the permission only I am going to load our customer else I have to redirect into our home page and also I'm going to say you don't have access for this particular page right you will run for the navigation I'm going to use the use Navigator cook okay so it is just a declaration okay this is fine and the similar way let me go to my dummy functions have ADD the success message so in this health situation you are not having access for ad so let me apply for the next two dummy functions edit okay this is fine now we can verify one by one you are not authorized to access okay let me log out and we can try from the starting admin user and admin so let me go to my customer screen okay it is showing some warning we can verify so let me include one more console here okay the page load I'm getting is the false that's what it is not loaded so let me change the function okay so let me how this function is here and the other two piece of codes I'm going to include in our get user access function okay and also the CLC scenario so now let me refresh the screen once again so if I'm trying to access this one customer menu so I am able to access so I am admin user so it is added then edited then remove so okay remote is saying you are not having access for remote so let me verify this one okay here the flag I added it's the have delete now let me go to the screen once again okay have delete Let me refresh one second see if I'm clicking this remove okay remote so the admin user have the complete access right so the next thing is we can check the user role of just user so it is having add and ready taxes so that's our end user let me log out see so customer it's fine added edit finally this remove very much saying you don't have access for remote and the same APA if I'm trying to change this edit also falls okay for the role of user okay if I'm changing this into files so if I'm clicking it is saying edit also you don't have an access remote also don't access so then add only it's there right and the same way if I am changing the center of false for adding also ad plugged then add is blocked and remove also got blood finally I'm just removing this object that means so I don't have the access for the customer name so now I'm going to refresh once again see you are not authorized to access and it is simply redirected into our home page okay now let me revert it see now I am able to access this uh customer listing right okay in this way uh we can handle our edit and roll and remove functionality so now we are almost in the end of the video still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel thank you thanks for watching

Channel: Nihira Techiees

Views: 10,761

Keywords: react js full course, react for begginers, react js full tutorial, post request making in react js, api handling in react js, recat js crud operations, React JS CRUD Operations using JSON Server REST API, JSON Server rest API in react js, React JS CRUD Operations using json server, react js routing with parameters, authentication in react js, react authentication using json server api, implementing registration functionality, react login & register using json server

Id: 1B1vFk1RkjI

Length: 35min 5sec (2105 seconds)

Published: Thu Mar 02 2023