Как динамически добавить authguard на основе роли в Angular?

В моем приложении Angular пользователь-администратор создает других пользователей и роли.

При создании ролей администратор может добавлять к ним разрешения. к каким пунктам меню может получить доступ этот тип роли пользователя?

Сложность заключается в том, что мне нужно указать защиту авторизации для маршрутов.

Например ,

Тип роли супервизора может получить доступ — пункт меню 1 пункт меню 2 , пункт меню 4, пункт меню 5

Тип роли инженера может получить доступ — пункт меню 3, пункт меню 6

Все пункты меню являются отдельными модулями.

Когда инженер пытается получить доступ к пункту меню 1 через URL, он должен быть перенаправлен.

Пожалуйста помоги мне с этим . Мне подходит любой высокоуровневый подход. заранее спасибо

введите здесь описание изображения

введите здесь описание изображения


angular rbac auth-guard
person Anusha Krishnamurthy    schedule 06.07.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если вам нужен чистый способ управления разрешениями на основе ролей, я предлагаю вам использовать ngx-permissions.

npm i ngx-permissions

NgxPermissionsGuard реализует интерфейс CanLoad, и вы можете использовать его следующим образом.

 {
  path: 'lazy',
  data: {
   permissions: {
     only: 'SUPERVISOR',
   }
  },
  canLoad: [NgxPermissionsGuard],
  loadChildren: 'app/lazy-module/lazy-module.module#LazyModule'
},

если вы хотите предоставить доступ к чему-либо, кроме Supervisor, вы можете использовать кроме

data: {
   permissions: {
     except: 'SUPERVISOR',
   }
},

Оба варианта тоже возможны

 data: {
  permissions: {
    only: ['ADMIN', 'MODERATOR'],
    except: ['SUPERVISOR']
  }
}

Подробнее здесь

если вы не хотите использовать ngx-разрешение, вы можете создать службу

@Injectable()
export class AuthGuardService implements CanLoad {
 constructor(private router: Router) {}

 canLoad(route: Route): boolean {

 let url = route.path; //get url here, example menu1
 // get permissions array here from a service or localstorage
 if(permissions.indexOf(url) !== -1 ) { //means it exist
   return true
 }
 return false; 
 }
}

и добавьте его в свои 3 маршрута

 {path: "menu1", loadChildren:'./main/menu.module#Menu1Module', canLoad:[AuthGuardService]}
 ...
person Fateh Mohamed    schedule 06.07.2020
comment
Привет. Большое спасибо за ваш ответ. Мы определенно можем четко управлять разрешениями. Один момент, в котором я застрял, заключается в том, что при успешном входе в систему сервер отправит ответ ниже { username: 'harry', role: 'manager', permissions: ['menu 1','menu 2','menu 3'] // these are all side menu items } Роль является динамической, и мы не можем жестко кодировать данные (СУПЕРВАЙЗЕР), как показано ниже. data: { permissions: { only: 'SUPERVISOR', } } Администратор может даже создать роль с именем "МАКАНА" и назначить ей некоторые боковые меню. Не могли бы вы помочь мне, как я могу этого достичь? Еще раз спасибо :) - person Anusha Krishnamurthy; 06.07.2020