アルパカログ

プログラミングとエンジニアリングマネジメントがメインです。時々エモいのも書きます。

【AngularJS】権限によって表示/非表示を切り替える認可っぽいことをする

AngularJSで権限によって表示したり非表示にしたりといった認可っぽいことをする方法を説明します。

「認可っぽいこと」と言っているのは、データは取得できてしまうものの、非表示にすることでそれらしく見せているためです。ですのでこの方法は、厳密にユーザーに見せてはいけないデータがあるケースでは使用しないでください。

説明

AngularJSにはStructural Directives(構造ディレクティブ)というものがあります。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()に、現在のユーザーの認可をチェックする処理を実装してください。

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