Vue basierend auf einer Element-Button-Berechtigungsimplementierungslösung

Hintergrundanforderungen: Das ERP-System muss eine Funktion zur „Schaltflächenberechtigungssteuerung“ hinzufügen und die Steuerungsgranularität der Berechtigung sollte auf die Schaltflächenebene erweitert werden.

erwartet

Für die Steuerung der Schaltflächenberechtigungen gibt es zwei interaktive Modi: „unsichtbar“ und „sichtbar, aber nicht anklickbar“.

Unsichtbar

Die unsichtbare Interaktionsmethode ist relativ einfach. Wir können v-if verwenden, um zu steuern, ob sie angezeigt wird. Sie können v-show verwenden, aber das ist nicht sicher genug. Schließlich ändert v-show nur den Stil in „display: none“ und dieser existiert immer noch im realen DOM-Rendering. Daher wird empfohlen, v-if zu verwenden, um das Unsichtbare zu steuern.

Sichtbar, aber nicht anklickbar

„Du kannst sehen, aber du kannst nicht.“

• Stilsteuerung (Sie müssen einen deaktivierten Stil hinzufügen), wie z. B. Cursor: nicht zulässig, Ausgrauen usw.
• Nicht anklickbar, d. h. um Klickereignisse zu deaktivieren oder zu blockieren. Dies scheint mit preventDefault/stopProgration erreicht werden zu können.

Für die endgültige Produktanforderung wurde „sichtbar, aber nicht anklickbar“ gewählt, wahrscheinlich weil unsichtbar als zu einfach angesehen wurde. (¬_¬)

Ideenerkundung

• Fügen Sie der Rückruffunktion des Schaltflächenklickereignisses eine Wrapper-Funktion hinzu, um dessen Berechtigungen zu steuern und das Ereignis abzufangen und auszulösen. Es ist, als würde man einen Proxy erstellen, der ein bisschen wie eine Komponente höherer Ordnung ist (aber er ändert das bestehende Geschäft zu sehr, und jede @click-Bindungsfunktion muss einzeln geändert werden, daher wird diese Lösung verworfen).
• Um zu verhindern, dass das Ereignis „Klicken auf die Schaltfläche“ sprudelt und ausgelöst wird, kann anscheinend preventDefautl/stopProgration verwendet werden. Es scheint, als könne das Ereignis in Form von Anweisungen auf dem DOM-Element überwacht werden. Wenn dies zulässig ist, wird das Ereignis normal ausgeführt, andernfalls wird es blockiert.

Übungsplan

Schließlich haben wir uns für die Anweisungsmethode entschieden, die eine Erweiterung mit den geringsten Kosten ermöglicht und eine Änderung der vorhandenen Geschäftscodelogik vermeidet.
Elemente, die zur Berechtigungskontrolle Click-Hijacking erfordern:

• el-Taste
• btn-wrapper (selbstgekapselte Komponente)
• div/span/a usw. Tags

Den konkreten Umsetzungsplan finden Sie weiter unten:

Berechtigungseintrag: Vuex-Steuerung, globale Verwendung

//Nachdem sich der Benutzer angemeldet hat, holen Sie sich den Berechtigungscode des Benutzers und speichern Sie ihn im Store
dies.$store.commit('SET_AUTH_CODE', authCodeList);

SET_AUTH_CODE: (Status, Aktionscode) => {
 wenn (acthCode) {
   Zustand.autoCodeList = acthCode;
 }
 setStore({
  Name: "autoCodeList",
  Inhalt: Status.autoCodeList || [],
 });
}

Berechtigungsanweisungen definieren

const disableClickFn = (Ereignis) => {
  Ereignis und Ereignis.stopImmediatePropagation();
}

export const hasPermission = () => {
  Vue.direktive('Berechtigung', {
    binden(el, Bindung) {
      lass deaktivieren = true;
      wenn (autoCodeList.length und autoCodeList.includes(Bindung.Wert)) {
        deaktivieren = falsch;
      }

      if (deaktivieren) {
        el.classList.add('Berechtigung deaktiviert');
        el.setAttribute('deaktiviert', 'deaktiviert');
        el.addEventListener('klicken', clickFn deaktivieren, true);
      }
    },
    unbind(el) {
      el.removeEventListener('klicken', clickFn deaktivieren);
    }
  });
};

• Zuerst verwenden wir useCapture als true im dritten Parameter von addEventListener, um es während der Erfassungsphase auszulösen, sodass der Ereignislistener hier Vorrang vor @click hat, um den Rückruf auszulösen.
  
• Zweitens wird stopImmediatePropagation verwendet, um ein Aufsteigen des Ereignisses und das Auslösen anderer Listener desselben Ereignisses zu verhindern.

Wenn mehrere Ereignis-Listener an denselben Ereignistyp im selben Element angehängt sind, werden sie beim Auslösen des Ereignisses in der Reihenfolge aufgerufen, in der sie hinzugefügt wurden. Wenn Sie stopImmediatePropagation() in einem der Ereignis-Listener aufrufen, werden die verbleibenden Ereignis-Listener nicht aufgerufen. MSDN - stopImmediatePropagation

Deaktivierte CSS-Stile hinzufügen

.Berechtigung deaktiviert {
  Position: relativ;
  Cursor: nicht erlaubt !wichtig;
  Zeigerereignisse: keine; // Verhindern, dass Elemente Mausereignisse empfangen. Grenze: keine;
  Hintergrundbild: keines;
  &::nach {
    Inhalt: '';
    Position: absolut;
    unten: 0;
    links: 0px;
    rechts: 0px;
    Höhe: 100%;
    Z-Index: 9;
    Hintergrund: rgba(255, 255, 255, 0,5);
  }
}

Hier wird eine relativ unbekannte CSS-Eigenschaft, pointer-events, verwendet.

Die CSS3-Eigenschaft „pointer-events“ gibt an, unter welchen Umständen (falls überhaupt) ein bestimmtes Grafikelement zum Ziel eines Mausereignisses werden kann. Weitere Verwendungshinweise: MSDN - Zeigerereignisse

Die Verwendung von Zeigerereignissen ist hier nur eine Hilfsfunktion. Sie bedeutet nicht unbedingt, dass der Ereignislistener des Elements niemals ausgelöst wird. Wenn das untergeordnete Element Zeigerereignisse angegeben hat und es erlaubt, das Ereignisziel zu werden, kann das Ereignis des übergeordneten Elements ausgelöst werden. Und sich ausschließlich auf CSS-Eigenschaften zu verlassen, um das Nichtklicken zu steuern, ist immer noch riskant, daher wird es hier nur zu Hilfszwecken verwendet.

Globale Toolfunktion „Berechtigungsbeurteilung“

importiere { getStore, } von '@/util/store';
const autoCodeList = getStore({ name: 'autoCodeList', }) || [];

Exportfunktion hatBerechtigung(authName) {
  Rückgabewert !(autoCodeList.length > 0 und autoCodeList.includes(authName));
}

Spezifische Verwendung

// Befehlsmethode (oms/order/save entspricht hier dem CODE-Berechtigungscode, wenn sich der Benutzer anmeldet)
<el-button v-permission="'oms:order:save'">Speichern</el-button>

// Funktionsmethode <el-button :disabled="hasPermission('oms:order:save')"></el-button>

Dies ist das Ende dieses Artikels über die Implementierung von Vue-basierten Element-Schaltflächenberechtigungen. Weitere relevante Element-Schaltflächenberechtigungen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!