VueXで機能の制限をする

VueJS

暫定的に

権限の形

API経由でユーザーの機能権限を取得し、配列に詰めてVueXで管理する。

const features = ['機能1', '機能2']

Utilに定義

isEnabledFeature (features, name) {
  if (features) {
    return features(name)
  }
  return false
}

NuxtJSでグローバル関数を作る時は、pluginsを使用し、injectする。
NuxtJS plugins

呼び出し

computedの呼び出し

callEnabled () {
  const features = this.$store.getters['User/features']
  return this.$Util.isEnabledFeature(features, '機能1')
},

※権限変更が多い場合(this.$store.getters['User/features'])、computedの動作がスムーズにいくかは試していない。もし動かない場合は、配列のlengthでwatchするなどありそう。