vue iview réalise un routage dynamique

Cette fois, je vais vous présenter le routage dynamique avec vue iview Quelles sont les précautions à prendre pour le routage dynamique avec vue iview ? Voici un cas pratique, jetons un oeil.

Atteindre l'objectif

Une fois que le client a obtenu les données de routage et d'autorisation du serveur, il actualise la liste de routage et de menu du projet et contrôle les autorisations.

Base du projet

• Cadre de base : projet de modèle officiel de la bibliothèque de composants iview Projet de branche de modèles d'iview-admin, ce projet est le framework de base d'iview-admin code. Adresse du projet : iview-admin

Logique de mise en œuvre

Chargement du contrôle de routage dynamique

Dit généralement qu'il existe deux types de contrôle de routage dynamique : l'un consiste à stocker toutes les données de routage dans des fichiers locaux, puis à obtenir les informations d'autorisation de l'utilisateur du serveur lorsque l'itinéraire saute, ajoutez un crochet de jugement d'autorisation si la page à laquelle l'utilisateur accède. n'est pas Dans la liste des autorisations, sauter est interdit. L'autre consiste à stocker localement uniquement les itinéraires de base, tels que les pages de gestion des erreurs, aucune page de contrôle des autorisations, etc., tandis que les itinéraires d'autorisation sont obtenus du serveur. Le serveur émet les données de routage correspondantes en fonction des autorisations de l'utilisateur, et le client les utilise. données pour le routage Généré et ajouté dynamiquement, cet article utilise la deuxième méthode.

Le projet iview-admin divise le routage en trois types :

• Le routage des pages qui ne s'affiche pas comme une sous-page du composant principal, comme la connexion, 404, 403 et autres pages d'erreur Routage ;

• est affichée comme une sous-page du composant principal mais n'est pas affichée dans le menu de gauche autreRouter, comme le routage de la page d'accueil

• est utilisé comme composant principal. La sous-page est affichée et l'application de routageRouter est affichée dans le menu de gauche

Après avoir obtenu les données de routage, nous effectuer principalement deux parties de l'opération. La première partie consiste à parcourir les données et à les charger de manière asynchrone à l'aide de la méthode des composants, à charger les composants correspondant à chaque nœud de routage, puis à utiliser router.addRoutes(routes) pour terminer l'ajout dynamique de la liste de routage ; La deuxième partie est due au fait que les balises de page et le fil d'Ariane dans le cadre iview-admin doivent traverser l'appRouter pour obtenir des informations de routage, nous devons donc également stocker les données de routage dans vuex pour un accès global.

Il est important de noter que si la page 404 est une route statique, alors lorsque vous entrez dans la page pour la première fois, la route dynamique n'a pas encore été chargée. Si l'adresse de routage est introuvable, elle est introuvable. passera à la page d'erreur 404 par défaut. Expérience C'est très mauvais, donc la route 404 n'est pas écrite en premier dans les règles de routage et est chargée avec le routage dynamique.

L'implémentation principale du code est la suivante :

Requête de données et génération de nœuds de routage

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

Composants de chargement dynamique

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

Enfin, appelez

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

Contrôle des autorisations

Semblable à la méthode de mise en œuvre du routage dynamique, le contrôle des autorisations d'opération est généralement divisé en deux types. la page est affichée sans contrôle des autorisations. Toutes les opérations, telles que les boutons, sont affichées. Ensuite, lorsque l'opération est lancée, les autorisations sont jugées si l'utilisateur dispose des autorisations pour l'opération, sinon, il est rappelé à l'utilisateur. il n'a aucune autorisation. La seconde est Lorsque la page est chargée, les autorisations sont jugées et les opérations sans autorisations ne sont pas affichées. Je préfère la deuxième méthode, qui n'induira pas l'utilisateur en erreur. Je pense personnellement que ce que l'utilisateur voit doit être exploitable, sinon il sera très inconfortable de cliquer sur le bouton et d'être ensuite informé qu'il n'y a pas d'autorisation.

La source de l'idée de ce projet se trouve dans le billet de blog de référence. L'idée spécifique du blogueur original est la suivante : dans le champ méta de la structure de routage, ajoutez une liste d'autorisations d'opération des utilisateurs, puis enregistrez-vous. la commande globale. Lorsque le nœud est rendu pour la première fois, déterminez si la page dispose d'autorisations. Si elle existe et que les paramètres transmis ne figurent pas dans la liste des autorisations, supprimez le nœud directement.

Le code principal est implémenté comme suit :

Ajoutez le champ d'autorisation dans les données de routage et stockez la liste d'autorisations

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

Lors de la traversée pour générer des nœuds de routage, stockez les données du champ d'autorisation Définissez le composant de commande global dans l'attribut méta du nœud de routage

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

Lisez la valeur de l'attribut d'autorisation de routage pour obtenir la liste des autorisations. Si l'autorisation ne figure pas dans la liste des autorisations, supprimez le nœud.

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

Exemples d'utilisation des composants d'autorisation :

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

Composant d'enregistrement global

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

L'avantage de cette méthode de contrôle des autorisations est que la configuration de gestion et la logique de traitement des pages sont relativement simples, sans beaucoup de jugements de code et de traitement de nœuds répétés. Après avoir fait référence et comparé plusieurs méthodes d'implémentation sur Internet, je recommande personnellement cette méthode.

Balises de page et navigation dans le fil d'Ariane

À mon avis, les balises de page et le fil d'Ariane sont la cerise sur le gâteau du système, les contrôles liés aux pages, améliorent la commodité de la gestion des pages, dans iview Ces deux composants ont été implémentés dans le projet d'administration officiel. Par conséquent, dans ce projet, nous l'avons simplement transplanté et implémenté les fonctions des composants. Nous n'en avons pas une compréhension approfondie. Ceux qui sont intéressés peuvent l'étudier attentivement.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

sortComment trier les données des fils

L'attribut DefinProperty de Vue utilise

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!