AngularJS ユーザーの権限によって表示を切り替える方法

AngularJSで、ユーザーの権限によって表示を切り替えるという認可っぽいことをしたいケースがあります。

「認可っぽいこと」と言っているのは、データは取得できてしまうものの、非表示にすることでそれらしく見せているためです。

ですので、この方法は厳密にユーザーに見せてはいけないデータがあるケースでは使用しないでください。

このエントリでは、AngularJSでユーザーの権限によって表示を切り替える方法を説明します。

説明

AngularJSにはStructural Directives(構造ディレクティブ)というものがあります。

Angular 日本語ドキュメンテーション

Structural Directivesは *ngIf は *ngFor のように、DOM構造自体に影響を及ぼしたいときに使います。

例としてauthorizedディレクティブを作成し、'resource/verb'のパスを渡すことを想定します。使い方は次のような形です。

<div *appAuthorized="'user/show'">
  ...
</div>

プリフィクスとして app をつける慣習です。

ディレクティブをスケルトンから作成します。

ng g directive authorized

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appAuthorized]'
})
export class AuthorizedDirective {
  private hasView = false;

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef) { }

  /**
   * @param path 'resource/verb'
   */
  @Input() set appAuthorized(path: string) {
    const isAuthorized = this.authorized(path);
    
    if (isAuthorized && !this.hasView) {
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.hasView = true;
    } else if (!isAuthorized && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }

  private authorized(path: string): boolean {
    // Check authorization
  }
}

authorized()に、現在のユーザーの認可をチェックする処理を実装してください。

実装したら、AppModuleのdeclarationsに追加するのをお忘れなく。

以上です。

このエントリでは、AngularJSでユーザーの権限によって表示を切り替える方法を説明しました。

説明

コメントを送る