您将如何使用Angular 2管理用户角色和权限

Question

我正在开发一个新的Angular2应用程序,我想知道如何管理某些角色可访问的路由以及为某些角色创建,编辑和删除项目的权限.

我想知道你是如何解决这个问题的:

• 如何管理对某些UI元素的访问？应用程序如何知道显示或隐藏它？你为此使用单一服务吗？或者您是否为应用中的不同位置创建了不同的条件？

• 你如何管理你的路由？你使用CanActivate,CanActivateChild,CanLoad等吗？您是为所有路由构建单一保护服务还是为不同模块或组件提供不同服务？

• 最后一个问题.分割应用程序的最佳方法是什么,然后你可以像CMS一样出售它？我的意思是我们如何才能实现从市场上加载其他模块的可能性,并将其添加到您的应用程序中？

你如何解决类似的问题？

我们非常感谢任何有关这些主题的材料的指导,经验或指示.提前致谢.

Answer 1

正如您对问题的评论中所提到的,完整的答案超出了SO问题/答案的范围,因此您可能会在不久的将来因为这个原因而关闭您的问题,但这里有一些快速建议供您进一步探讨你自己:

• 通过http/https在登录期间/之后从服务器获取用户的权限.将这些权限存储在对您的应用有意义的地方,可能在服务中.如果您使用的是JWT,则可以在JWT令牌中返回权限.

• 为简化起见,只处理客户端的权限.角色是服务器代码,用于确定用户拥有的权限.无需通过将角色与客户端上的权限混淆来解决问题.

• 用auth警卫保护路线

• 使用*ngIf或ngSwitch/*ngSwitchCase保护单个UI元素

• 动态加载是一个很大的主题领域 - 去了解它 - 网上的大量资源.但是,据我所知,虽然您可以懒惰地加载模块,但它们必须在编译时为应用程序所知.我可能弄错了,但我不认为你可以在运行时加载任何你想要的东西.

Answer 2

所以我必须在我编写的应用程序上实现类似的东西,这就是我处理它的方式.

我创建了一个auth服务,其中包含一个检查用户是否具有管理角色的方法:

auth.service.ts

public isManager(): boolean {
    let isManager = false;
    let user = this.getUserToken();
    //Stored my allowed groups in a config file, comma separated string
    let allowedGroups = AuthenticationParams.filters.split(',');
    let userGroups: any;
    if (user !== null && user !== undefined) {
      try {
        let userGroups: any = user.role;
        if (userGroups !== undefined && userGroups !== null && userGroups.length > 0) {
          try {
            userGroups.forEach((e: any) => {
              if (allowedGroups.indexOf(e) > -1) {
                isManager = true;
              }
            });
          } catch (e) {
            if (allowedGroups.indexOf(userGroups) > -1) {
              isManager = true;
            }
          }
        }
      } catch (e) {
        isManager = false;
      }
    }
    return isManager;
}

public getUserToken(): any {
    return localStorage.getItem('jwtTokenName');
}

我创建了一个auth guard如下:

guard.component.ts

import { Injectable, OnInit } from '@angular/core';
import { CanActivate, CanActivateChild } from '@angular/router';
import { Router } from '@angular/router'; 
import { AuthenticationService } from '../services/helper/security/auth.service';

@Injectable()
export class GuardComponent implements CanActivate {

  constructor(private authenticationService: AuthenticationService, private _router: Router) {
  }

  canActivate() {
    let isManager: boolean = this.authenticationService.isManager();
    if (!isManager) {
      this._router.navigate(['unauthorized']);
    }
    return isManager;
  }
}

guard.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GuardComponent } from './guard.component';

@NgModule({
  declarations: [],
  imports: [ CommonModule ],
  exports: [],
  providers: [ GuardComponent ],
})
export class GuardModule { }

然后我使用后卫来处理导航到管理部分的路线

APP-routing.module.ts

{ path: 'management', component: AdminComponent, canActivate: [GuardComponent] }

在我的导航栏上,我只需调用该isManager方法并将其存储在变量上,并使用它来确定是否需要显示管理链接.

navbar.component.ts

public isManager: boolean = false;

ngOnInit(): void {
    this.isManager = this.authenticationService.isManager();
}

navbar.component.html

<li [routerLinkActive]="['active']" *ngIf="isManager"><a [routerLink]="['management']">Management Portal</a></li>

我必须从每个方法中删除一些数据,但这将为您提供基本的想法.希望这会有所帮助.

Answer 3

这个问题相当广泛,我不能在这个答案中轻易覆盖它.它基本上附有三件事

• 路由
• 逆天
• 模块

您需要具有单个防护模块,该模块将检查整个应用程序,并且所有子路径将是防护路线的子级.简而言之,它将成为您整个应用程序的全球守护者.您的路由将简短介绍.更多关于卫兵

现在谈论模块,您需要将所有模块拆分为通用模块和特色模块,并重用模块或单独使用它们.这有助于您像CMS一样销售它.更多关于模块.

注意 - 这不是一个确切的答案,而是您问题的要点