您將如何使用 Angular 2 管理用戶角色和權限

Question

我正在開發一個新的 Angular2 應用程序，我想知道您將如何管理某些角色可訪問的路由以及為某些角色創建、編輯和刪除項目的權限。

我想知道你如何解決這樣的問題：

• 您如何管理對某些 UI 元素的訪問？ 應用程序如何知道顯示或隱藏它？ 您為此使用單一服務嗎？ 或者您是否為應用程序中的不同位置創建了不同的條件？

• 你如何管理你的路由？ 你使用 CanActivate、CanActivateChild、CanLoad 等嗎？ 您是為所有路由構建單一的守衛服務還是為不同的模塊或組件構建不同的服務？

• 還有最后一個問題。 划分應用程序的最佳方法是什么，然后您可以像 CMS 一樣出售它？ 我的意思是我們如何實現從市場加載其他一些模塊的可能性，並將其添加到您的應用程序中？

你是如何解決類似問題的？

非常感謝任何指導、經驗或指向涵蓋這些主題的材料的指針。 提前致謝。

Answer 1

正如對您的問題的評論中所述，完整的答案超出了 SO 問題/答案的范圍，因此您可能會發現您的問題在不久的將來因此而結束，但這里有一些快速建議供您進一步探索你自己的：

• 在通過 http/https 登錄期間/之后從服務器獲取用戶的權限。 將這些權限存儲在對您的應用有意義的地方，可能是在服務中。 如果您使用 JWT，則可以在 JWT 令牌中返回權限。

• 為了簡化事情，只處理客戶端的權限。 角色用於服務器代碼確定用戶具有哪些權限。 無需將角色與客戶端權限混為一談。

• 使用授權守衛保護路由

• 使用 *ngIf 或 ngSwitch/*ngSwitchCase 保護單個 UI 元素

• 動態加載是一個很大的主題領域 - 去閱讀它 - 網上有很多資源。 但是，據我所知，雖然您可以延遲加載模塊，但應用程序必須在編譯時知道它們。 我可能弄錯了，但我不認為你可以在運行時加載任何你想要的東西。

Answer 2

所以我不得不在我制定的應用程序上實現這樣的東西，這就是我處理它的方式。

我創建了一個身份驗證服務，其中包含一個檢查用戶是否具有管理角色的方法：

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');
}

我創建了一個身份驗證警衛，如下所示：

守衛.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;
  }
}

守衛模塊.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方法並將其存儲在一個變量中，並使用它來確定是否需要顯示管理鏈接。

導航欄.component.ts

public isManager: boolean = false;

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

導航欄.component.html

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

我不得不從每種方法中刪除一些數據，但這將為您提供基本的想法。 希望這會有所幫助。

Answer 3

這個問題非常廣泛，我不認為您可以在此答案中輕松涵蓋它。 基本上有三樣東西附在它上面

• 路由
• 衛兵
• 模塊

你需要有一個單一的守衛模塊來檢查整個應用程序，所有的子路線都是守衛路線的孩子。 簡而言之，它將充當整個應用程序的全球衛士。 您的路由將被簡要介紹。 更多關於 守衛

現在談論模塊，您需要將所有內容拆分為通用模塊和特色模塊，然后重用這些模塊或獨立使用它們。 這將幫助您像 CMS 一樣銷售它。 更多關於模塊。

注意 - 這不是一個確切的答案，而是您問題的要點