Einführung in die Vue-Schaltflächenberechtigungssteuerung

Vorwort:

In täglichen Projekten müssen Sie möglicherweise die Betriebsberechtigungen des aktuellen Benutzers basierend auf den von der Hintergrundschnittstelle zurückgegebenen Daten ermitteln. Die Schaltfläche „Löschen“ muss angezeigt werden, wenn eine Löschberechtigung vorliegt. Ohne diese Berechtigung wird der Button nicht angezeigt bzw. gelöscht. Durch die Suche nach Informationen wird diese Funktion durch vuex realisiert.

1. Schritte

1. Definieren Sie die Berechtigungen für die Schaltflächen

Erstellen Sie buttomPermission im state , um die von der Hintergrundschnittstelle zurückgegebenen Berechtigungsdaten zu speichern.

setPermission wird verwendet, um Daten zu akzeptieren und die Seitenberechtigungsverwaltung an das buttomPermission -Objekt zu übergeben.

Verwenden von vuex:

Vue.Verwenden(Vuex)

Erstellen Sie eine Vue-Instanz const store = new Vuex.Store({
    Zustand: {
        buttomPermission: {}
    },
    Mutationen:
        setPermission(Status, Berechtigung) {
            state.buttomPermission = Berechtigung
        }
    }
})
Standardspeicher exportieren

2. Definieren Sie den Store

Store aus „./store/index.js“ importieren

neuer Vue({
    speichern,
    el: '#app',
    rendern: h => h(App)
})

3. Berechtigungsanweisungen erstellen

Erstellen Sie einen neuen directives und eine Datei permission.js .

Die inserted Funktion wird hier verwendet, um zu überprüfen, ob das Element über die Berechtigung verfügt, wenn das gebundene Element in den übergeordneten Knoten eingefügt wird.

eingefügt( el, Bindungen, vnode ) { }

4. Verwenden Sie die Berechtigungsdirektive

Führen Sie die permission auf der Schaltflächenseite ein und definieren Sie sie, schreiben Sie die Direktive in buttom und binden Sie den entsprechenden Wert in die Direktive ein.

 <button v-permission="'add'">Hinzufügen</button>
Importberechtigung aus „./directives/permission“
Anweisungen: {permission,},

5. Nicht autorisierte Daten löschen

Rufen Sie in der permission value Wert der Schaltflächenbindung über bindings ab, suchen Sie ihn dann im Objekt buttomPermission und stellen Sie fest, ob eine Berechtigung vorliegt. Wenn keine Berechtigung vorliegt, löschen Sie den Knoten.

eingefügt(el, Bindungen, vnode) {
        Lassen Sie btnPermissionValue = Bindungen.Wert;
        let boolean =vnode.context.$store.state.buttomPermission[btnPermissionValue];
        !boolean und el.parentNode.removeChild(el);
    }

6. Übergabe von Zustandsverwaltungsdaten

Übergeben Sie die Statusverwaltungsdaten über die Methode setPermission an die Berechtigungsverwaltung

let Berechtigungen = {}
this.$store.commit("setPermission", Berechtigungen);

II. Überblick

Im Allgemeinen wird ein buttomPermission Berechtigungsstatusobjekt über vuex definiert und dann eine permissions erstellt. Die permissions wird für jede buttom Schaltfläche verwendet und der Wert der spezifischen Bedeutung der Schaltfläche wird gebunden. Rufen Sie dann in der Datei permission.js den aktuellen Wert ab und ermitteln Sie, ob die aktuelle Schaltfläche über die Berechtigung buttomPermission verfügt. Wenn nicht, löschen Sie den aktuellen Schaltflächenknoten direkt.

Dies ist das Ende dieses Artikels über die Berechtigungssteuerung von Vue-Buttons. Weitere relevante Inhalte zur Berechtigungssteuerung von Vue-Buttons finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!