So laden Sie das Berechtigungsverwaltungsmodul (ausführliches Tutorial)

In diesem Artikel wird ausführlich erläutert, wie VUE-Komponenten dynamisch in das Berechtigungsverwaltungsmodul geladen werden. Freunde, die diesbezüglich Bedarf haben, können mitmachen und lernen.

In diesem Artikel werden wir hauptsächlich über die Anmeldung und das dynamische Laden von Komponenten sprechen.

Anmeldestatus speichern

Wenn sich ein Benutzer erfolgreich anmeldet, müssen die Anmeldeinformationen des aktuellen Benutzers zur späteren Verwendung lokal gespeichert werden. Die spezifische Implementierung lautet wie folgt:

Bei erfolgreicher Anmeldung werden Daten gespeichert

Nachdem der Anmeldevorgang erfolgreich ausgeführt wurde, werden die Daten über den Festschreibungsvorgang an den Speicher übermittelt. Der Kerncode lautet wie folgt:

Der Kerncode von

this.postRequest('/login', {
  username: this.loginForm.username,
  password: this.loginForm.password
}).then(resp=> {
  if (resp && resp.status == 200) {
  var data = resp.data;
  _this.$store.commit('login', data.msg);
  var path = _this.$route.query.redirect;
  _this.$router.replace({path: path == '/' || path == undefined ? '/home' : path});
  }
});

store

store lautet wie folgt:

export default new Vuex.Store({
 state: {
  user: {
   name: window.localStorage.getItem('user' || '[]') == null ? '未登录' : JSON.parse(window.localStorage.getItem('user' || '[]')).name,
   userface: window.localStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).userface
  }
 },
 mutations: {
  login(state, user){
   state.user = user;
   window.localStorage.setItem('user', JSON.stringify(user));
  },
  logout(state){
   window.localStorage.removeItem('user');
  }
 }
});

Um Probleme zu reduzieren, wird der Nachdem sich der Benutzer erfolgreich angemeldet hat, werden die Daten in localStorage gespeichert (um zu verhindern, dass der Benutzer drückt. Daten gehen nach der F5-Aktualisierung verloren). Sie werden in Form einer Zeichenfolge gespeichert und beim Abrufen in JSON konvertiert. Wenn sich der Benutzer abmeldet, löschen Sie die Daten in localStorage.

Dynamisches Laden von Komponenten

Im Berechtigungsverwaltungsmodul ist dies der Kern des Frontends.

Kernidee

Nachdem sich der Benutzer erfolgreich angemeldet hat, sendet der Benutzer vor dem Aufrufen der Startseite eine Anfrage an den Server, um die aktuellen Menüinformationen und Komponenteninformationen abzurufen . Der Server gibt die Rolle des aktuellen Benutzers und die der Rolle entsprechenden Ressourcen eine JSON-Zeichenfolge mit dem folgenden Format zurück:

[
  {
    "id": 2,
    "path": "/home",
    "component": "Home",
    "name": "员工资料",
    "iconCls": "fa fa-user-circle-o",
    "children": [
      {
        "id": null,
        "path": "/emp/basic",
        "component": "EmpBasic",
        "name": "基本资料",
        "iconCls": null,
        "children": [],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      },
      {
        "id": null,
        "path": "/emp/adv",
        "component": "EmpAdv",
        "name": "高级资料",
        "iconCls": null,
        "children": [],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      }
    ],
    "meta": {
      "keepAlive": false,
      "requireAuth": true
    }
  }
]

Nach dem Abrufen dieser Zeichenfolge führt das Frontend zwei Dinge aus: 1. Fügen Sie dynamisch hinzu json zur aktuellen Route; 2. Speichern Sie die Daten im Store, und dann rendert jede Seite das Menü basierend auf den Daten im Store.

Die Kernidee ist nicht schwierig. Werfen wir einen Blick auf die Umsetzungsschritte.

Zeitpunkt der Datenanforderung

Dies ist sehr wichtig.

Einige Freunde fragen sich vielleicht, warum das so schwierig ist. Kann ich es nicht einfach anfordern, nachdem ich mich erfolgreich angemeldet habe? Ja, es ist möglich, nach erfolgreicher Anmeldung Menüressourcen anzufordern. Nachdem die Anfrage eingegangen ist, speichern wir sie für die nächste Verwendung. Es tritt jedoch ein weiteres Problem auf, wenn der Benutzer nach erfolgreicher Anmeldung auf ein bestimmtes untergeordnetes Element klickt Melden Sie sich an, Seite, geben Sie die Unterseite ein und drücken Sie dann F5 zum Aktualisieren. Zu diesem Zeitpunkt ist es GG, da die Daten im Speicher nach der Aktualisierung mit F5 verschwunden sind und wir die Menüressourcen nur einmal beim Anmelden angefordert haben ist erfolgreich. Es gibt zwei Ideen, um dieses Problem zu lösen: 1. Speichern Sie die Menüressourcen nicht im Store, sondern in localStorage, damit die Daten auch nach der Aktualisierung mit F5 noch vorhanden sind. 2. Direkt in der gemounteten Methode Gehen Sie auf jeder Seite einmal zu „Menüressourcen laden“.

Da Menüressourcen sehr sensibel sind, ist es am besten, sie nicht lokal zu speichern. Deshalb habe ich Option 1 aufgegeben, aber Option 2 ist etwas arbeitsintensiv, also habe ich einen Schritt unternommen, um sie zu vereinfachen Navigationsschutz im Routing.

Route Navigation Guard

Meine spezifische Implementierung ist wie folgt: Erstellen Sie zunächst ein Routen-Array im Store, bei dem es sich um ein leeres Array handelt, und aktivieren Sie dann den globalen Routen-Guard wie folgt:

router.beforeEach((to, from, next)=> {
  if (to.name == 'Login') {
   next();
   return;
  }
  var name = store.state.user.name;
  if (name == '未登录') {
   if (to.meta.requireAuth || to.name == null) {
    next({path: '/', query: {redirect: to.path}})
   } else {
    next();
   }
  } else {
   initMenu(router, store);
   next();
  }
 }
)

Der Code hier ist sehr kurz, lassen Sie mich eine einfache Erklärung geben:

1 Wenn die Seite, zu der Sie gehen möchten, die Anmeldeseite ist, gibt es dazu nichts zu sagen gehen Sie direkt.

2. Wenn es sich nicht um eine Anmeldeseite handelt, erhalte ich zunächst den aktuellen Anmeldestatus aus dem Store. Wenn ich nicht angemeldet bin, verwende ich das requireAuth-Attribut des Meta-Attributs im Routing, um festzustellen, ob die Seite angezeigt werden soll Wenn ja, springen Sie zurück zur Anmeldeseite und übergeben Sie gleichzeitig den Pfad der Seite, zu der Sie gehen möchten, als Parameter an die Anmeldeseite, damit Sie zum Ziel springen können Wenn Sie sich nicht anmelden müssen, gehen Sie direkt zur Seite (tatsächlich gibt es in diesem Projekt nur die Anmeldeseite). Wenn Sie bereits angemeldet sind, initialisieren Sie zuerst das Menü und springen dann.

Die Funktionsweise des Initialisierungsmenüs ist wie folgt:

export const initMenu = (router, store)=> {
 if (store.state.routes.length > 0) {
  return;
 }
 getRequest("/config/sysmenu").then(resp=> {
  if (resp && resp.status == 200) {
   var fmtRoutes = formatRoutes(resp.data);
   router.addRoutes(fmtRoutes);
   store.commit('initMenu', fmtRoutes);
  }
 })
}
export const formatRoutes = (routes)=> {
 let fmRoutes = [];
 routes.forEach(router=> {
  let {
   path,
   component,
   name,
   meta,
   iconCls,
   children
  } = router;
  if (children && children instanceof Array) {
   children = formatRoutes(children);
  }
  let fmRouter = {
   path: path,
   component(resolve){
    if (component.startsWith("Home")) {
     require(['../components/' + component + '.vue'], resolve)
    } else if (component.startsWith("Emp")) {
     require(['../components/emp/' + component + '.vue'], resolve)
    } else if (component.startsWith("Per")) {
     require(['../components/personnel/' + component + '.vue'], resolve)
    } else if (component.startsWith("Sal")) {
     require(['../components/salary/' + component + '.vue'], resolve)
    } else if (component.startsWith("Sta")) {
     require(['../components/statistics/' + component + '.vue'], resolve)
    } else if (component.startsWith("Sys")) {
     require(['../components/system/' + component + '.vue'], resolve)
    }
   },
   name: name,
   iconCls: iconCls,
   meta: meta,
   children: children
  };
  fmRoutes.push(fmRouter);
 })
 return fmRoutes;
}

Bestimmen Sie im Initialisierungsmenü zunächst, ob die Daten im Speicher vorhanden sind. Dies bedeutet, dass dieser Sprung normal ist springen, nicht der Benutzer. Drücken Sie F5 oder geben Sie eine Adresse direkt in die Adressleiste ein. Andernfalls gehen Sie zum Lademenü. Nachdem Sie das Menü aufgerufen haben, verwenden Sie zunächst die formatRoutes-Methode, um den vom Server zurückgegebenen JSON in das vom Router benötigte Format zu konvertieren. Hier konvertieren wir hauptsächlich die Komponente, da die vom Server zurückgegebene Komponente eine Zeichenfolge ist, aber was im Router benötigt wird ist eine Komponente, daher laden wir die erforderlichen Komponenten einfach dynamisch in die formatRoutes-Methode. Nach erfolgreicher Vorbereitung des Datenformats werden die Daten einerseits im Speicher gespeichert und andererseits mithilfe der addRoutes-Methode im Routing dynamisch zum Routing hinzugefügt.

Menü-Rendering

Zuletzt holen Sie sich auf der Startseite den Menü-JSON aus dem Store und rendern ihn in ein Menü. Der entsprechende Code kann auf der Startseite angezeigt werden. vue. Keine Notwendigkeit, ins Detail zu gehen.

OK, danach können verschiedene Benutzer nach erfolgreicher Anmeldung unterschiedliche Menüs sehen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So erhalten Sie den Wert in select in vue.js (ausführliches Tutorial)

in Vue2.0 Wie Filter in Reihe verwenden?

Wie kehre ich über die Tween-Methode im Vue-Projekt nach oben zurück?

Wie kann ich mit Vue feststellen, dass der Eingabeinhalt ausschließlich aus Leerzeichen besteht?

Wie kann ich mit js feststellen, dass das Eingabefeld kein Leerzeichen oder Nullwert sein darf?

Das obige ist der detaillierte Inhalt vonSo laden Sie das Berechtigungsverwaltungsmodul (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!