Vue ベースの要素ボタン権限実装ソリューション

背景要件: ERP システムに「ボタン権限制御」機能を追加する必要があり、権限の制御粒度をボタンレベルまで拡張する必要があります。

期待される

ボタンの権限制御には、「非表示」と「表示されるがクリックできない」の 2 つの対話型モードがあります。

見えない

非表示のインタラクション方法は比較的簡単です。v-if を使用して、表示するかどうかを制御できます。 v-show を使用することもできますが、安全性が十分ではありません。結局のところ、v-show はスタイルを display: none に変更するだけで、実際の DOM レンダリングには依然として存在するため、非表示を制御するには v-if を使用することをお勧めします。

表示されているがクリックできない

「見えるけど、見えない。」

スタイルコントロール (無効なスタイルを追加する必要があります)、たとえば、カーソル: 許可しない、グレー表示など。
クリックできない、つまりクリックイベントを無効にしたりブロックしたりするには、preventDefault/stopProgration でこれを実現できるようです。

最終的な製品要件では、「表示されるがクリックできない」が選択されましたが、これはおそらく、非表示では単純すぎると考えられたためでしょう。 (¬_¬)

アイデアの探索

ボタンクリックイベントのコールバック関数にラッパー関数を追加して、その権限を制御し、イベントをインターセプトしてトリガーします。これは、高階コンポーネントに少し似たプロキシを作成するようなものです (ただし、既存のビジネスが大きく変更され、各 @click バインディング関数を 1 つずつ変更する必要があるため、このソリューションは放棄されます)。
ボタンクリックイベントがバブリングしてトリガーされるのを防ぐには、preventDefautl/stopProgration を使用できるようです。イベントは、命令の形式で DOM 要素上で監視できるようです。許可されている場合はイベントが正常に実行され、そうでない場合はブロックされます。

練習計画

最終的に、既存のビジネスコードロジックの変更を避けながら、コストを最小限に抑えて拡張できる指示方法を選択しました。
権限制御のためにクリックハイジャックが必要な要素:

エルボタン
btn-wrapper (自己カプセル化コンポーネント)
div/span/aなどのタグ

具体的な実施計画については以下をご覧ください。

権限エントリ: Vuex コントロール、グローバル使用

//ユーザーがログインしたら、ユーザーの権限CODEコードを取得し、ストアに保存します
this.$store.commit('SET_AUTH_CODE', authCodeList);

SET_AUTH_CODE: (状態、acthCode) => {
 if (acthコード) {
   状態.autoCodeList = acthCode;
 }
 ストアを設定する({
  名前: 'autoCodeList',
  コンテンツ: state.autoCodeList || [],
 });
}

権限指示の定義

constdisableClickFn = (イベント) => {
  イベント && event.stopImmediatePropagation();
}

エクスポートconsthasPermission = () => {
  Vue.directive('permission', {
    bind(el, バインディング) {
      無効化 = true にします。
      autoCodeList.length と autoCodeList.includes(binding.value) の場合 {
        無効 = false;
      }

      （無効）の場合{
        el.classList.add('権限が無効');
        el.setAttribute('無効', '無効');
        el.addEventListener('click', disabledClickFn, true);
      }
    },
    アンバインド(el) {
      el.removeEventListener('click'、disableClickFn);
    }
  });
};

まず、キャプチャフェーズ中にトリガーするために addEventListener の 3 番目のパラメーターで useCapture を true として使用します。そのため、ここでのイベントリスナーは @click よりも優先され、コールバックがトリガーされます。
次に、stopImmediatePropagation は、イベントのバブリングと同じイベントの他のリスナーのトリガーを防ぐために使用されます。

同じ要素の同じイベントタイプに複数のイベントリスナーがアタッチされている場合、イベントがトリガーされたときに追加された順序でイベントリスナーが呼び出されます。いずれかのイベントリスナーで stopImmediatePropagation() を呼び出すと、残りのイベントリスナーは呼び出されません。 MSDN - stopImmediatePropagation

無効なCSSスタイルを追加する

.権限が無効{
  位置: 相対的;
  カーソル: 許可されていません !important;
  point-events: none; // 要素がマウスイベントを受け取らないようにします border:none;
  背景画像: なし;
  ＆：：後 {
    コンテンツ： '';
    位置: 絶対;
    下部: 0;
    左: 0px;
    右: 0px;
    高さ: 100%;
    zインデックス: 9;
    背景: rgba(255, 255, 255, 0.5);
  }
}

ここでは、比較的馴染みのない CSS プロパティである、pointer-events が使用されています。

CSS3 のポインターイベントプロパティは、特定のグラフィック要素がどのような状況で (ある場合) マウスイベントのターゲットになることができるかを指定します。詳しい使用方法については、MSDN - ポインターイベントを参照してください。

ここでのポインターイベントの使用は、補助的な機能にすぎません。必ずしも、要素のイベントリスナーがトリガーされないことを意味するわけではありません。子孫要素にポインターイベントが指定されていて、イベントターゲットになることが許可されている場合は、親要素のイベントをトリガーできます。また、クリックしないように制御するために CSS プロパティのみに依存するのは依然としてリスクがあるため、ここでは補助的な目的でのみ使用されます。

グローバル「権限判定」ツール機能

'@/util/store' から getStore をインポートします。
const autoCodeList = getStore({ name: 'autoCodeList', }) || [];

エクスポート関数hasPermission(authName) {
  戻り値 !(autoCodeList.length > 0 && autoCodeList.includes(authName));
}

特定の用途

// コマンドメソッド (ここでの oms/order/save は、ユーザーがログインするときの CODE 権限コードに対応します)
<el-button v-permission="'oms:order:save'">保存</el-button>

// 関数メソッド <el-button :disabled="hasPermission('oms:order:save')"></el-button>

Vue ベースの要素ボタン権限の実装に関するこの記事はこれで終わりです。より関連性の高い要素ボタン権限については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: