Vue-Router implementiert die Berechtigungskontrollmethode

Dieser Artikel stellt Ihnen hauptsächlich den Beispielcode der Vue-Router-Berechtigungskontrolle vor. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Das Backend-Managementsystem des Unternehmens wurde kürzlich erstellt und das System ist relativ groß. Die folgenden Punkte müssen erreicht werden:

• Menüberechtigungen, unterschiedliche Anzeige Entsprechend den unterschiedlichen Berechtigungen im Menü

• Betriebsberechtigungen verfügen beispielsweise einige Konten nicht über die Berechtigung zum Hinzufügen und andere nicht über die Berechtigung zum Ändern oder Löschen

• Datenberechtigungen, wie z. B. statistische Übersicht. Normale Administratoren können die Geschäftsübersicht des Unternehmens nicht sehen, aber sie können die Übersicht ihrer Region sehen

• Anzeigeberechtigungen, wie z. B. Listen, Vorgänge kann den Vertragsbetrag in dieser Spalte sehen, aber der Markt kann die Vertragsbetragsspalte nicht sehen

Bisher befindet es sich noch im Aufbau und die Menüberechtigungen und Betriebsberechtigungen wurden gelöst.

Menüberechtigungen:

Zu Beginn haben wir auch die oben angegebene Methode befolgt. Wir konfigurieren zunächst eine Reihe von Routen lokal und nach erfolgreicher Anmeldung wird eine Menüliste angezeigt Anschließend wird in beforeEach die zurückgegebene Menüliste mit der lokal konfigurierten Route verglichen. Wenn sie vorhanden ist, verfügt sie über die Zugriffsberechtigung. Nachdem ich einige Tage daran gearbeitet hatte, fiel mir die Verwendung schwer. Ich musste einen vollständigen Satz von Routen lokal konfigurieren und außerdem mehrere Seiten erstellen, um diese Routing-Informationen auf den Server zu schreiben und Berechtigungen zuzuweisen. Wenn Sie viele Berechtigungsmenüs haben, wie in unserem Backend, gibt es mehrere Sätze interner Unternehmensberechtigungen sowie Agenten-, Händlerberechtigungen usw. Es kann sein, dass es mehr als Hunderte verschiedener Menüs gibt. Eine solche Konfiguration ist zu ermüdend und fehleranfällig.

Die endgültige Lösung besteht darin, überhaupt keine Routing-Konfiguration lokal vorzunehmen. Die Anmeldeseite wird separat erstellt und nicht in der Vue-Komponente platziert. Nach erfolgreicher Anmeldung wird die Menüliste abgerufen Hintergrund, da die Anmeldung jetzt erfolgreich ist. Sie erhalten also ein völlig neues Menü. Konfigurieren Sie es nach dem erfolgreichen Abruf in der Route und instanziieren Sie dann vue. Dadurch entfällt die Notwendigkeit, eine Reihe von Routen lokal zu konfigurieren, und die Route wird vollständig auf dem Server konfiguriert.

Die einzige auf diese Weise gelöste Schwierigkeit besteht darin, dass für das Routing entsprechende Komponenten erforderlich sind. Daher speichern wir alle Komponenten in einem Objekt. In der vom Server zurückgegebenen Menüliste gibt es ein Feld zum Konfigurieren der Komponente Wenn die Routing-Konfiguration nach erfolgreichem Abruf generiert wird, laden Sie sie einfach mit router[menuName] direkt in diese Komponente, was sehr praktisch ist.

main.js-Codeausschnitt:

// 实例化Login类并初始化
 new Login(function (err, data) {
  if (err) {
   // 登录出错
  } else {
   // 登录成功
   init(data);
  }
 }).init();

const init = function (data) {
 // 先配置路由信息
 // componentConfigs 是本地的组件配置
 let routers = assignRouter(data.menus, componentConfigs);
 // 实例化路由
 router = new Router({routes: routers});
 // 再实例化vue
 new Vue({
  el: '#app',
  store,
  router,
  nprogress,
  ...App
 });
};

componentConfigs.js-Codeausschnitt:

export default {
 Common: {
  Admin: require('../../vue/pages/common/Admin'),
  Index: require('../../vue/pages/common/Index'),
  UpdatePassword: r => require.ensure([], () => r(require('../../vue/pages/users/UpdatePassword')), 'users')
 }
}

Der vom Server zurückgegebene Menü-JSON:

Das Metafeld enthält die Betriebsberechtigungen in der aktuellen Route

[{
      "path": "\/admin\/index",
      "name": "\u9996\u9875",
      "component": "Common.Index",
      "display": true,
      "icon": "icon-home"
    }, {
      "path": "\/admin\/updatePassword",
      "name": "\u4fee\u6539\u5bc6\u7801",
      "component": "Common.UpdatePassword",
      "display": false
    }, {
      "path": "\/admin\/commodity",
      "name": "\u5546\u54c1\u7ba1\u7406",
      "component": "Content",
      "display": true,
      "icon": "icon-class",
      "children": [{
        "path": "\/admin\/commodity\/publicWarehouse",
        "name": "\u516c\u5171\u5e93\u7ba1\u7406",
        "component": "Commodity.PublicWarehouse",
        "display": true,
        "meta": {"handleAuth": {"add": true, "edit": false, "del": true}}
      }, {
        "path": "\/admin\/commodity\/businessesWarehouse",
        "name": "\u5546\u5bb6\u5e93\u7ba1\u7406",
        "component": "Commodity.BusinessesWarehouse",
        "display": true,
        "meta": {"handleAuth": {"add": true, "edit": false, "del": true}}
      }]
    }]

Die Berechtigungen des Menüs sind ungefähr wie folgt: Schreiben Sie ein Authentifizierungs-Vue-Plug-In und fügen Sie dann alle Vorgänge unabhängig in Methoden ein @click, $auth( 'add', arg1, arg2, ...argN); Bestimmen Sie in $auth, ob this.$route.meta die Berechtigung hat, diesen Vorgang auszuführen. Wenn ja, rufen Sie this[authName].apply(null auf , arg);

Verwandte Empfehlungen:

Wie implementiert React die Menüberechtigungssteuerung?

Prinzipielle Analyse der praktischen Implementierung der PHP-Mitgliederberechtigungskontrolle_PHP-Tutorial

Basierend auf nativer PHP-Cross-Member-Berechtigungskontrolle_PHP-Tutorial

Das obige ist der detaillierte Inhalt vonVue-Router implementiert die Berechtigungskontrollmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!