Question 175524 in Javascript Question posted in
A very good W3school tutorial can be found here.

How can user access control logic be implemented in a lazy-loaded Angular Monorepo app w/o placing it in the parent app?

We are working on an angular application. I am using Angular monorepo to have a parent application and some children applications.(the app folder contains the parent application and projects contains the children applications)

I am using parent application for creating routes and load children application on various routes. I am able to do this by using lazy loading int the following way:

{
path: ‘project1’,
loadChildren: () => import(‘../../projects/project1/src/app/app.module’).then(m => m.AppModule),
}

Everything is working find and as expected but there is one requirement where we are stuck

We want to achieve an ability to make sure if logged-in user has access to the particular route before loading the application. Interestingly We do not want to keep that logic in parent application. That means we cannot call backend or keep any logic which filters the user access and tells if user has access to that router.

The requirement is put in a logic in such a way that the application which needs to be loaded on a particular rout should itself tell if the user has access to the application or not.

We are exploring in the direction to have two applications for single router, load the first light version app which will check the access and if ok load the actual app. But we are stuck in the implementation.

The main requirement is to NOT out the logic of decision making in the parent application.

This is not a very common case but any solution would be really apricated.

We tried loading a light version of app on the route which makes the decision and then load the second main app. But we are not able to achieve the app switching.

Tags:

2

Answers


  1. 0

    Sounds like you want is guards in the main (what you call app) part of the application: https://angular.io/guide/router#preventing-unauthorized-access

    { 
  path: 'project1', 
  loadChildren: () => import('../../projects/project1/src/app/app.module').then(m => m.AppModule), 
  canActivate: [Project1Guard]
}

    In your guard you can check if the user has permission (from whatever you keep user data in) and return true if they have, or false (with a redirect) if they don’t

    Login or Signup to reply.
  2. 0

    Your approach is quite contradictory in itself. If we rephrase it a little bit we get: "I want to run a method from my child module without loading it first". If you look at it this way, you’ll see that it doesn’t make much sense. I think it may be an example of a XY Problem, so it would be a good idea to rethink what the ACTUAL problem is and ask about solution of THAT problem instead. That aside:

    I assume you don’t want to load the whole "child" module since it’s "big".

    What you could do as a workaround is to create a "wrapper" modules with the Guards in themselves, e.g.

    - Parent
  - ChildWrapper 1
    - Child 1
  - ChildWrapper 2
    - Child 2

    etc.

    Your parent would lazy load the wrapper. The wrapper itself would be lightweight, containing only logic relevant to whether it could lazily load a "real" child module. And if not, it would redirect the user to the parent module, preferably some "Access denied" route. Have in mind, it still feels absolutely wrong and makes no sense at all, but it achieves what you’re asking for (i.e. not having Guard logic in the parent).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search