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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue+elementUI コンポーネントは、折りたたみ可能な動的レンダリングのマルチレベル サイドバー ナビゲーションを再帰的に実装します。
  • プレーヤー機能を実現するためのvue + element uiのサンプルコード
  • Vue要素のバックグラウンド認証プロセスの分析
  • Vue+element+oss はフロントエンドのフラグメントアップロードとブレークポイント再開を実現します
  • 要素 DateTimePicker+vue ポップアップボックスに時間のみが表示される問題を解決する
  • VueはElementUIのフォームサンプルコードを模倣する
  • Vueを使用してツリーコンポーネントを実装する例
  • ツリーコントロールを使用した Vue+iview の具体的な使用法
  • Vue での編集可能なツリー テーブルの実装コード
  • Vue Element フロントエンドアプリケーション開発ツリーリストコンポーネント

<<:  権限の問題によりMySQLの設定ファイルmy.cnfを起動できない問題の解決方法

>>:  MySQL マスタースレーブレプリケーションの読み書き分離構造の詳細な説明

推薦する

H5ウェイクアップアプリの実装方法と注意点のまとめ

目次序文APPメソッドにジャンプURLスキームメタタグユニバーサルリンクさまざまな使い方URLスキー...

MySQLデータベースのbinlogクリーンアップコマンドの詳細な説明

概要今日は主に、MySQL データベースから binlog ログを正しく削除する方法を紹介します。ロ...

MySQL の group by と order by を一緒に使用する方法

テーブル:reward(報酬テーブル)があるとします。テーブル構造は次のようになります。 テーブルt...

バックエンドデータを取得するためのVue Elementフロントエンドアプリケーション開発

目次概要1. バックエンドデータの取得と処理2. インターフェース表示処理概要前回のエッセイ「ステッ...

MySQL のマスター スレーブ レプリケーション オプションをオンラインで変更する方法

序文: MySQL で最も一般的に使用されるアーキテクチャは、マスター スレーブ レプリケーションで...

nginxのリソースキャッシュ設定の詳細な説明

私はずっとキャッシュについて学びたいと思っていました。結局のところ、キャッシュはフロントエンドのパフ...

検索データ表示を実装するJavaScript

この記事ではJavaScript検索のデータ表示コードを参考までに共有します。具体的な内容は以下のと...

優れたユーザー インターフェース デザインのための 37 のヒント (画像付き)

1. 複数列レイアウトではなく、単一列レイアウトを使用する1 列のレイアウトにより、全体的な状況をよ...

Linux dateコマンドの知識ポイントのまとめ

使用法: date [オプション]... [+フォーマット]または: date [-u|--utc|...

Dockerはプロセス操作を管理するためにSupervisorを使用する

Docker コンテナは、起動時に、たとえば ssh または apache デーモン サービスなどの...

Vue router-viewとrouter-linkの実装原理

使用 <div id="アプリ"> <router-link ...

JavaScript における変数と関数の昇格の詳細な例

js 実行字句解析フェーズ: 形式パラメータ解析、変数宣言解析、関数宣言解析の 3 つの部分が含まれ...

さまざまなネットワーク画像形式におけるPNGの利点の詳細な説明

BMP は、ハードウェア デバイスに依存せず、広く使用されている画像ファイル形式です。ビットマップ保...

Vscode が Ubuntu にリモート接続する際のエラー問題の解決方法

1. 事件の背景:仕事上、Ubuntu への vscode リモート接続を使用する必要があります。 ...

Meituan DBデータをデータウェアハウスに同期するアーキテクチャと実践

背景データ ウェアハウス モデリングでは、何ら処理されていない元のビジネス レイヤー データは OD...