vue iview ermöglicht dynamisches Routing

Dieses Mal werde ich Ihnen dynamisches Routing mit vue iview vorstellen. Was sind die Vorsichtsmaßnahmen für dynamisches Routing mit vue iview? Hier ist ein praktischer Fall.

Ziel erreichen

Nachdem der Client die Routing- und Berechtigungsdaten vom Server erhalten hat, aktualisiert er die Routing- und Menüliste des Projekts und steuert die Berechtigungen.

Projektbasis

• Grundgerüst: Offizielles Vorlagenprojekt der iview-Komponentenbibliothek. Das Vorlagenzweigprojekt von iview-admin. Dieses Projekt ist das Grundgerüst von iview-admin Code. Projektadresse: iview-admin

Implementierungslogik

Dynamic Routing Control Loading

Allgemein gesagt Es gibt zwei Arten der dynamischen Routing-Steuerung: Die eine besteht darin, alle Routing-Daten in lokalen Dateien zu speichern und dann die Berechtigungsinformationen des Benutzers vom Server abzurufen. Wenn die Route aufgerufen wird, wird ein Berechtigungsbeurteilungs-Hook hinzugefügt Ist nicht in der Berechtigungsliste enthalten, ist das Springen verboten. Die andere besteht darin, nur grundlegende Routen lokal zu speichern, z. B. Seiten zur Fehlerbehandlung, keine Seiten zur Berechtigungskontrolle usw., während Berechtigungsrouten vom Server abgerufen werden. Der Server gibt entsprechende Routing-Daten basierend auf den Berechtigungen des Benutzers aus und der Client verwendet diese Daten für das Routing werden dynamisch generiert und hinzugefügt. Dieser Artikel verwendet die zweite Methode.

Das iview-admin-Projekt unterteilt das Routing in drei Typen:

• Seitenrouting, das nicht als Unterseite der Hauptkomponente angezeigt wird, wie z. B. Login, 404, 403 und andere Fehlerseiten Routing; wird als Unterseite der Hauptkomponente angezeigt, wird aber nicht im linken Menü angezeigt 🎜>

wird als Hauptkomponente verwendet. Die Unterseite wird angezeigt und die Routing-AppRouter wird im linken Menü angezeigt.
Nachdem wir die Routing-Daten erhalten haben Der erste Teil besteht darin, die Daten mithilfe der Komponentenmethode zu durchlaufen und asynchron zu laden, die jedem Routing-Knoten entsprechenden Komponenten zu laden und dann die dynamische Hinzufügung der Routing-Liste abzuschließen Der zweite Teil liegt daran, dass die Seiten-Tags und die Breadcrumb-Navigation unter dem
• -Framework den appRouter durchlaufen müssen, um Routing-Informationen zu erhalten. Daher müssen wir Routing-Daten auch in Vuex für den globalen Zugriff speichern.
  Es ist wichtig zu beachten, dass die dynamische Route noch nicht geladen wurde, wenn es sich bei der 404-Seite um eine statische Route handelt Springt standardmäßig zur 404-Fehlerseite. Erfahrung: Es ist sehr schlecht, daher wird die 404-Route nicht zuerst in die Routing-Regeln geschrieben und zusammen mit dem dynamischen Routing geladen.

Der Hauptcode ist wie folgt implementiert:

router.addRoutes(routes) Datenanforderung und Routingknotengenerierung iview-admin

//util.js
//生成路由
util.initRouter = function (vm) {
 const constRoutes = [];
 const otherRoutes = [];
 // 404路由需要和动态路由一起注入
 const otherRouter = [{
  path: '/*',
  name: 'error-404',
  meta: {
   title: '404-页面不存在'
  },
  component: 'error-page/404'
 }];
 // 模拟异步请求
 util.ajax('menu.json').then(res => {
  var menuData = res.data;
  util.initRouterNode(constRoutes, menuData);
  util.initRouterNode(otherRoutes, otherRouter);
  // 添加主界面路由
  vm.$store.commit('updateAppRouter', constRoutes.filter(item => item.children.length > 0));
  // 添加全局路由
  vm.$store.commit('updateDefaultRouter', otherRoutes);
  // 刷新界面菜单
  vm.$store.commit('updateMenulist', constRoutes.filter(item => item.children.length > 0));
 });
};
//生成路由节点
util.initRouterNode = function (routers, data) {
 for (var item of data) {
  let menu = Object.assign({}, item);
  menu.component = lazyLoading(menu.component);
  if (item.children && item.children.length > 0) {
   menu.children = [];
   util.initRouterNode(menu.children, item.children);
  }
  //添加权限判断
  meta.permission = menu.permission ? menu.permission : null;
  //添加标题
  meta.title = menu.title ? menu.title : null;
  menu.meta = meta;
 }
};

Dynamisches Laden von Komponenten

//lazyLoading.js
export default (url) =>()=>import(`@/views/${url}.vue`)
Store缓存实现
//app.js
 // 动态添加主界面路由，需要缓存
updateAppRouter (state, routes) {
 state.routers.push(...routes);
 router.addRoutes(routes);
},
// 动态添加全局路由，不需要缓存
updateDefaultRouter (state, routes) {
 router.addRoutes(routes);
},
// 接受前台数组，刷新菜单
updateMenulist (state, routes) {
 state.menuList = routes;
}

Zum Schluss in main. Aufrufen von

//main.js
 mounted () {
 // 调用方法，动态生成路由
 util.initRouter(this);
 }

Berechtigungskontrolle in js

Ähnlich wie bei der dynamischen Routing-Implementierung wird die Betriebsberechtigungskontrolle im Allgemeinen in zwei Typen unterteilt Die Seite wird ohne Steuerungsberechtigungen angezeigt. Wenn der Vorgang dann initiiert wird, werden die Berechtigungen beurteilt. Wenn der Benutzer über die Berechtigungen für den Vorgang verfügt, wird er andernfalls daran erinnert Die zweite Möglichkeit besteht darin, dass beim Laden der Seite die Berechtigungen beurteilt werden und Vorgänge ohne Berechtigungen nicht angezeigt werden. Ich bevorzuge die zweite Methode, die den Benutzer nicht in die Irre führt. Ich persönlich bin der Meinung, dass das, was der Benutzer sieht, bedienbar sein sollte, sonst wäre es sehr unangenehm, auf die Schaltfläche zu klicken und dann die Meldung zu erhalten, dass keine Berechtigung vorliegt.

Die Quelle der Idee für dieses Projekt finden Sie im Referenz-Blogbeitrag. Die spezifische Idee des ursprünglichen Bloggers lautet: Fügen Sie im Metafeld der Routing-Struktur eine Liste der Benutzerbetriebsberechtigungen hinzu und registrieren Sie sich Bestimmen Sie beim ersten Rendern des Knotens, ob die Seite über Berechtigungen verfügt. Wenn sie vorhanden ist und die übergebenen Parameter nicht in der Berechtigungsliste enthalten sind, löschen Sie den Knoten direkt.

Der Hauptcode ist wie folgt implementiert:

Fügen Sie das Berechtigungsfeld in den Routing-Daten hinzu und speichern Sie die Berechtigungsliste

//menu.json，模拟异步请求数据
[
 {
 "path": "/groupOne",
 "icon": "ios-folder",
 "name": "system_index",
 "title": "groupOne",
 "component": "Main",
 "children": [
  {
  "path": "pageOne",
  "icon": "ios-paper-outline",
  "name": "pageOne",
  "title": "pageOne",
  "component": "group/page1/page1",
  "permission":["del"]
  },
  ...
 ]
 }
]

Speichern Sie beim Durchlaufen, um Routing-Knoten zu generieren, die Berechtigung Felddaten im Routing-Knoten

//util.js
//生成路由节点
util.initRouterNode = function (routers, data) {
 for (var item of data) {
  ....
  //添加权限判断
  meta.permission = menu.permission ? menu.permission : null;
  ...
 }
};

im Metaattribut definieren die globale Befehlskomponente, lesen den Wert des Routenberechtigungsattributs, um die Berechtigungsliste zu erhalten. Wenn die Berechtigung nicht in der Berechtigungsliste enthalten ist, löschen Sie den Knoten

//hasPermission.js 
const hasPermission = {
 install (Vue, options) {
  Vue.directive('hasPermission', {
   bind (el, binding, vnode) {
    let permissionList = vnode.context.$route.meta.permission;
    if (permissionList && permissionList.length && !permissionList.includes(binding.value)) {
     el.parentNode.removeChild(el);
    }
   }
  });
 }
};
export default hasPermission;

Beispiel für die Verwendung einer Berechtigungskomponente:

<template>
 <p>
  <h1>page1</h1>
  <Button v-hasPermission="&#39;add&#39;">添加</Button>
  <Button v-hasPermission="&#39;edit&#39;">修改</Button>
  <Button v-hasPermission="&#39;del&#39;">删除</Button>
 </p>
</template>

Globale Registrierungskomponente

// main.js
import hasPermission from '@/libs/hasPermission.js';
Vue.use(hasPermission);

Der Vorteil dieser Berechtigungskontrollmethode besteht darin, dass sowohl die Verwaltungskonfiguration als auch die Seitenverarbeitungslogik berücksichtigt werden sind relativ einfach, ohne viele wiederholte Codebeurteilungen und Für die Knotenverarbeitung empfehle ich persönlich diese Methode, nachdem ich mehrere Implementierungsmethoden im Internet gelesen und verglichen habe.

Seiten-Tags und Breadcrumb-Navigation

Meiner Meinung nach sind Seiten-Tags und Breadcrumbs das i-Tüpfelchen im System, seitenbezogene Steuerelemente, verbessern den Komfort der Seitenverwaltung, in iview Diese beiden Komponenten wurden im offiziellen Admin-Projekt implementiert. Deshalb haben wir es in diesem Projekt nur transplantiert und die Komponentenfunktionen implementiert. Wir hatten kein tiefgreifendes Verständnis davon. Wer interessiert ist, kann es sorgfältig studieren.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

sortSo sortieren Sie Sohndaten

Vues Attribut defineProperty verwendet

Das obige ist der detaillierte Inhalt vonvue iview ermöglicht dynamisches Routing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!