Управление доступом на основе ролей в Angular2?

Ответ 1

В приложении Angular вы можете выполнить следующие действия: 1 - Убедитесь, что AuthGuard возвращает false, если пользователь не имеет права доступа к определенному компоненту. 2 - Скрыть пункты меню, которые пользователь не должен видеть.

Помните, что реальная авторизация, действующая на сервере, в angular2, вы просто используете уровень представления.

Вот один из возможных способов:

• Вы добавляете индивидуальные требования к токену JWT. Это может быть примерно так:

  { "пользователь": "JohnDoe", "роли": [ "admin", "manager", "whatever" ] }

• В приложении Angular вы создаете AuthService, где вы декодируете токен JWT и сохраняете извлеченное требование в переменной, а в localStorage

• Вы можете создать навигационную службу, которая будет хранить данные о меню и ролях, необходимых для доступа к определенному компоненту в объекте или массиве. Это может быть что-то вроде этого (псевдокод):

const menuItems = [
        {
            "name":"Dashboard",
            "routerLink":"/dashboard",
            "rolesRequired":["user"]
        },
        {
            "name":"ControlPanel",
            "routerLink":"/cp",
            "rolesRequired":["admin"]
        },
        .....  

    constructor(private authService:AuthService){}

    getMenu(){
        return this.menuItems.filter(
            element => {
              return 
              this.authService.user.role.haveElement(element.rolesRequired)
           }
    }

4. В компоненте меню вы можете использовать навигационную службу для извлечения списка разрешенных пунктов меню.

5. Вы можете использовать ту же навигационную службу в AuthGuard.

Ответ 2

Следующая ссылка может помочь:

• Средняя статья об аутентификации в Angular2 приложении

• Беспроблемная аутентификация в Angular2 приложении

Ответ 3

Вы можете использовать модуль Ng2Permission для управления доступом на основе роли и разрешений для ваших приложений angular 2.0.

Ответ 4

Существует также ngx-permissions библиотека ключевое различие этой библиотеки, что она удалит объект из DOM, а не скрывает его через css. Включите его в проект

@NgModule({

 imports: [
   NgxPermissionsModule.forRoot()
 ],

 })
 export class AppModule { }

Определить роль

NgxRolesService
 .addRole('ROLE_NAME', ['permissionNameA', 'permissionNameB'])

 NgxRolesService.addRole('Guest', () => {
     return this.sessionService.checkSession().toPromise();
  }); 

  NgxRolesService.addRole('Guest', () => {
      return true;
  }); 

Использовать в шаблоне

<div *ngxPermissionsOnly="['ADMIN', 'GUEST']">
  <div>You can see this text congrats</div>
</div>

Для лучшей документации см. wiki