Explication détaillée des étapes pour implémenter le menu de routage d'autorisations dynamique avec vue addRoutes

Cette fois, je vais vous apporter une explication détaillée des étapes pour implémenter le menu de routage dynamique des autorisations avec vue addRoutes. Quelles sont les précautions pour implémenter le menu de routage dynamique des autorisations avec vue addRoutes. Voici un cas pratique. , jetons un coup d'oeil.

Exigences

Récemment, j'ai repris un système de gestion backend et je dois réaliser l'effet de l'extraction du menu de navigation du backend ; cela dépend des autorisations de l'utilisateur connecté. Le menu de navigation extrait est également différent, et l'interface utilisable est également différente.

Problème

Parce que le système de gestion en arrière-plan est prêt à utiliser la combinaison de vue+vue-router+element-ui+vuex, mais L'application monopage a instancié vue-router et l'a injecté dans l'instance de vue avant d'entrer dans la page, il n'y a donc aucun moyen de re-personnaliser le routage lors de l'entrée dans la page de connexion. Après de nombreuses recherches, j'ai découvert que vue-router fournissait la méthode addRoutes pour ajouter des routes dans la version 2.0, et une lueur d'espoir est apparue.

Après beaucoup de travail acharné, la fonction a finalement été implémentée. Je l'ai enregistrée pour une révision facile, et j'espère qu'elle pourra aider les camarades qui ont les mêmes besoins.

Idées

1. Configurez d'abord une adresse de routage fixe localement, telle que la connexion, 404 pages, comme suit :

import Vue from 'vue'
import Router from 'vue-router'
import store from '@/vuex/store'
Vue.use(Router)
let router = new Router({
 routes: [
  {
   path: '/login',
   name: 'login',
   meta: {requireAuth: false},
   // 模块使用异步加载
   component: (resolve) => require(['../components/login/login.vue'], resolve)
  }]
})
// 拦截登录，token验证
router.beforeEach((to, from, next) => {
 if (to.meta.requireAuth === undefined) {
  if (store.state.token) {
   next()
  } else {
   next({
    path: '/login'
   })
  }
 } else {
  next()
 }
})
export default router

Ce n'est qu'après avoir configuré ces itinéraires fixes que nous pouvons accéder à la page de connexion, sinon nous ne pourrons pas continuer.

2. Ensuite, l'étape importante est de se mettre d'accord avec le vétéran du back-end sur les informations de la liste des menus d'autorisations qui doivent être renvoyées. Analysons d'abord la structure de routage dont nous avons besoin. Ici, je prends mon propre routage. un exemple. Si je

définis directement l'itinéraire moi-même, il aurait la structure suivante :

let router = new Router({
 routes: [
  {
   path: '/login',
   name: 'login',
   meta: {requireAuth: false},
   component: (resolve) => require(['../components/login/login.vue'], resolve)
  }，
  {
    path: '/',
    redirect: '/layout'
  },
  {
    path: '/layout',
    component: (resolve) => require(['../layout.vue'], resolve),
    children: [
      {
        path: 'index', 
        meta: {
          type: '1',    //控制是否显示隐藏 1显示，2隐藏
          code: 00010001, // 后面需要控制路由高亮
          title: '首页',  // 菜单名称
          permissonList: [] // 权限列表
        }
        component: (resolve) => require(['@/components/index/index.vue'], resolve)
      },
      {
      ...
      }   
    ]
  }]
})

D'après l'analyse structurelle ci-dessus, en fait, l'itinéraire qui a vraiment besoin de

configuration dynamique est en fait / La partie enfants sous la mise en page, le backend doit donc nous renvoyer un tableau contenant toutes les routes

Dans les données renvoyées, la rootList est la. liste de navigation de premier niveau. La navigation de premier niveau n'a en fait pas de

fonction de routage Elle est uniquement utilisée comme déclencheur pour changer le menu secondaire qui contient les informations de routage. nous avons vraiment besoin.

3. Après avoir obtenu les informations de routage des autorisations, nous devons traiter les données localement et les assembler dans les données dont nous avons besoin :

// 登录
   login () {
    let params = {
     account: this.loginForm.username,
     password: encrypt(this.loginForm.password)
    }
    this.loading = true
    this.$http.post(this.$bumng + '/login', this.$HP(params))
     .then((res) => {
      this.loging = false
      console.info('菜单列表：', res)
      if (res.resultCode === this.$state_ok) {
       // 合并一级菜单和二级菜单，便于显示
       let menus = handleMenu.mergeSubInRoot(res.rootList, res.subList)
       // 本地化处理好的菜单列表
       this.saveRes({label: 'menuList', value: menus})
       // 根据subList处理路由
       let routes = handleMenu.mergeRoutes(res.subList)
       // 本地化subList，便于在刷新页面的时候重新配置路由
       this.saveRes({label: 'subList', value: res.subList})
       // 防止重复配置相同路由
       if (this.$router.options.routes.length <= 1) {
        this.$router.addRoutes(routes)
        // this.$router不是响应式的，所以手动将路由元注入路由对象
        this.$router.options.routes.push(routes)
       }
       this.$router.replace(&#39;/layout/index&#39;)
      }
     })
     .catch((err) => {
      this.loging = false
      console.error('错误：', err)
     })
   },

Méthodes de traitement des listes de menus et des sous-listes : mergeSubInRoot et mergeRoutes

const routes = [
 {
  path: '/',
  redirect: '/layout'
 },
 {
  path: '/layout',
  component: (resolve) => require(['../layout.vue'], resolve),
  children: []
 }
]
export default {
 /**
  * 合并主菜单和子菜单
  * @param: rootList [Array] 主菜单列表
  * @param: subList [Array] 子菜单
  * */
 mergeSubInRoot (roots, subs) {
  if (roots && subs) {
   for (let i = 0; i < roots.length; i++) {
    let rootCode = roots[i].code
    roots[i].children = []
    for (let j = 0; j < subs.length; j++) {
     if (rootCode === subs[j].code.substring(0, 4)) {
      roots[i].children.push(subs[j])
     }
    }
   }
  }
  return roots
 },
 /**
  * 合并远程路由到本地路由
  * @param: subList [Array] 远程路由列表
  * @param: routes [Array] 本地路由列表
  * */
 mergeRoutes (subs) {
  if (subs) {
   for (let i = 0; i < subs.length; i++) {
    let temp = {
     path: subs[i].actUrl,
     name: subs[i].actUrl,
     component: (resolve) => require([`@/components/${subs[i].component}.vue`], resolve),
     meta: {
      type: subs[i].type,
      code: subs[i].code,
      title: subs[i].name,
      permissionList: subs[i].permissionList
     }
    }
    routes[1].children.push(temp)
   }
  }
  return routes
 }
}

Jusqu'à présent, nous avons configuré avec succès le routage des autorisations dans le routage local. Ma connexion système est la suivante

Suivez. up Optimiser

1. Affichage de la liste des menus et changement de navigation secondaire :

<template>
  <p class="mainMenu">
   <el-menu
    class="menubar"
    mode="horizontal"
    :default-active="activeCode"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <el-menu-item :index="item.code | splitCode" v-for="item in menuList" :key="item.code" @click="switchSubMenu(item)" v-if="item.code !== &#39;0008&#39;">
     <i :class="`iconfont icon-${item.imgUrl}`"></i>
     <span slot="title">{{item.name}}</span>
    </el-menu-item>
   </el-menu>
  </p>
</template>
<script type="text/ecmascript-6">
 import {mapState, mapMutations} from 'vuex'
 export default {
  name: 'menu',
  data () {
   return {
    msg: 'Welcome to Your Vue.js App'
   }
  },
  computed: {
   ...mapState(['menuList']),
   activeCode () {
     // 通过code保证在切换字路由的情况下一级路由也是高亮显示
    return this.$route.meta.code.substring(0, 4)
   }
  },
  methods: {
   ...mapMutations(['saveRes']),
   // 切换二级路由
   switchSubMenu (route) {
    console.info('路由：', route)
    if (route.actUrl !== 'index') {
     // 用currentSubMenu控制二级路由数据 
     this.saveRes({label: 'currentSubMenu', value: route.children})
     this.$router.push(`/layout/${route.children[0].actUrl}`)
    } else {
     // 不存在二级路由隐藏二级 
     this.saveRes({label: 'currentSubMenu', value: ''})
     this.$router.push(`/layout/${route.actUrl}`)
    }
   }
  },
  filters: {
   splitCode (code) {
    return code.substring(0, 4)
   }
  }
 }
</script>

2. Empêcher la perte de l'itinéraire de rafraîchissement puisque l'application d'une seule page ; être actualisé lors de l'actualisation. Après la réinitialisation, toutes les routes configurées seront perdues. Une fois retournées avant la libération, seules les routes configurées localement peuvent être sautées. A ce moment, nous pouvons exécuter le code suivant dans app.vue (ps : peu importe où le rafraîchissement est effectué, app.vue sera exécuté) :

<script>
 import {decrypt} from '@/libs/AES'
 import handleMenu from '@/router/handleMenu'
 export default {
  name: 'app',
  created () {
   // 当this.$router.options.routes的长度为1，且本地缓存存在菜单列表的时候才重新配置路由
   if (this.$router.options.routes.length <= 1 && sessionStorage.getItem('subList')) {
    let subList = JSON.parse(decrypt(sessionStorage.getItem('subList')))
    let routes = handleMenu.mergeRoutes(subList)
    this.$router.addRoutes(routes)
    // this.$router不是响应式的，所以手动将路由元注入路由对象
    this.$router.options.routes.push(routes)
   }
  }
 }
</script>

De cette façon, même s'il est rafraîchi, le routage sera reconfiguré.

3. Concernant le contrôle au niveau des boutons de page, vous pouvez personnaliser une commande pour ce faire. Parce que nous avons mis la liste des autorisations dans le méta-objet de l'itinéraire correspondant, nous pouvons facilement revenir aux autorisations dont dispose l'utilisateur actuel sur la page actuelle sur chaque page

Référez-vous à la documentation officielle pour les instructions personnalisées

Conclusion

Après avoir terminé le travail, grâce à la méthode addRoutes ajoutée à vue-router2, sinon

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 :

Explication détaillée des étapes pour générer une chaîne aléatoire de longueur personnalisée en php

Explication du recadrage d'image php et exemples d'utilisation de vignettes

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!