Detaillierte Erläuterung der dynamischen Routing- und Berechtigungsüberprüfungsschritte von vue iview

Dieses Mal werde ich Ihnen die Schritte des dynamischen Routings und der Berechtigungsüberprüfung von vue iview ausführlich erläutern Schauen Sie mal rein. Es gibt viele Beispiele für das dynamische Hinzufügen von Routen in Vue auf Github. Nach der Bezugnahme auf einige Projekte hat dieses Projekt das dynamische Hinzufügen dynamischer Routen und die Menüaktualisierung basierend auf dem iview-Framework abgeschlossen. Um anderen Freunden in Not zu helfen, teile ich jetzt die Umsetzungslogik, um gemeinsam zu kommunizieren und zu lernen.

Github-Adresse

iview-dynamicRouter

Ziel erreichen

Nachdem der Client die Routing- und Berechtigungsdaten vom Server erhalten hat , Aktualisieren Sie die Routing- und Menülisten des Projekts und führen Sie die Berechtigungskontrolle durch.

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. die Seite

Fehlerbehandlung

, keine Berechtigungskontrollseite usw., während Berechtigungsrouten vom Server abgerufen werden und der Server entsprechende Routing-Daten entsprechend den Benutzeranforderungen ausgibt Berechtigungen und der Client Um diese Daten zum dynamischen Generieren und Hinzufügen von Routen zu verwenden, wird in diesem Artikel die zweite Methode angewendet. 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 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 Routenliste abzuschließen Der zweite Teil liegt daran, dass die Seiten-Tags unter dem

  -Framework und der
Breadcrumb-Navigation
• die App durchqueren müssenRouter Routing-Informationen erhalten, daher müssen wir auch Routing-Daten in Vuex für den globalen Zugriff speichern.
  Es ist wichtig zu beachten, dass, wenn es sich bei der 404-Seite um eine statische Route handelt, die dynamische Route beim ersten Aufrufen der Seite noch nicht geladen wurde und wenn die
Routing-Adresse

kann nicht gefunden werden, es wird standardmäßig gesprungen. Wenn Sie zur 404-Fehlerseite gelangen, ist die Erfahrung sehr schlecht, sodass die 404-Route nicht zuerst in die Routing-Regeln geschrieben und zusammen mit der dynamischen Route geladen wird.

router.addRoutes(routes) Der Hauptcode ist wie folgt implementiert: iview-admin Datenanforderung und Routingknotengenerierung

//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 die Benutzerberechtigung

hinzu Wenn der Knoten zum ersten Mal gerendert wird, stellen Sie fest, 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.

Die Hauptcode-Implementierung lautet wie folgt:

Fügen Sie das Berechtigungsfeld in den Routing-Daten hinzu, um die Berechtigungsliste zu speichern

//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"]
  },
  ...
 ]
 }
]

在遍历生成路由节点时，将 permission 字段数据存入路由节点 meta 属性中

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

定义全局命令组件，读取路由 permission 属性值获得权限列表，如果该不权限在权限列表中，则删除节点

//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;

权限组件使用示例：

<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>

全局注册组件

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

这种权限控制方法的优点就是，不管是管理配置还是页面处理逻辑都相对简单，没有很多重复的代码判断和节点处理，在参考对比了网上几种实现方式后，个人比较推荐这一种方法。

页面标签和面包屑导航

在我看来，页面标签和面包屑都属于系统中锦上添花的页面相关控件，提高页面管理的便捷性，在iview官方admin项目中已经实现了这两个组件。所以这个项目中，只是将其进行移植，实现了组件功能，没有深入了解，感兴趣的可以仔细研究。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

分享页面后跳转回首页

Vue自定义动态组件使用详解

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der dynamischen Routing- und Berechtigungsüberprüfungsschritte von vue iview. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!