Angular 6 Role Based Authentication

Question

У меня есть 5 модулей в моем проекте.ролл доступ к этим модулям в создании, обновлении, удалении и просмотре доступа на основе рулонов.

Как я создаю пользовательский интерфейс в angular 6, и мне нужна роль при входе пользователя в приложение и установке роли в общем сервисе.например, администратор ролл доступ ко всем службам и роль сотрудника только просматривать список, а не доступ для создания и удаления.Я новичок в поступлении в угловой.

Пожалуйста, помогите мне любые коды или примеры в проверке подлинности на основе ролла

Answer 1

Любым способом, которым вы собираетесь дать определенную кнопку для создания, обновления, удаления и просмотра после создания кнопки, вы собираетесь включить или отключить кнопку программно корректно. Если это ваша потребность, выполните следующие шаги

кнопка создания с опцией [отключено], например,

<button text="click" [disabled]="isAuthorised">Create</button>

<button text="click" [disabled]="isAuthorised">Delete</button>

Здесь isAuthorised - это переменная, которая в машинописном тексте делает переменную логической (истина / ложь) в зависимости от роли пользователя. она включает или отключает кнопкусоответственно

Answer 2

Существует так много разных подходов, которые вы можете использовать, но основная идея заключается в ограничении маршрутов на основе определенного условия с помощью route-guards.

в вашем случае вы можете иметь маршруты, которые будут загружать ваши модули лениво, когда route-guard разрешит использовать его и последующие вложенные маршруты будут загружены таким же образом.

Определите свой маршрутный модуль

{
   path:'/dashboard',
   loadChildren: './lazy.module#LazyModule'
   canActivate:[ModuleRouteGuard],
   data: {
      accessRoles: ['Manager','HR']
   }
}

LazyModule_Routes.ts

{
   path:'/board',
   component: ManagerBoard
   canActivate:[ChildRouteGuard],
   data: {
      accessRoles: ['Manager']
   },
   resolve: {
      userRoles: 'userRolesResolver'  //use this resolver service to get data inside component so to decide if user can read/write . OR you can also use activatedRoutes data
   }
}

Route-Gaurd.ts

@Injectable()
class ModuleRouteGuard implements CanActivate { (1)
  constructor(private userService: UserService) {}; (2)

  canActivate() {
    console.log("OnlyLoggedInUsers");
    if (this.userService.isLoggedIn()) { (3)
      return true;
    } else {
      window.alert("You don't have permission to view this page"); (4)
      return false;
    }
  }
}

распознаватель вашего приложения, который переносит роли пользователей с сервера.

@Injectable()
class UserRolesResolver implements Resolve<Team> {
  constructor(private backend: Backend) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any>|Promise<any>|any {
    //return this.backend.fetchTeam(route.params.id);
  }
}

Answer 3

Вы можете создать другой компонент и сделать его условно. Рассмотрим ваш пример. Для этого я создаю 2 компонента 1. просмотр компонента 2. Создайте компонент.

хотелось бы рассмотреть коды

<div>
   <button *ngIf="usertype!=='employeee">Delete</button> <!--show delete button if user is not employee-->
   <create *ngIf="usertype!=='employeee"></create> <!-- Show create component if usertype is not emplyee -->
   <view [data]="data"></view> <!-- view for all type of user-->
</div>