Question

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

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

如何管理对某些UI元素的访问？应用程序如何知道显示或隐藏它？你为此使用单一服务吗？或者您是否为应用中的不同位置创建了不同的条件？
您如何管理路由？你使用CanActivate，CanActivateChild，CanLoad等吗？您是为所有路由构建单一保护服务还是为不同模块或组件提供不同服务？
最后一个问题。分割应用程序的最佳方法是什么，然后你可以像CMS一样出售它？我的意思是我们如何才能实现从市场上加载其他模块的可能性，并将其添加到您的应用程序中？

你如何解决类似的问题？

非常感谢任何有关这些主题的材料的指导，经验或指示。提前谢谢。

Answer 1

正如您对问题的评论所述，完整的答案超出了SO问题/答案的范围，因此您可能会在不久的将来因为某个原因而关闭您的问题，但这里有一些快速的建议供您参考进一步探索：

通过http / https登录/登录期间从服务器获取用户的权限。将这些权限存储在对您的应用有意义的地方，可能在服务中。如果您使用的是JWT，则可以在JWT令牌中返回权限。
为简化起见，只处理客户端的权限。角色是服务器代码，用于确定用户拥有的权限。无需通过将角色与客户端上的权限相关联来解决问题。
使用身份验证警卫保护路线
使用* 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

这个问题相当广泛，我不能在这个答案中轻易地介绍它。它基本上附有三件事

路由
卫兵
模块

您需要使用单一防护模块来检查整个应用程序，并且所有子路由都将成为防护路线的子级。简而言之，它将成为您整个应用程序的全球守护者。您的路由将简短介绍。更多关于Guards

现在谈论模块，您需要将所有模块拆分为通用模块和特色模块，然后重复使用模块或单独使用模块。这有助于您像CMS一样销售它。更多关于Modules。

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

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

3 个答案: