アルパカログ

Webエンジニア兼マネージャーがプログラミングやマネジメント、読んだ本のまとめを中心に書いてます。

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

f:id:otoyo0122:20200906214534p:plain:w300

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に追加するのをお忘れなく。

以上です。

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

参考になった方は、ぜひ「はてブ」やSNSでシェアしていただけると嬉しいです。