Detaillierte Erläuterung des Vue-Identitätsauthentifizierungsmanagements und der Mandantenverwaltung

Überblick

Die Entwicklung funktionaler Module ist oft am einfachsten, es ist jedoch nicht einfach, auf jedes Detail einzugehen. Nehmen wir als Beispiel das Modul zur Verwaltung der Identitätsauthentifizierung. Es scheint sehr einfach zu sein, da die Backend-Schnittstellen alle in der ABP-Vorlage vorgefertigt sind und der Frontend-Teil nichts weiter ist als das Schreiben von Schnittstellen, das Aufrufen von Schnittstellen und das Binden von Daten. Wenn Sie sich jedoch den Code der ABP-Angular-Version ansehen, werden Sie feststellen, dass es tatsächlich viele Details gibt, mit denen man sich befassen muss.

Zurück zu Vue. Da der Front-End-Teil zu viele Codedateien enthält, werden im Folgenden nur einige Details aufgeführt, die beachtet werden müssen. Andere Dinge wie Vue-Komponenten, Tabellen, Formulare, Datenbindung, Schnittstellenanforderungen usw. sind eigentlich fast gleich und werden hier nicht erwähnt.

Berechtigungen auf Schaltflächenebene

Im vorherigen Kapitel haben wir die Steuerung der Menüberechtigungen implementiert. Das gleiche Prinzip gilt für Schaltflächenberechtigungen. Bestimmen Sie, ob abpConfig.auth.grantedPolicies eine bestimmte Berechtigung enthält, und verwenden Sie dann das v-if-Rendering in der Komponente.

src\utils\abp.js:

Exportfunktion checkPermission(Richtlinie) {
  const abpConfig = store.getters.abpConfig;
  wenn (abpConfig.auth.grantedPolicies[Richtlinie]) {
    gibt true zurück;
  } anders {
    gibt false zurück;
  }
}

src\views\identity\roles.vue:

<el-Schaltfläche
  Klasse="Filterelement"
  Stil="Rand links: 10px;"
  Typ="primär"
  Symbol="el-icon-edit"
  @click="handleErstellen"
  v-if="checkPermission('AbpIdentity.Roles.Erstellen')"
>
  {{ $t("AbpIdentity['NewRole']") }}
</el-button>

Identitätsauthentifizierungsverwaltung

Ich werde nicht auf das Hinzufügen, Löschen, Ändern und Überprüfen von Rollen und Benutzern eingehen, sondern hier müssen wir auf die Berechtigungsverwaltung achten. Sowohl Benutzer als auch Rollen benötigen eine Berechtigungsverwaltung, die in der ABP Angular-Version ein unabhängiges Berechtigungsverwaltungsmodul ist. Ich behandle es hier auch als öffentliche Komponente und unterscheide es nach Providername. „R“ ist die Rollenberechtigung und „U“ ist die Benutzerberechtigung.

R/U-Berechtigungen

Es gibt einen kleinen Unterschied zwischen ihnen. Benutzerberechtigungen können aus Rollenberechtigungen stammen, daher müssen die Berechtigungen im Benutzer zeigen, von welchem ​​ProviderName und ProviderKey sie stammen. Wenn sie von anderen Providern stammen, sind sie deaktiviert und können nicht geändert werden.

src\views\identity\components\permission-management.vue:

<el-form label-position="oben">
  <el-tabs tab-position="links">
    <el-tab-pane
      v-for="Gruppe in PermissionData.groups"
      :Schlüssel="Gruppenname"
      :label="Gruppe.Anzeigename"
    >
      <el-form-item :label="Gruppe.displayName">
        <el-Baum
          ref="Berechtigungsbaum"
          :data="transformPermissionTree(Gruppe.Berechtigungen)"
          :props="BaumStandardProps"
          Kontrollkästchen anzeigen
          streng prüfen
          Knotenschlüssel="Name"
          Standardmäßig alles erweitern
        />
      </el-form-item>
    </el-tab-pane>
  </el-tabs>
</el-form>

transformPermissionTree(Berechtigungen, Name = null) {
  sei arr = [];
  wenn (!Berechtigungen || !Berechtigungen.some(v => v.parentName == name))
    Rückflug an;
  const Eltern = Berechtigungen.Filter(v => v.parentName == Name);
  für (lass i in Eltern) {
    lass label = '';
    wenn (this.permissionsQuery.providerName == "R") {
      label = Eltern[i].displayName;
    } sonst wenn (this.permissionsQuery.providerName == "U") {
      Bezeichnung =
        Eltern[i].displayName +
        " " +
        Eltern[i].grantedProviders.map(Anbieter => {
          gibt `${provider.providerName}: ${provider.providerKey}` zurück;
        });
    }
    arr.push({
      Name: Eltern[i].Name,
      Etikett,
      deaktiviert: this.isGrantedByOtherProviderName(
        Eltern[i].grantedProviders
      ),
      Kinder: this.transformPermissionTree(Berechtigungen, Eltern[i].Name)
    });
  }
  Rückflug an;
},
isGrantedByOtherProviderName(gewährteAnbieter) {
  wenn (gewährteAnbieter.Länge) {
    zurückkehren (
      grantedProviders.findIndex(
        p => p.Anbietername !== this.Berechtigungsabfrage.Anbietername
      ) > -1
    );
  }
  gibt false zurück;
}

Berechtigungsaktualisierung

Darüber hinaus gibt es ein Detailproblem: Wenn die geänderten Berechtigungen den aktuellen Benutzer betreffen, wie können sie dann sofort wirksam werden?

src\views\identity\components\permission-management.vue:

updatePermissions(this.permissionsQuery, { permissions: tempData }).dann(
  () => {
    this.dialogPermissionFormVisible = false;
    dies.$benachrichtigen({
      Titel: this.$i18n.t("HelloAbp['Success']"),
      Nachricht: this.$i18n.t("HelloAbp['SuccessMessage']"),
      Typ: „Erfolg“,
      Dauer: 2000
    });
    fetchAppConfig(
      diese.permissionsQuery.providerKey,
      this.permissionsQuery.providerName
    );
  }
);

src\utils\abp.js:

Funktion shouldFetchAppConfig(Anbieterschlüssel, Anbietername) {
  const currentUser = store.getters.abpConfig.currentUser;

  wenn (Anbietername === "R")
    gibt currentUser.roles.some zurück (Rolle => Rolle === Anbieterschlüssel);

  wenn (Anbietername === "U") aktuelleBenutzer-ID === Anbieterschlüssel zurückgibt;

  gibt false zurück;
}
Exportfunktion fetchAppConfig(Anbieterschlüssel, Anbietername) {
  wenn (shouldFetchAppConfig(providerKey, providerName)) {
    store.dispatch("app/applicationConfiguration").dann(abpConfig => {
      Router zurücksetzen();

      store.dispatch("Benutzer/SetRoles", abpConfig.currentUser.roles);

      const grantedPolicies = abpConfig.auth.grantedPolicies;

      // Karte zugänglicher Routen basierend auf grantedPolicies erstellen
      speichern
        .dispatch("Berechtigung/Routen generieren", gewährteRichtlinien)
        .then(accessRoutes => {
          // barrierefreie Routen dynamisch hinzufügen
          router.addRoutes(Zugriffsrouten);
        });

      // besuchte Ansichten und zwischengespeicherte Ansichten zurücksetzen
      //store.dispatch("tagsView/delAllViews", null, { root: true });
    });
  }
}

Dabei sind viele Dinge zu beachten, beispielsweise lässt sich die Rolle mit isStatic===true nicht löschen und der Name nicht verändern; die Passwort-Verifizierungsregeln zum Anlegen neuer Benutzer und Bearbeiten von Benutzern müssen unterschiedlich gehandhabt werden; und auch die Speicherberechtigungen werden unterschiedlich gespeichert. usw. . . Wenn du die Voraussetzungen hast, kannst du dir den Angular-Code von ABP anschauen.

Mieterverwaltung

Die grundlegenden Funktionsschnittstellen sind ähnlich. . . Es gibt jedoch eine Option zum „Verwalten von Funktionen“, und dort wird standardmäßig „Keine Funktionen verfügbar“ angezeigt:

Es gibt in der Benutzeroberfläche keine Möglichkeit, dieses Element hinzuzufügen oder zu löschen, aber diese Funktion ist recht praktisch. Es stammt aus dem FeatureManagement-Modul von ABP, auch bekannt als „Feature Management“, das später vorgestellt wird.

Mieterwechsel

Nach Abschluss der Mandantenverwaltung sollte es Ihnen beim Anmelden möglich sein, den Mandanten zu wechseln.

Das Wechseln von Mandanten ist relativ einfach. Sie müssen lediglich die Mandanten-ID basierend auf dem eingegebenen Mandantennamen abrufen, dann die Schnittstelle /abp/application-configuration aufrufen und die Mandanten-ID in das Feld __tenant des Anforderungsheaders einfügen. Dieser Parameter ist auch in nachfolgenden Anforderungen erforderlich. Wenn er nicht übergeben wird, wird der Standardhost verwendet.

Tatsächlich kann das ABP-Backend so konfiguriert werden, dass mehrere Mandanten möglich sind. Hier können Sie auch die Schaltfläche zum Umschalten des Mandanten entsprechend der Backend-Konfiguration anzeigen oder ausblenden. Im Vergleich zur ABP-Vorlage fehlt in der Login-Oberfläche noch ein Registrierungszugang, dieser wird jedoch später ergänzt.

Wirkung

endlich

Auf die Modulentwicklung des Frontend-Teils wird nicht näher eingegangen, das Thema ist weiterhin ABP. Zu diesem Zeitpunkt sind die Front-End-Funktionen der ABP-Vorlage fast vollständig. Wenn Sie den Code benötigen, können Sie ihn unter https://github.com/xiajingren/HelloAbp abrufen. Später werde ich die Dateien organisieren und eine saubere Vue-Version erstellen.

Oben finden Sie eine ausführliche Erläuterung der Identitätsauthentifizierungsverwaltung und Mandantenverwaltung von Vue. Weitere Informationen zur Identitätsauthentifizierungsverwaltung und Mandantenverwaltung von Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!