Vue-Anweisungen für benutzerdefinierte V-HAS, Schritte zur Beurteilung der Schaltflächenberechtigung

Anwendungsszenario

Am Beispiel des Hintergrundverwaltungssystems hat jeder Benutzer unterschiedliche Schaltflächenberechtigungen. Nachdem der Administrator die Berechtigungen konfiguriert hat, erhält der Benutzer beim Anmelden die Liste der Schaltflächenberechtigungen aus der Benutzeroberfläche und kann dann basierend auf den Hintergrunddaten bestimmen, welche Schaltflächen angezeigt werden sollen.

Einfach ausgedrückt: benutzerdefinierte Anweisungen

Erläuterung der benutzerdefinierten Anweisungen auf der offiziellen Website von Vue.js

cn.vuejs.org/v2/guide/cu…

Grundlegende Konzepte

Zusätzlich zu den standardmäßig integrierten Anweisungen (v-model und v-show) für Kernfunktionen kann Vue auch benutzerdefinierte Anweisungen registrieren.

In Vue 2.0 sind Komponenten die Hauptform der Code-Wiederverwendung und -Abstraktion. In einigen Fällen müssen jedoch weiterhin Low-Level-Operationen an gewöhnlichen DOM-Elementen durchgeführt werden. Zu diesem Zeitpunkt werden benutzerdefinierte Anweisungen verwendet.

Passen Sie beispielsweise eine V-Focus-Direktive an. Wenn die Seite geladen wird, erhält das Eingabefeld den Fokus

<Eingabe V-Fokus>

Globale Anpassung

// Registriere eine globale benutzerdefinierte Direktive `v-focus`
Vue.direktive('Fokus', {
  // Wenn das gebundene Element in das DOM eingefügt wird ...
  eingefügt: Funktion (el) {
    // Fokuselement el.focus()
  }
})

Lokale Anpassung

//Wenn Sie eine lokale Direktive registrieren möchten, akzeptiert die Komponente auch eine Direktivenoption:
Anweisungen: {
  Fokus:
    // Definition der Anweisung eingefügt: function (el) {
      el.fokus()
    }
  }
}

Hook-Funktion

Ein Direktivendefinitionsobjekt kann die folgenden Hook-Funktionen bereitstellen (alle optional):

binden

Wird nur einmal aufgerufen, wenn die Direktive zum ersten Mal an ein Element gebunden wird. Hier können Sie eine einmalige Initialisierungseinrichtung durchführen.

eingefügt

Wird aufgerufen, wenn das gebundene Element in den übergeordneten Knoten eingefügt wird (das Vorhandensein des übergeordneten Knotens wird nur garantiert, er wird jedoch nicht notwendigerweise in das Dokument eingefügt)

aktualisieren

Wird aufgerufen, wenn der VNode der Komponente aktualisiert wird. Dies kann jedoch geschehen, bevor die untergeordneten VNodes aktualisiert werden. Der Wert der Anweisung kann sich geändert haben, muss es aber nicht. Sie können jedoch unnötige Vorlagenaktualisierungen vermeiden, indem Sie die Werte vor und nach der Aktualisierung vergleichen.

KomponenteAktualisiert

Wird aufgerufen, nachdem der VNode der Komponente, in der sich die Anweisung befindet, und alle seine untergeordneten VNodes aktualisiert wurden.

lösen

Wird nur einmal aufgerufen, wenn die Direktive vom Element gelöst wird.

andere

Darüber hinaus gibt es einige grundlegende Konzepte, Hook-Funktionsparameter, dynamische Befehlsparameter usw.

cn.vuejs.org/v2/guide/cu…

Auf der offiziellen Website wird es sehr deutlich erklärt, deshalb werde ich hier nicht ins Detail gehen.

Prinzip

Wenn Sie sich für den Quellcode der benutzerdefinierten Anweisungen interessieren, gibt es auch einen Artikel, in dem dies sehr deutlich erklärt wird.

//www.jb51.net/article/209716.htm

Das Prinzip ist:

• Durchlaufen Sie beim Parsen der Vue-Attribute jedes einzelne Attribut.
• Fügen Sie dem Objekt ein Direktivenattribut hinzu, um die Anweisungsinformationen zu speichern.
• Nachdem das Rendern abgeschlossen ist, wird die Funktion „Create Hook“ des Direktivenmoduls ausgeführt.
• Der durch die Vue-Kompilierung generierte virtuelle Knoten, d. h. nachdem VNode in den übergeordneten Knoten eingefügt wurde,
• Führen Sie jede Funktion nacheinander aus und führen Sie unsere benutzerdefinierte eingefügte Hook-Funktion aus

Benutzerdefinierte Direktive „v-has“

Kommen wir zurück zum Thema.

Heute werden wir hauptsächlich zusammenfassen: benutzerdefinierte Anweisungen v-has, Beurteilung der Schaltflächenberechtigung

Die Anmeldeschnittstelle ruft die Schaltflächenberechtigungsliste ab und speichert sie im lokalen Cache LOGIN_USER_BUTTON_AUTH

Das Datenformat ist wie folgt:

[
    {
        "aktiviert":false,
        "Komponente":"",
        "Erstellungszeit": "29.06.2019 18:21:06",
        "Benutzer erstellen":"026a564bbfd84861ac4b65393644beef",
        "Symbol":"",
        "id":"1503273153861066776",
        "name":"Heutige Sammlung (Fallakte)",
        "öffnen":"wahr",
        "parentId":"2328050996633395469",
        "parentName":"Startseite",
        "Berechtigung": "sys:index:vol",
        "sortieren":103,
        "Status": "0",
        "Typ":"2",
        "updateTime":"2021-01-27 15:51:15",
        "updateUser":"026a564bbfd84861ac4b65393644beef",
        "URL": "
    }
]

Anpassen der Konfiguration der v-has-Direktive

Erstellen Sie im Ordner utils eine Datei hasPermission.js und exportieren Sie diese einheitlich in index.js

const hatBerechtigung = {
    installieren (Vue, Optionen) {
        Vue.direktive('hat', {
            eingefügt: (el, binding, vnode)=>{
                filterGlobalPermission(el, Bindung, vnode);
            }
        });
    }
};
/**
 * Globale Berechtigungskontrolle */
export const filterGlobalPermission = (el, binding, vnode) => {
    let Berechtigungsliste = [];
    let authList = JSON.parse(localStorage.getItem('LOGIN_USER_BUTTON_AUTH') || "[]");
    für (let auth von authList) {
        Berechtigungsliste.push(auth);
    }
    wenn (!permissionList.length) {
        el.parentNode.removeChild(el);
        zurückkehren;
    }
    let-Berechtigungen = [];
    für (let-Element der Berechtigungsliste) {
        Berechtigungen.push(Element.Berechtigung);
    }
    wenn (!berechtigungen.includes(bindung.wert)) {
        el.parentNode.removeChild(el);
    }
}
Exportstandard hatBerechtigung;

index.js unter der utils-Datei

Andere js-Dateien im Ordner „utils“ können auch in index.js exportiert werden.

importiere hasPermission von './hasPermission'
export { hatBerechtigung}

Eingeführt in main.js

importiere { hasPermission } von '@/utils'
Vue.use(hatBerechtigung)

Verwenden Sie v-has in der Komponente, um basierend auf den Schaltflächenberechtigungen zu bestimmen, ob die Schaltfläche angezeigt werden soll

<el-button v-has="'sys:arch:add'" Typ="primary" Größe="mini" Symbol="el-icon-plus" @click="add('1')">
    Hinzufügen </el-button>

Oben finden Sie den detaillierten Inhalt der Schritte der benutzerdefinierten V-Has-Anweisung von Vue und der Beurteilung der Schaltflächenberechtigung. Weitere Informationen zur benutzerdefinierten V-Has-Anweisung von Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!