Rumah hujung hadapan web tutorial js vue addRoutes实现动态权限路由菜单步骤详解

vue addRoutes实现动态权限路由菜单步骤详解

May 21, 2018 pm 01:52 PM
kebenaran penghalaan

这次给大家带来vue addRoutes实现动态权限路由菜单步骤详解,vue addRoutes实现动态权限路由菜单的注意事项有哪些,下面就是实战案例,一起来看一下。

需求

最近接手一个后台管理系统,需要实现导航菜单从后台拉取的效果;根据登录用户的权限不同分别拉出来的导航菜单也不一样,另外可操作的界面也存在区别。

问题

因为后台管理系统是准备使用vue+vue-router+element-ui+vuex的搭配来做的,可是单页应用在进入页面之前就已经将vue-router实例化并且注入vue实例中了,所以在进入登录页面的时候旧没办法在重新定制路由了。接下来各种百之谷之,发现vue-router在2.0版本中提供了addRoutes方法添加路由,希望的曙光出现。

经过一番折腾终于实现了功能,记录下来便于回顾,也希望能帮助到同样有需求的同志。

思路

1、首先在本地配置好固定不变的路由地址,例如登录,404这些页面,如下:

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
Salin selepas log masuk

配置好这些固定的路由后我们才能够到登录页面,不然是无法继续下去的。

2、然后重要的一步,我们需要跟后端老铁约定好需要返回的权限菜单列表信息;首先这里我们先分析一下自己需要的路由结构,这里以我自己的路由作为例子。如果是我自己直接定义路由的话,会是以下结构:

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)
      },
      {
      ...
      }   
    ]
  }]
})
Salin selepas log masuk

根据以上结构分析,其实真正需要动态配置的路由其实是/layout下面的children部分,所以需要后端返回给我们包含所有路由的一个数组就可以了

返回的数据中rootList中是一级导航的列表,一级导航实际是没有路由功能,只是作为切换二级菜单的触发器,subList才是我们真正需要的路由信息。

3、拿到权限路由信息后,需要我们在本地对数据进行处理组装成我们需要的数据:

// 登录
   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)
     })
   },
Salin selepas log masuk

处理菜单列表和subList的方法:mergeSubInRoot 和 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
 }
}
Salin selepas log masuk

至此我们已经将权限路由成功配置进本地路由了,我的系统登录进入如下

后续优化

1、菜单列表的显示以及二级导航切换:

<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>
Salin selepas log masuk

2、防止刷新路由丢失;由于在刷新的时候单页应用会重新初始化,这时候所有配置的路由都会丢失,一朝回到解放前,只有本地配置的路由能够跳转。这时候我们可以在app.vue(ps:不论在哪里进行刷新,app.vue都会执行)中执行如下代码:

<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>
Salin selepas log masuk

这样即使刷新,也会重新配置路由了。

3、关于页面按钮级别控制,可以自定义一个指令,去做这件事情。因为我们已经权限列表放入了相应路由的meta对象中,所以我们可以很方便的在每个页面回去到当前用户在当前页面所拥有的权限

参考官方文档自定义指令

结语

打完收工,得亏vue-router2中添加了addRoutes的方法,不然

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

推荐阅读:

php生成自定义长度随机字符串步骤详解

php图片裁剪与缩略图使用实例讲解

Atas ialah kandungan terperinci vue addRoutes实现动态权限路由菜单步骤详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Dayakan kebenaran root dengan satu klik (dapatkan kebenaran root dengan cepat) Dayakan kebenaran root dengan satu klik (dapatkan kebenaran root dengan cepat) Jun 02, 2024 pm 05:32 PM

Ia membolehkan pengguna melakukan operasi yang lebih mendalam dan penyesuaian sistem kebenaran Root ialah kebenaran pentadbir dalam sistem Android. Mendapatkan keistimewaan root biasanya memerlukan satu siri langkah yang membosankan, yang mungkin tidak mesra pengguna biasa, bagaimanapun. Dengan mendayakan kebenaran root dengan satu klik, artikel ini akan memperkenalkan kaedah yang mudah dan berkesan untuk membantu pengguna mendapatkan kebenaran sistem dengan mudah. Fahami kepentingan dan risiko kebenaran root dan mempunyai kebebasan yang lebih besar keizinan Root membolehkan pengguna mengawal sepenuhnya sistem telefon mudah alih. Kuatkan kawalan keselamatan, sesuaikan tema dan pengguna boleh memadamkan aplikasi yang diprapasang. Sebagai contoh, pemadaman fail sistem secara tidak sengaja menyebabkan ranap sistem, penggunaan keistimewaan akar yang berlebihan dan pemasangan perisian hasad secara tidak sengaja juga berisiko, walau bagaimanapun. Sebelum menggunakan keistimewaan root

Bagaimana untuk menetapkan akses kebenaran dalam ruang QQ Bagaimana untuk menetapkan akses kebenaran dalam ruang QQ Feb 23, 2024 pm 02:22 PM

Bagaimana untuk menetapkan akses kebenaran dalam ruang QQ? Anda boleh menetapkan akses kebenaran dalam ruang QQ, tetapi kebanyakan rakan tidak tahu bagaimana untuk menetapkan akses kebenaran dalam ruang QQ Seterusnya ialah rajah cara menetapkan akses kebenaran dalam ruang QQ yang dibawa oleh editor untuk pengguna Teks tutorial, pengguna yang berminat datang dan lihat! Tutorial penggunaan QQ Bagaimana untuk menetapkan kebenaran untuk ruang QQ 1. Mula-mula buka aplikasi QQ, klik [Avatar] di sudut kiri atas halaman utama 2. Kemudian kembangkan kawasan maklumat peribadi di sebelah kiri dan klik fungsi [Tetapan]. di sudut kiri bawah; 3. Masukkan halaman tetapan Leret untuk mencari pilihan [Privasi] 4. Seterusnya dalam antara muka privasi, pilih perkhidmatan [Tetapan Kebenaran] 5. Kemudian cabar ke halaman terkini dan pilih [Space Dynamics ]; 6. Tetapkan dalam QQ Space sekali lagi

Pengurusan Kebenaran Forum Discuz: Baca Panduan Tetapan Kebenaran Pengurusan Kebenaran Forum Discuz: Baca Panduan Tetapan Kebenaran Mar 10, 2024 pm 05:33 PM

Pengurusan kebenaran forum Discuz: Baca panduan tetapan kebenaran Dalam pengurusan forum Discuz, tetapan kebenaran adalah bahagian yang penting. Antaranya, penetapan kebenaran membaca amat penting, kerana ia menentukan skop kandungan yang boleh dilihat oleh pengguna yang berbeza dalam forum. Artikel ini akan memperkenalkan secara terperinci tetapan kebenaran membaca forum Discuz dan cara mengkonfigurasinya secara fleksibel untuk keperluan yang berbeza. 1. Konsep asas kebenaran membaca Dalam forum Discuz, kebenaran membaca terutamanya termasuk konsep berikut yang perlu difahami: Keizinan membaca lalai: Lalai selepas pendaftaran pengguna baharu

Java Apache Camel: Membina seni bina berorientasikan perkhidmatan yang fleksibel dan cekap Java Apache Camel: Membina seni bina berorientasikan perkhidmatan yang fleksibel dan cekap Feb 19, 2024 pm 04:12 PM

Apache Camel ialah rangka kerja penyepaduan berasaskan Bas Perkhidmatan Perusahaan (ESB) yang mudah menyepadukan aplikasi, perkhidmatan dan sumber data yang berbeza untuk mengautomasikan proses perniagaan yang kompleks. ApacheCamel menggunakan konfigurasi berasaskan laluan untuk mentakrif dan mengurus proses penyepaduan dengan mudah. Ciri utama ApacheCamel termasuk: Fleksibiliti: ApacheCamel boleh disepadukan dengan mudah dengan pelbagai aplikasi, perkhidmatan dan sumber data. Ia menyokong pelbagai protokol, termasuk HTTP, JMS, SOAP, FTP, dll. Kecekapan: ApacheCamel sangat cekap, ia boleh mengendalikan sejumlah besar mesej. Ia menggunakan mekanisme pemesejan tak segerak, yang meningkatkan prestasi. Boleh dikembangkan

Gunakan fungsi JavaScript untuk melaksanakan navigasi dan penghalaan halaman web Gunakan fungsi JavaScript untuk melaksanakan navigasi dan penghalaan halaman web Nov 04, 2023 am 09:46 AM

Dalam aplikasi web moden, melaksanakan navigasi dan penghalaan halaman web adalah bahagian yang sangat penting. Menggunakan fungsi JavaScript untuk melaksanakan fungsi ini boleh menjadikan aplikasi web kami lebih fleksibel, berskala dan mesra pengguna. Artikel ini akan memperkenalkan cara menggunakan fungsi JavaScript untuk melaksanakan navigasi dan penghalaan halaman web serta memberikan contoh kod khusus. Melaksanakan navigasi halaman web Untuk aplikasi web, navigasi halaman web adalah bahagian yang paling kerap dikendalikan oleh pengguna. Apabila pengguna mengklik pada halaman

Bagaimana untuk mendapatkan kebenaran pemasang yang dipercayai 'Langkah yang disyorkan untuk mendapatkan kebenaran Pemasang Dipercayai' Bagaimana untuk mendapatkan kebenaran pemasang yang dipercayai 'Langkah yang disyorkan untuk mendapatkan kebenaran Pemasang Dipercayai' Feb 06, 2024 pm 05:48 PM

Artikel ini akan membawa anda memahami intipati TI dan meneroka lebih lanjut cara mendapatkan kebenaran TI dengan bantuan modul powershell dan NtObjectManager untuk menyelesaikan sebarang operasi yang anda inginkan dalam sistem pengendalian. Jika anda pernah mentadbir sistem Windows, anda harus biasa dengan konsep kumpulan trustedInstaller (TI). Kumpulan TI mempunyai kebenaran penting dalam pengendalian fail sistem dan pendaftaran. Contohnya, anda boleh melihat sifat fail di bawah folder System32 Dalam pilihan keselamatan, kumpulan TI dan pemilik fail mempunyai kebenaran untuk memadam dan mengubah suai fail Malah pentadbir tidak boleh mengubah suai pilihan keselamatan. Oleh itu, untuk pengendalian fail sistem dan pendaftaran, adalah perlu untuk

Di mana untuk menetapkan kebenaran folder kongsi Petua untuk menetapkan kebenaran folder kongsi dalam Win10 untuk dibaca sahaja dan tidak boleh diubah suai Di mana untuk menetapkan kebenaran folder kongsi Petua untuk menetapkan kebenaran folder kongsi dalam Win10 untuk dibaca sahaja dan tidak boleh diubah suai Feb 29, 2024 pm 03:43 PM

Bagaimana untuk menetapkan kebenaran baca sahaja folder kongsi dalam Win10? Selepas hos berkongsi folder, sesetengah pengguna hanya mahu orang lain mengakses, membaca dan melihat fail, tetapi tidak mahu orang lain mengubah suai fail pada hos. Artikel ini ialah tutorial tentang cara menetapkan kebenaran folder kongsi kepada baca sahaja dan tidak boleh diubah suai. 1. Mula-mula, kongsi folder mengikut proses biasa Pada hos, klik kanan folder yang perlu dikongsi, dan pilih: Properties-Sharing-Advanced Sharing-Check Share this folder; pilihan kebenaran di bawah secara lalai, jika tidak ada, tambahkan akaun Semua orang 3. Hanya semak kebenaran baca di bawah, dan kemudian klik OK 4. Cari folder properties-security dan tambahkan Ever

Selesaikan masalah kebenaran yang disebabkan oleh pemasangan partition NTFS pada Linux Selesaikan masalah kebenaran yang disebabkan oleh pemasangan partition NTFS pada Linux Jan 03, 2024 am 08:47 AM

Apabila Linux saya secara automatik memasang partition NTFS, ia sentiasa melaporkan ralat dengan beberapa fail apabila saya menyahmampat folder. Saya menggunakan arahan ls-lia untuk menyemak kebenaran dan mendapati bahawa pemilik partition NTFS yang dipasang secara automatik adalah root dan tergolong dalam kumpulan plugdev. Walaupun saya masih boleh menyalin, mengalih keluar dan mengedit fail secara bebas, penyahmampatan sentiasa melaporkan ralat. Saya cuba menggunakan chmod dan chown untuk menukar pemilik fail dan folder dalam keseluruhan partition NTFS kepada saya, dan kebenaran pengubahsuaian ialah 777. Walaupun program menggesa bahawa pelaksanaan berjaya, apabila melaksanakan arahan ls-lia, didapati bahawa kedua-dua arahan ini tidak mempunyai kesan sama sekali. Menggunakan sudovim/etc/fstab, kami mendapati bahawa konfigurasi adalah seperti ini. UUI

See all articles