Ngx-permissions Tutorial #2 - Loading permissions into application

hi i'm alex and today we'll be talking about how you can load permissions into your application specifically using app initializer using guard or in main component to understand the difference between this strategy we divide the application lifecycle with two milestone the application is bootstrapped and the guard checks user access if we are talking about app initializer first you will load permissions then the application will be bootstrapped and then the guard will check user access if you are talking about guard first the application will be bootstrapped then you will load permissions and then the guard will check user access if you are talking about component first application will be strapped then the guard will check user access and then permissions will be loaded if you want to use ngx permission guard or your custom guard you need to preload data to preload data you use app initializer or guard you cannot use component because there will be no data so let's jump into the code so first i need to create application on which i can show you the difference between different strategies as the application will be very simple it will have only two components home and about it will have a small rooting system and it will have a service that actually makes a call so as always this is basic uh angular project that was generated within galaxy ally and the difference that i will run it on 5000 part and also that i've already installed the library so let's jump with generating so first we will generate two components about component and the second one and we will generate a home component so first we need component home component after this uh we will import everything that we need we need http client module because we will actually make call and we need njx permissions module because obviously we need it and we need routine system so let's create routine we need to create generate module we'll call with a paper routine and i don't like it here i want it to be in the root of the application and in a paper routine module we will say that it imports router module with fruit and we will pass roots and here we will define roots with the type of roots so we need a basic root that will have two children the [Music] about page with a component about component and we will need home with a component home component so without need declaration we need also exports this router module and now we will import it in app module so here and also we will need to specify that we can actually use it wrote and so with directive router outlet also we don't need this one and with resources we will just move it to the let's say to the home component home component and in about we will just make it a little bit beautiful we'll say that this is one we will say this is about component so let's check what we have so here we are on 5000 and we are on the home component and it's okay and now we will go to about so yeah this works and the last two things that we need is to create a service that will make calls so we will call it load permission service and in load permission service come on we will have http to make a call so we need http client we will say public load permissions method that will return this get we're making a call and here i will just take this jsonplaceholder we just need that it's successful so here we'll pass this json placeholder placeholder and i will make it a promise because we don't need to actually hear observable but if you want you can use observable and i will return developer permission right and here will be developer also i will create small methods it's a delay to simulate like when the service is not returning very fast but when for example it will take him three seconds so what we will do we will return new promise that will resolve in three seconds and here just just stop we will say return this delay and we will turn this one and i will comment but because we will need it just later and what else we need we need uh to protect roots so this is the difference so in hot say that everything this will be available only to the user who has developer permission and i will copy everything this one here here and routine we will say that about you can only view if you have connectivity if you have this developer permission oh can activate andrix permissions guard and here we need to pass data that will actually be permissions that will only and here will probably say developer so this about will be only activated if the user has developer so here in home we don't see everything and we should not be able to go to about page and we cannot go to about page so now we need to load them so let's start so let's load permissions with app initializer the first thing that you do you navigate to module ts and in providers you will provide this app initializer so here we will pass object provide app initializer here we need to pass factory that will return a promise so here we'll say use factory load permission yeah we'll just say permissions factor transfactory we need two dependencies that we will pass into permissions factory it will be load permissions service support permission service and ndx permission service and we will need to say that is multi true so let's implement this permissions factory so it will be export function permissions factory and in permissions factory it will take this load permissions service type node permission service and the second will be objects permission service [Music] and we need to return boolean so we will return a premise so here we will say this return this allowed permission server yes without this allowed permission service load permissions and then njx permission service allowed permissions and here we will pass data from here to here and return through just just in case so let's check so as you can see now this application has permission so we can see home and you can go to about page everything works um let's come back and i want to show you how it will behave if the request is actually long so we come here in load permissions and we uncomment this delay method and command this and that's here and this is what user actually application is bootstrapping so it's wait three seconds because before bootstrap and if we go to home you will see the same three seconds the like improvement that we can do is actually go into index html and here just to say to the user that it's loading is loading so now at least he sees it it's loading so it takes three seconds to do it so this is the first one so the second approach is using guard first we need to generate guard we go to angular schematics and here we'll find guard and we will call it oust outguard okay it's generated and now we navigate to asgard and in our guard we need to have a constructor because we will make a call so here we'll have lot permissions service and we will need ngx permission service jigs permissions service jigs permission service and in connectivity we will return this blood permission service we are loading permissions and in then we will pass data we'll say is this injects permission service load permissions data and we need to return true so it will work after that we navigate to approaching module ts and here this root pass we will say that you can activate only with osguard let's use application so as you can see like home page we have permissions and if we navigate to about page we also see the permissions so everything works now let's simulate loan request so we navigate to postcard and here we'll go to load permissions and let's simulate that it's three second request what the user will see as you can see so the difference is the application is bootstrapped and in three seconds the component activated and we go to the home component it will be the same like this will see at least something and then he will see all other information now let's see the last approach just loading so i will reset everything and the last approach is to load permissions in your app component yes so we navigate to app components and here we will need only need and we will need constructor so in constructor we will just pass to services this is load permissions service [Music] load permission service and ndx permission service [Music] and in ngnit we will say that this load permission server we just load we will load it into the energy experimentation service please load permissions here is not a here is data so this is the simplest one but now if i navigate to the application and if we navigate to the home like you will see it will load but the problem with about page you cannot navigate to about page because the guard runs before the permissions is loaded let's just show you and if we simulate with delhi this is how it will be looked so this is user when he navigates to the home he will see like with the card and then in three seconds he will see the data but again he cannot navigate to about page because it runs before and that's it thank you very much for watching this video if you like it please like and subscribe and i also want to say big thank you to these people for supporting me thank you very much and if you have a chance to support me please support me on patreon have a great day

Channel: Alex Khymenko

Views: 265

Keywords:

Id: 7FyU9McnLSA

Length: 15min 22sec (922 seconds)

Published: Fri Oct 15 2021