How can I allow routes to users based on module condition?

Question

I know the usage of Auth guard in Angular and I am just a beginner in angular I just made a basic authentication based on read write access that includes roles like isAdmin or Isguest

But now I want that particular user must be able to access only some routes

Like I have three modules

A component
B component
C component

And all the above components may be child or may not be child routes.

I want that harry user can access to module A and B

Jackson can access to module B and C

Michel can access module A only

So how to architect such type of mechanism in Angular?

Actually I know Auth guard but how can I organise the data like in database to add list of components or something etc etc?

What conditions must I need to add in canActivate ?

A solution by which I need to handle less and be dynamic if tommorrow a new component comes and I need to access grants.

Any great ideas are welcomed...!!

Hi @enno.void exactly I am looking for like how to organise the data in database may be I need to add the list of components which user can access the what must be the condition inside canActivate? I am looking for a reliable solution as if tomorrow if any other component comes I need to do less handling for granting access :) — kushal Baldev, Jul 31 '20 at 15:56

score 1 · Answer 1 · answered Jul 31 '20 at 15:40

1

You will need to create an Auth Guard which will look like the following:

@Injectable()
    export class MyGuard implements CanActivate {
      constructor(private _myUserService: MyUserService) {}
    
      canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        if(//ADD CONDITION HERE)
            return true;
        return false;
      }
    }

and then in your routes you will have something like:

{
    path: 'XXX',
    component: XXXComponent,
    canActivate: [MyGuard],
}

answered Jul 31 '20 at 15:40

Yhlas

411
3
5
17

Ya this is know but how can I organise the in condition like in database I need to put the fields like A user document and fields like can access module A B C something like that I am looking for the exact answers and exact conditions if you can put some more effort in this it would be great..!! – kushal Baldev Jul 31 '20 at 15:53

score 1 · Accepted Answer · answered Jul 31 '20 at 16:24

1

You can add permission for each route and store the permissions required for each user.

const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: () => import('./dashboard/dashboard.module').then(mod => mod.DashboardModule),
    canActivate: [ Guard ],
    data: { permission: 'view dashboard' }
  }

and inside canActivate() you can check if the permission is present in user data.

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  if(!route.data || (route.data && this.user.permissions.find(route.data.permission))) {
    return true;
  }
}

answered Jul 31 '20 at 16:24

Vna

532
6
19

Thnaks for the answer so you mean to say that in the routes I just need to add like permission property data: { permission: 'view dashboard' } and say in the user class or interface I just need to main list of permission like if the permission list contains 'view dashboard' I mean the list is of string type then is allowed to access did I understood perfect...? – kushal Baldev Jul 31 '20 at 16:39
Ok thanks this seems to be most promising will try and let you know and but for child routes how we can do? And by the way I am using angular version 10 so you can also suggest me if there are any syntax change before I try your solution :) – kushal Baldev Jul 31 '20 at 17:51
For child routes also you can handle it the same way. I have tried this in version 8 but should be working for 10 also – Vna Aug 03 '20 at 07:53
Sure seems this answer to be most promising for know I will approve it as I dont think any other way would be effective than this :) thanks..!! – kushal Baldev Aug 03 '20 at 21:26

How can I allow routes to users based on module condition?

2 Answers2