Implementierung des iview-Berechtigungsmanagements

iview-admin2.0 integrierte Berechtigungsverwaltung

iview-admin2.0 verfügt über eine Berechtigungsverwaltung und Berechtigungen können durch Festlegen der Zugriffsparameter des Routing-Metaobjekts zugewiesen werden.
Die Standardrollen sind super_admin und admin. Jetzt weisen wir dem Seitenleistenelement des Dokuments eine Berechtigung zu, die nur der Benutzer anzeigen kann.

  {
    Weg: '',
    Name: "doc",
    Meta: {
      Titel: 'Dokument',
      href: 'https://lison16.github.io/iview-admin-doc/#/',
      Symbol: „iOS-Buch“,
      Zugriff: ['Benutzer']
    }
  },

Die Spalte „Dokumente“ wird nicht mehr in der Seitenleiste angezeigt. Holen Sie sich menuList in src/store/module/app.js, dies ist die Liste der Seitenleiste

  Getter: {
    menuList: (Status, Getter, Root-Status) => getMenuByRouter(Router, Root-Status.Benutzer.Zugriff),
    Fehleranzahl: Status => Status.Fehlerliste.Länge
  },

Diese Getter-Methode führt hauptsächlich getMenuByRouter aus und überprüft dann src/libs/util.js, um den spezifischen Code zu finden

/**
 * @param {Array} list Holt die Menüliste über die Routenliste * @returns {Array}
 */
export const getMenuByRouter = (Liste, Zugriff) => {
  lass res = []
  fürJedes(Liste, Element => {
    wenn (!item.meta || (item.meta && !item.meta.hideInMenu)) {
      lass obj = {
        Symbol: (item.meta && item.meta.icon) || '',
        Name: Artikelname,
        Meta: Element.Meta
      }
      wenn ((hasChild(item) || (item.meta && item.meta.showAlways)) && showThisMenuEle(item, access)) {
        obj.children = getMenuByRouter(item.children, Zugriff)
      }
      wenn (item.meta && item.meta.href) obj.href = item.meta.href
      wenn (showThisMenuEle(Element, Zugriff)) res.push(Objekt)
    }
  })
  Rückgabewert
}

const showThisMenuEle = (Element, Zugriff) => {
  wenn (item.meta && item.meta.access && item.meta.access.length) {
    wenn (hasOneOf(item.meta.access, access)) return true
    sonst gibt „false“ zurück
  } sonst gibt true zurück
}

An diesem Punkt ist der Prozess der Zugriffsbestimmungsberechtigung klarer. Der Code ruft die im Status gespeicherten Benutzerinformationen ab, hauptsächlich den Zugriff, und vergleicht sie dann mit dem von der Route zugelassenen Zugriff. Wenn der Zugriff des Benutzers innerhalb des von der Routenzugriffsliste zugelassenen Bereichs liegt, wird das Recht bestätigt. Beispielsweise lautet der Benutzerzugriff ['admin', 'super_admin'], aber wir setzen den Dokumentzugriff auf ['user'].

hasOneOf(['admin','super_admin'],['user']) // false, Authentifizierung fehlgeschlagen

hasOneOf ist eine Toolmethode von iview-admin. Wird verwendet, um zu ermitteln, ob mindestens ein Element des abzufragenden Arrays im Zielarray enthalten ist. Der detaillierte Code steht weiter unten.

Steuerung der Komponentenanzeige basierend auf Berechtigungen

Im Allgemeinen müssen wir auch die Anzeige von Seitenelementen wie Schaltflächen basierend auf Berechtigungen steuern. Es gibt zwei Möglichkeiten. Eine besteht darin, die Authentifizierungsanweisung anzupassen oder eine Authentifizierungskomponente anzupassen, um die Elemente zu umschließen, die eine Authentifizierung benötigen.

Benutzerdefinierte Authentifizierungsanweisungen

iview-admin legt benutzerdefinierte Anweisungen im Ordner src/directive ab. Die Datei directives.js ist für den Import und einheitlichen Export der in jeder Datei definierten benutzerdefinierten Anweisungen verantwortlich. Wir implementieren eine Auth-Direktive:

importiere ziehbares Objekt aus „./module/draggable“
Zwischenablage aus „./module/clipboard“ importieren
Authentifizierung aus „./module/auth“ importieren
const-Direktiven = {
  ziehbar,
  Zwischenablage,
  Authentifizierung
}
Standardanweisungen exportieren

Dann wird eine importDirective-Methode in src/directive/index.js exportiert, der Eingabeparameter ist Vue und die Logik besteht darin, die Direktive zu registrieren.

Importdirektive aus './directives'

const importDirective = Vue => {
  /**
   * Drag-Befehl v-draggable="Optionen"
   * Optionen = {
   * Trigger: /übergeben Sie den CSS-Selektor als Drag-Trigger/,
   * body: /übergeben Sie den CSS-Selektor des zu verschiebenden Containers/,
   * Wiederherstellen: /Gibt an, ob die ursprüngliche Position nach dem Ziehen wiederhergestellt werden soll/
   * }
   */
  Vue.direktive('ziehbar', direktive.ziehbar)
  /**
   * Zwischenablagedirektive v-draggable="Optionen"
   * Optionen = {
   * Wert: /an V-Modell gebundener Wert im Eingabefeld/,
   * success: /Rückruf nach erfolgreichem Kopieren/,
   * Fehler: /Rückruf nach Kopierfehler/
   * }
   */
  Vue.direktive('Zwischenablage', direktive.Zwischenablage)
  Vue.direktive('auth', direktive.auth) 
}

Export-Standardimportdirektive

Diese ImportDirective-Methode wird in main.js verwendet und das echte Vue wird als Eingabeparameter übergeben.

importiere Importdirektive von '@/direktive'
/**
 * Registrierungsanweisungen */
Importrichtlinie (Vue)
...

Bearbeiten Sie src/directive/module/auth.js

Store aus „@/store“ importieren
Standard exportieren {
  eingefügt: (el, binding, vnode) => {
    Konstantwert = Bindungswert
    const Zugriff = Store.State.Benutzer.Zugriff
    wenn (Zugriff.indexOf(Wert) === -1) {
      el.entfernen()
    }
  }
}

Wir fügen eine Authentifizierungsdirektive hinzu und exportieren sie. Führen Sie während der Injektion eine Berechtigungsprüfung durch. Wenn die Berechtigung erfolgreich bestätigt wurde, unternehmen Sie nichts. Wenn dies fehlschlägt, löschen Sie das Element.
Probieren Sie es aus. Nehmen Sie als Beispiel die obere Schaltfläche zum Minimieren des Menüs, beader-bar.vue

<Vorlage>
  <div Klasse="Header-Leiste">
    <sider-trigger v-auth="'admin'" :collapsed="collapsed" icon="md-menu" @on-change="handleCollpasedChange"></sider-trigger>
    ...
  </div>
</Vorlage>

Wenn v-auth="'admin'" ist, wird die Schaltfläche angezeigt, und wenn es sich um einen Benutzer handelt, wird die Schaltfläche ausgeblendet.

Benutzerdefinierte Authentifizierungskomponente

Sie können auch die Authentifizierungskomponente anpassen und eine funktionale Komponente auth.vue erstellen.

<Skript>
Store aus „@/store“ importieren
Standard exportieren {
  funktional: wahr,
  Requisiten: {
    Behörde:
      Typ: Zeichenfolge,
      erfordern: wahr
    }
  },
  rendern (h, Kontext) {
    const { props, scopedSlots } = Kontext
    const Zugriff = Store.State.Benutzer.Zugriff
    returniere access.indexOf(props.authority) > -1 ? scopedSlots.default() : null
  }
}
</Skript>

Wenn die Authentifizierung erfolgreich ist, wird der Slot zurückgegeben, andernfalls wird null zurückgegeben, sodass das von Auth umschlossene Element nicht angezeigt wird. Registrieren Sie auth.vue dann als globale Komponente, damit Sie es nicht bei jeder Verwendung importieren müssen. main.js bearbeiten

Auth aus „_c/auth/auth.vue“ importieren
//Komponente registrieren Vue.component('Auth',Auth)

Wenn Sie es verwenden, umschließen Sie die Komponente einfach mit Auth

<Vorlage>
  <div Klasse="Header-Leiste">
    <Auth-Berechtigung="Benutzer">
      <sider-trigger :collapsed="collapsed" icon="md-menu" @on-change="handleCollpasedChange"></sider-trigger>
    </Auth>
  </div>
</Vorlage>

Zusammenfassen

Dies kann entweder durch komponentenbasiertes Schreiben oder durch benutzerdefinierte Anweisungen implementiert werden. Der komponentenbasierte Ansatz erfordert mehr Code zum Schreiben und benutzerdefinierte Anweisungen sind flexibler. Darüber hinaus gibt es einen Unterschied. Wenn die benutzerdefinierte Anweisung das Recht nicht bestätigt, wird das Element direkt gelöscht. Wenn Sie daher zu diesem Zeitpunkt vom Administrator zum Benutzer wechseln, wird das Element immer noch nicht angezeigt, da es gelöscht wurde. Sie müssen die Seite aktualisieren, um es anzuzeigen. Wenn es sich jedoch um einen komponentenbasierten Ansatz handelt, geschieht dies nicht und Sie können flexibel reagieren. Dies hat im Allgemeinen nur geringe Auswirkungen.

Beachten Sie, dass ich den Zugriff auf eine Zeichenfolge festgelegt habe. Wenn Sie ihn auf ein Array festlegen, funktioniert es auch. Die mit iview gelieferte Methode hasOneOf kann gut verwendet werden.

/**
 * @param {Array} target Zielarray* @param {Array} arr abzufragendes Array* @description Bestimme, ob mindestens ein Element des abzufragenden Arrays im Zielarray enthalten ist*/
export const hasOneOf = (targetarr, arr) => {
  returniere Zielarr.some(_ => arr.indexOf(_) > -1)
}

Dies ist das Ende dieses Artikels über die Implementierung der iview-Berechtigungsverwaltung. Weitere relevante Inhalte zur iview-Berechtigungsverwaltung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!