Vue ボタンの権限制御の導入

序文：

日常的なプロジェクトでは、バックグラウンド インターフェイスによって返されるデータに基づいて、現在のユーザーの操作権限を判断する必要がある場合があります。削除権限がある場合は削除ボタンを表示する必要があります。この権限がないと、ボタンは表示されず、削除もされません。情報を検索することで、この機能はvuexを通じて実現されます。

1. 手順

1. ボタンの権限を定義する

バックグラウンド インターフェイスによって返された権限データを保存するには、 stateにbuttomPermissionを作成します。

setPermissionは、データを受け入れ、ページ権限管理をbuttomPermissionオブジェクトに渡すために使用されます。

vuex の使用:

Vue.use(Vuex)

Vueインスタンスを作成する const store = new Vuex.Store({
    州： {
        ボタン権限: {}
    },
    突然変異:
        setPermission(状態、権限) {
            state.buttomPermission = 許可
        }
    }
})
デフォルトストアをエクスポート

2. ストアを定義する

'./store/index.js' からストアをインポートします

新しいVue({
    店、
    el: '#app',
    レンダリング: h => h(App)
})

3. 権限指示を作成する

新しいdirectivesフォルダーを作成し、 permission.jsファイルを作成します。

ここで、 inserted関数は、バインドされた要素が親ノードに挿入されるときに、要素に権限があるかどうかを確認するために使用されます。

挿入されました(el、バインディング、vnode) {}

4. パーミッションディレクティブを使用する

ボタン ページでpermissionディレクティブを導入して定義し、 buttomにディレクティブを記述して、ディレクティブ内の対応する値をバインドします。

 <button v-permission="'add'">追加</button>
'./directives/permission' から権限をインポートします
ディレクティブ: {permission,},

5. 不正なデータを削除する

permission命令では、 bindingsを通じてボタンバインディングのvalueを取得し、 buttomPermissionオブジェクトでそれを見つけて、権限があるかどうかを判断します。権限がない場合は、ノードを削除します。

挿入(el, バインディング, vnode) {
        btnPermissionValue を bindings.value とします。
        ブール値をvnode.context.$store.state.buttomPermission[btnPermissionValue]に設定します。
        !boolean && el.parentNode.removeChild(el);
    }

6. 状態管理データの受け渡し

setPermissionメソッドを通じて状態管理データを権限管理に渡す

権限を {} にします
this.$store.commit("setPermission", 権限);

II. 概要

一般的に、 buttomPermission権限ステータス オブジェクトはvuexを通じて定義され、次にpermissionsディレクティブが作成されます。 permissionsディレクティブは各buttomに使用され、ボタンの特定の意味の値がバインドされます。次に、 permission.jsファイルで現在の値を取得し、現在のボタンにbuttomPermissionからの権限があるかどうかを取得します。権限がない場合は、現在のボタン ノードを直接削除します。

これで、vue ボタンの権限制御に関するこの記事は終了です。vue ボタンの権限制御に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。