web-dev-qa-db-ja.com

Angular 2を使用して、ユーザーのロールと権限をどのように管理しますか

私は新しいAngular2アプリに取り組んでおり、特定の役割のアイテムを作成、編集、削除するために、特定の役割とアクセス許可にアクセス可能なルートをどのように管理するのか疑問に思っていました。

私はこのような問題をどのように解決するのか知りたいです：

  • 一部のUI要素へのアクセスをどのように管理しますか？アプリはどのように表示または非表示を知っていますか？これには単一のサービスを使用しますか？または、アプリのさまざまな場所にさまざまな条件を作成しますか？

  • ルーティングをどのように管理しますか？ CanActivate、CanActivateChild、CanLoadなどを使用していますか？すべてのルートに対して単一のガードサービスを構築しますか、またはモジュールやコンポーネントごとに異なるサービスを作成しますか？

  • そして最後の質問。アプリを分割してCMSのように販売するための最良の方法は何ですか？たとえば、市場から他のモジュールを読み込んでアプリに追加する可能性をどのように実現できるのでしょうか？

同様の問題をどのように解決しますか？

これらのトピックをカバーする資料へのガイダンス、経験、または指針は大歓迎です。前もって感謝します。

angularpermissionsuser-roles
21
Roman Skydan

質問へのコメントで述べたように、完全な回答はSO質問/回答の範囲を超えているため、その理由で近い将来質問が閉じられる可能性がありますが、自分でさらに探求するためのいくつかの簡単な提案：

  • Http/https経由でログイン中/ログイン後にサーバーからユーザーのアクセス許可を取得します。これらの権限は、おそらくサービス内など、アプリにとって意味のある場所に保存してください。 JWTを使用している場合、JWTトークンでアクセス許可を返すことができます。

  • 物事を簡素化するために、クライアントの権限のみを扱います。役割は、サーバーコードがユーザーが持っている権限を把握するためのものです。ロールをクライアントのアクセス許可と混同することで物事を台無しにする必要はありません。

  • 認証ガードでルートを保護する

  • * ngIfまたはngSwitch/* ngSwitchCaseで個々のUI要素を保護する

  • 動的ローディングは大きなトピック領域です-それについて読んでください-ウェブ上の多くのリソース。ただし、私が知る限り、モジュールを遅延ロードすることはできますが、コンパイル時にアプリケーションに認識される必要があります。間違っているかもしれませんが、実行時に必要なものだけをロードできるとは思いません。

19
GreyBeardedGeek

だから、私は自分が試したアプリケーションにこのようなものを実装しなければなりませんでした、これが私がそれを処理した方法です。

認証サービスを作成しました。これには、ユーザーが管理ロールを持っていることを確認するメソッドが含まれていました。

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

次のように認証ガードを作成しました。

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>

各メソッドからいくつかのデータを削除する必要がありましたが、これにより基本的なアイデアが得られます。これがお役に立てば幸いです。

7
Wesley Coetzee

この質問は非常に広範であり、この回答で簡単に説明できるものではありません。基本的に3つのものが添付されています

  • ルーティング
  • 警備員
  • モジュール

アプリ全体をチェックする単一のガードモジュールが必要であり、すべてのサブルートはガードルートの子になります。要するに、それはあなたのアプリケーション全体に対するグローバルなガードのように振る舞います。そして、あなたのルーティングは要するにカバーされます。 Guards の詳細

そして今、モジュールについて話して、すべてを共通モジュールと機能モジュールに分割し、モジュールを再利用するか、単独で使用する必要があります。これにより、CMSのように販売できます。 Modules の詳細.

注-これは正確な答えではなく、問題の要点です

6
Rahul Singh