Comment utiliser vue addRoutes pour implémenter le menu de routage d'autorisations dynamique

Cette fois, je vais vous montrer comment utiliser vue addRoutes pour implémenter un menu de routage d'autorisations dynamique, et quelles sont les précautions à prendre pour utiliser vue addRoutes pour implémenter un menu de routage d'autorisations dynamique. Ce qui suit est un cas pratique, prenons. un regard.

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 moi-même l'itinéraire, il aura 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 doit vraiment être configuré dynamiquement est en fait la partie enfants sous / mise en page, donc le backend doit être renvoyé à Nous avons juste besoin d'un tableau contenant toutes les routes

Dans les données renvoyées, la rootList est une liste de navigation de premier niveau. la navigation de premier niveau n'a en fait aucune fonction de routage et est simplement utilisée comme commutateur. Le déclencheur du menu secondaire, subList, correspond aux informations de routage dont nous avons réellement 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 le fera ; ê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

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 :

Étapes détaillées pour créer un environnement de développement React à l'aide de create-react-app

Comment utiliser element- sélection de la date limite de l'interface utilisateur

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!