Как правильно реализовать роли (angular 2)?

Question

[Ivan Stroykin]

Доброго времени суток,

Появилась необходимость в проекте сделать роли (пользователь, менеджер, админ и т.д.). Как наиболее правильнее и разумнее реализовать такую возможность?
Сейчас у меня есть сервис "AuthGuard" для проверки авторизации

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean>|boolean {
        if (this.authService.isLoggedIn()) {
            return true;
        } else {
            this.router.navigate(['/login']);
            return false;
        }
    }

На backend прописаны все роли (для точной проверки на стороне сервера). Логичнее всего при инициализации приложения делать запрос к бэку, чтобы получить весь список и далее работать с ним. Дабы не было хардкода.
Но вот когда лучше выполнить запрос, где всё это лучше хранить и как лучше обрабатывать хотелось бы уточнить у опытных

К некоторым страницам не должно быть доступа вообще. На некоторые же страницы доступ у некоторых ролей есть, но нету доступа к определенным компонентам на этих страницах.

Answer 1

[Ivan Stroykin]

Может кому пригодится

routing

...
{path: '', component: Test1Component, canActivate: [AuthGuard], canActivateChild: [AuthGuard], 
    children: [
        {path: 'test2', component: Test2Component, data: {title: 'Тест 2', roles: ['admin', 'user']}},
        {path: 'test3', component: Test3Component, data: {title: 'Тест 3', roles: ['admin']}},
        {path: 'test4', component: Test4Component, data: {title: 'Тест 4'}},
    ]
},
...

auth-guard

...
// canActivate единожды проверяет авторизован или нет

canActivateChild(route: ActivatedRouteSnapshot): Promise<boolean>|boolean {
    let myRole = 'user'; // Получаем роль при инициализации приложения запросом на backend либо по своему усмотрению

    let roles = route.data['roles'] as Array<string>;
    if (!roles || roles.indexOf(myRole) != -1) return true;
   else {
        this.router.navigate(['']);
        return false;
    }
}
...

Теперь, не задано roles в data, то доступ имеют все авторизованные (потому что стоит canActivate),
если roles в data заданы, то доступ будут иметь только те роли, которые перечислены, остальные будут перенаправляться на указанную страницу (в моем прмиере - на главную)

Answer 2

[TekVanDo]

Реализую доступ на основе ui-роутера при заходе на страницу проверяется права доступа к ней. В качестве имплантации могу посоветовать https://github.com/Narzerus/angular-permission

Comments

[Ivan Stroykin]

Я правильно понял из wiki, что это для angular 1.4.8+ ?)

[TekVanDo]

да извиняюсь, не увидел что нужно для 2ой версии

[Ivan Stroykin]

TekVanDo: Нет, это не вы не заметили, это я только что дописал. Просто ранее были 2 тэга "Angular 1" и "Angular 2", а теперь просто "Angular", поэтому по привычке не написал

[TekVanDo]

Иван Стройкин: Бегло посмотрел имплантации под второй не нашел, но концептуальным вдохновителем я думаю angular-permission вполне может стать.

[Ivan Stroykin]

TekVanDo: спасибо, сейчас посмотрю что из себя представляет