Angular 15 Authentication (ADD, EDIT, DELETE,VIEW access based on role) using JSON server REST API

Hello friends welcome to Nigeria techies this is our angular 15 authentication series using Json servers tpe and this is the part 3 video so in my password video I have explained the functionality of registration login and user Activation so I will share that link also in the description if required you how to watch it for this video I am going to focusing on this user role permission for the functionality of ADD and edit delete okay so before going to this implementation let me provide some short notes that actually I have followed in my pattern video so make sure you should have the latest version of node.js and also you have to upgrade your angular CLA to 15 and install the Json server because the database purpose we are using this Json server APA and then you have to create the application install this material away package for the design purpose and showing the notification you how to install this ngx toaster and finally how to run our API okay now let's start our implementation so first I am going to start it from our db.json file okay because the data is the very important thing so in my db.json file currently I'm having one user array and don't roll array okay so here I'm going to include two more objects so the first one is Farm menu okay so our first menu name is user that is fine and the second menu is customer so next let me create one more object roll access so here the first field name is role and the second field is menu user and the third one is have edit so this is the Boolean field and the similar way I am going to include two more fields have ADD and have deletes okay so now I have added one record for the role of admin and the similar way I am going to include it so the next two menu is customer so here the concept is we have two menus so the the role of admin having the complete permission for user screen and also the customer screen okay and also I'm having two more roles the user and Tech so here what we supposed to do let me copy the whole object and the user so this user menu they can view the things but don't have this editor delete and add access okay so let me make everything into files and in this customer screen we can provide this edit option and also add the delete access I am going to remove okay so this is for the role of user and finally we have one more role that is for Tech so the tech user don't have access for our user menu they have only access for the customer that also only add access so this edit axis and also this delete both are removed okay so the data point of view we have completed I hope our AP also running yeah let me verify it okay this is fine next what I'm going to do uh let me create one new menu so this is for the customer so here uh we have this user so after the user I am just including this customer and the route name is customer okay and it is always visible no more restriction and then we have to include this in our routing section so we need to create one component also let me create it okay great the customer component is created so let me map our component here okay this is fine and the next thing is we should have the customer data also so I am going to include some default data here so this one is customer okay now we have done our data side component let me log in the application see our customer menu was there so currently we have on small text only so in this customer screen I am going to load the list of customers and I'm not going to focusing on these credactions so instead of that I am going to focusing on how to handle this access okay and now let me copy the codes from our user component so using that we can load our customer string here instead of this load user I'm going to change this into load customer and then so in this Constructor side this form Builder it's not required okay our service so we have to import it so it is result and this matte dialog also not required okay so the Constructor point of view we are good and instead of this user list I am going to change this into customer list and this view child is required and then matte Bay generator and match shorting both are required and then this map table data source also requiring thing only and our display columns are code name and credit limit and find the action that's it and this service point of view we have to create one more function get to all customer and let me take the URL also okay this is fine and we can create one more function so here we have two parameters the first one is role and the next one is menu so basically we are passing this menu name and also roll so we will check our role axis APA so we are going to match this Roland menu so if we have the data we are going to return otherwise I am going to return the empty object so once we have the subject we will know whether the user having this edit add delete functionality for the particular menu So based on that we can Implement our role based access functionality okay so as I mentioned I am going to pass this Roland menu so our APA should be like this roll admin and menu customer okay so I'm having two data I believe I have to correct the data okay yeah now it is fine so here this admin and customer both are the dynamic value okay our function is ready so instead of this get all method we can call our get all customer okay now just to move on the HTML path so first this is the customer listing and the First Column is code and the database field is ID that is fine and the name and the final one is credit limit and the status and role we don't have and the final one is action okay so instead of this user update let me change this into update customer and here we don't have any condition also let me Define this function otherwise we will get an in and also let me Define this function otherwise we will get done here or okay see this is our customer listing screen okay so here I added the button for edit and also I'm going to include one more button for delete and let me change this color into hasn't okay so this is good and also we can have one more button for the add user okay okay the design bind up you find now let me go to our TS file so here I am going to declare three variables okay have ADD okay I declared the three variables and the default value I set it as The False only okay so next I am going to create one function set access permission so let me call over service the method is get access by role so here there are two inputs the first one is Rule and the second one is menu so menu we know so this is the customer's frame right so we can hard code but the role is the dynamic one once we are logged in we are storing the role in session storage or else we can store in the local storage so in my case already I have stored in the session storage and for getting this role also I created own function okay so this is available in our services so we can use it here okay so this dot service get rolled okay now let me subscribe it and then let me declare one more variable here the data type should be any okay so let me form it in then we can call this function in our page load okay or else we can call in our Constructor itself now let me put this Access Data into our console see in the console we are getting on array so the datas are admin and customer so we have this have a data access and delete both are in the true state only okay now let me command this one we can check on condition here if so this dot access data length more than zero have ADD equal to so anyway we will get single record only have ADD the similar way we can include for edit and delete also okay so once we have the values in our variable we can implement the functionality here so first let me take this update customer okay so here what I'm going to do let me checking like this so this dot have edit so we have the permission so here we can implement the edit functionality and the else scenario we have to inform to the user that you don't have the access okay so first let me inject the toast service here in our Constructor site so in this first scenario basically we will implement the functionality of feeding so in our case I am just going to provide one message only okay that's it let me save it so if I'm clicking I am getting this success message only because I am login using our admin credential right so let me log in using our techie account so again I am in the customer base so if I am trying to edit this one see you don't have access for the editor okay so the similar way I am going to include for other functionalities so the condition is have delete okay and the final one is ADD so the functionality point of view we have done now we can verify the things okay so let me log out first first we can check using our admin credential so admin don't have any restriction if I'm clicking add it is success so if I'm clicking edit that also success and delete that also I'm getting the success there is no more restriction and the second I am going to login using the user credential test user so the user can add this is success and edit that also success in the delete you don't have access for delete okay the user role the permission restricted for doing this delete operation so that actually we can confirm it from our service also see Let me refresh it okay for the customer menu the user can able to edit and add the delete is false that's what we are getting this message and the final one is take a user okay so this is their Tech user so this techie user basically don't have access for doing any of the actions okay so they take you user we can check the tech user in this customer menu they have only the add access okay first in this ad we are getting the success message it is fine and in this edit I am getting you don't have access for edit and finally the delete delete also it is saying you don't have access for delete okay so now let me change the permission here for that Tech user I'm going to change this ad also into false Let me refresh it see now you don't have access for create also it is completely blocked okay so as of now we have applied this role based access for edit delete and also this ad for the view we are not interplayed so that also we can implement so let me show the scenario here I am going to remove this record okay so that means the tech user don't have access for customer Mana so if I'm refreshing still I am able to access the customer menu okay for this scenario how we are going to manage so let me go to the code so in our component side so here we are setting this user information right you are Mark access okay and also once the role permission is centered then only be how to load our customer information okay so let me move the load customer also here online so you are not authorized to access and see the customer also datas are not loaded so I am in the home menu if I am going to the customer I'm getting the message like this okay and also I need to navigate into home page so that already we have done in some other areas so in our card we have implemented so let me take this router we can inject it here so in our constructive side okay so once you don't have access that's it so the message is saying you are not authorized to access once you are click the okay it is simply redirected into our home page okay so now we are almost in the end of the video so before going to close let me provide one more information so this role access data I have added statically so basically that also we can handle it from the weight cells maybe in my next video I am going to cover so my idea is I'm going to create the separate screen for that that screen should be accessed by only that menu user so there I am going to load all the user rules the user can choose the particular role and then menu should be loaded in the grid so in the grid I am going to provide three options like I have access have access for edit delete and add so for the each actions I am going to provide the checkbox so once the role is selected automatically also they can take the check boxes so once they click the best save button so that data should be replicated in our Rolexes object okay this is my concept maybe we can see in the next video still if you have any doubt sir 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: 17,957

Keywords: angular authentication, angular 15 authentication, angular 15 authentication using json server rest api, register screen implementation using json server, login implementation using json server api, angular 15 crud using reactive forms, angular 15 role based authentication, add edit view access based on role permission, handling edit access by role based access, handling delete access by role based permission, handling view access by role based access, nihira techiees

Id: C-iocY-v6mU

Length: 24min 56sec (1496 seconds)

Published: Mon Feb 13 2023