Angular 6 或更高版本中基于用户动态权限的访问路由

Question

I have applied role based authorization on user which is logged in. The JWT token is getting stored in localStorage and routes getting access based on Login and auth.guard.ts.

But in addition to this certain user need to access some components which others with the same role don't. A json array is defining which routes user can access even after login.

What I have defined to get this done is check on ngOnInit of the component. If the component is present in the array, it should be allowed to access other 404 page has to be displayed.

But seems like I am not finding this way as an effective way to do so.

Please suggest any improvisation I can do with illustration. Would like to do everything do be done in right way.

Answer 1

You can Role validation to a specific route:

const routes: Routes = [
    {   //todo route you want to add validation for
        path: 'route',
        component: Component,
        canActivate: [AuthGuard],
        data: { roles: ["Admin"] } //recommend you dont use string here.
    },
    { path: '**', redirectTo: '' }
];

And then just add these lines to your existing canActivate funciton:

    let currentUser = User;
    if (route.data.roles && route.data.roles.indexOf(currentUser.role) === -1) {
        // role not authorised so redirect to home page
        this.router.navigate(['/']);
        return false;
    }

Read the docs here .

EDIT:

I recommend you use role routes as its easier to maintain and more consisted however you can just add something like this to your canActivate function:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
     let stateName: string = state.url.replace("/", "");
     let currentUser = User;
     if (currentUser.routePermissions.includes(stateName)) {
         // route not authorised so redirect to home page
         this.router.navigate(['/']);
         return false;
     }
}

Instead of an array maybe use a route object like and just match on actual false match.

user.routePermissions = {
    'route1': false
}

this will make it easier to maintain as you won't need to update all your users for a new route added.

Answer 2

I suggest that you use ngx-permissions , check this . it works perfectly to give access based on roles in your template or routes, you can load your permissions for each user just after authentication

this.permissionsService.loadPermissions(perm);

and then there you can use the everywhere canActivate , canLoad to manage access

 const appRoutes: Routes = [
 {
  path: 'lazy',
   data: {
    permissions: {
     except: 'ADDDMIN',
    }
  },
  canLoad: [NgxPermissionsGuard],
  loadChildren: 'app/lazy-module/lazy-module.module#LazyModule'
},
];

@NgModule({
 imports: [
  RouterModule.forRoot(appRoutes)
 ],
 exports: [
   RouterModule
 ],
 providers: [
  // CanDeactivateGuard
 ]
})
export class AppRoutingModule {}

Answer 3

you need to create different-different Module according to role based authorization on user and each Molude have one base routing file is there you need to check this module authorized according to user or not with use AuthGuard in routing.