Explication détaillée des étapes de routage dynamique et de vérification des autorisations de vue iview

Cette fois, je vais vous apporter une explication détaillée des étapes du routage dynamique et de la vérification des autorisations de vue iview. Quelles sont les précautions lors de l'utilisation du routage dynamique et de la vérification des autorisations de vue iview. Voici des cas pratiques, voyons. jetez un oeil.

Il existe de nombreux exemples d'ajout dynamique d'itinéraires dans Vue sur github Après avoir fait référence à certains projets, ce projet a complété l'ajout dynamique d'itinéraires dynamiques et l'actualisation du menu basé sur le framework iview. Afin d'aider d'autres amis dans le besoin, je partage désormais la logique de mise en œuvre Bienvenue pour communiquer et apprendre ensemble.

Adresse Github

iview-dynamicRouter

Atteindre l'objectif

Une fois que le client a obtenu les données de routage et d'autorisation du serveur , Actualisez les listes de routage et de menu du projet et effectuez le contrôle des 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 la page Gestion des erreurs , aucune page de contrôle des autorisations, etc., tandis que les itinéraires d'autorisation sont obtenus à partir du serveur, et le serveur émet les données de routage correspondantes en fonction de l'utilisateur. autorisations et le client Pour utiliser ces données pour générer et ajouter dynamiquement des routes, cet article adopte 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é comme une sous-page du composant principal mais n'est pas affiché 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 principalement ; effectuer 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

pour terminer l'ajout dynamique de la liste de routes ; Cela est en partie dû au fait que les balises de page sous le framework router.addRoutes(routes) et le iview-admin navigation du fil d'Ariane 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, et si l'

adresse de routage est introuvable, il sautera par défaut. Lorsque vous arrivez à la page d'erreur 404, l'expérience est très mauvaise, donc la route 404 n'est pas écrite en premier dans les règles de routage et est chargée avec la route 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 l'utilisateur autorisation d'opération. list, puis enregistrez la commande globale, lorsque le nœud Lors du rendu pour la première fois, déterminez si la page dispose d'autorisations. Si elle existe et que les paramètres transmis ne sont pas dans la liste des autorisations, supprimez le nœud directement.

Le code principal est implémenté comme suit :

Ajouter le champ d'autorisation dans les données de routage pour stocker 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"]
  },
  ...
 ]
 }
]

在遍历生成路由节点时，将 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自定义动态组件使用详解

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!