在這里我們將會實現(xiàn)一個vue動態(tài)路由的案列,當(dāng)用戶登陸成功后,根據(jù)用戶的角色,拿到他對應(yīng)的菜單信息,并將它動態(tài)的載入到我們的路由中。
我們的通用的后臺管理系統(tǒng)中,我們會根據(jù)權(quán)限的粗細(xì)不同,會對每個角色每個權(quán)限每個資源進行控制。同樣的我們也需要實現(xiàn)一個這樣的功能。 這篇文章我將主要講vue端的實現(xiàn),關(guān)于后臺接口我就不會涉及,當(dāng)我接觸的時候我們的后臺接口是springcloud實現(xiàn)。
一、思路
在vue-router對象中首先初始化公共路由,比如(404,login)等,然后在用戶登陸成功,根據(jù)用戶的角色信息,獲取對應(yīng)權(quán)限菜單信息menuList,并將后臺返回的menuList轉(zhuǎn)換成我們需要的router數(shù)據(jù)結(jié)構(gòu),然后通過vue-router2.2新添的router.addRouter(routes)方法,同時我們可以將轉(zhuǎn)后的路由信息保存于vuex,這樣我們可以在我們的SideBar組件中獲取我們的全部路由信息,并且渲染我們的左側(cè)菜單欄,讓動態(tài)路由實現(xiàn)。
二、實現(xiàn)
1、公共路由定義
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) /* Layout */ import Layout from '../views/layout/Layout' export const constantRouterMap = [ { path: '/login', component: () => import('@/views/login/index'), hidden: true }, { path: '/404', component: () => import('@/views/404'), hidden: true }, { path: '/', component: Layout, redirect: '/dashboard', name: 'Dashboard', hidden: true, children: [{ path: 'dashboard', component: () => import('@/views/dashboard/index') }] }, ] export default new Router({ scrollBehavior: () => ({ y: 0 }), routes: constantRouterMap })
2、獲取菜單信息
router.beforeEach((to, from, next) => { NProgress.start() // start progress bar if (getToken()) { // determine if there has token /* has token*/ if (to.path === '/login') { next({ path: '/' }) NProgress.done() // if current page is dashboard will not trigger afterEach hook, so manually handle it } else { if (store.getters.roles.length === 0) { // 判斷當(dāng)前用戶是否已拉取完user_info信息 store.dispatch('GetInfo').then(res => { // 拉取user_info const roles = res.roles store.dispatch("GetMenu").then(data => { initMenu(router, data); }); next() }).catch((err) => { store.dispatch('FedLogOut').then(() => { Message.error(err || 'Verification failed, please login again') next({ path: '/' }) }) }) } else { next() } } } else { /* has no token*/ if (whiteList.indexOf(to.path) !== -1) { // 在免登錄白名單,直接進入 next() } else { next('/login') // 否則全部重定向到登錄頁 NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it } } }) router.afterEach(() => { NProgress.done() // finish progress bar })
在這里 我們通過在router的beforeEach鉤子函數(shù) 判斷用戶是否已經(jīng)獲得角色信息,如果沒有,則請求后臺獲取對應(yīng)的角色信息,然后通過角色信息再次請求獲取對應(yīng)的菜單列表,獲取到菜單列表,然后去格式化菜單列表,使其轉(zhuǎn)換成router數(shù)組的結(jié)構(gòu)。
3、動態(tài)加載路由
import store from '../store' export const initMenu = (router, menu) => { if (menu.length === 0) { return } let menus = formatRoutes(menu); // 最后添加 let unfound = { path: '*', redirect: '/404', hidden: true } menus.push(unfound) router.addRoutes(menus) store.commit('ADD_ROUTERS',menus) } export const formatRoutes = (aMenu) => { const aRouter = [] aMenu.forEach(oMenu => { const { path, component, name, icon, childrens } = oMenu if (!validatenull(component)) { let filePath; const oRouter = { path: path, component(resolve) { let componentPath = '' if (component === 'Layout') { require(['../views/layout/Layout'], resolve) return } else { componentPath = component } require([`../${componentPath}.vue`], resolve) }, name: name, icon: icon, children: validatenull(childrens) ? [] : formatRoutes(childrens) } aRouter.push(oRouter) } }) return aRouter }
在這里我們把menList轉(zhuǎn)換成routerList因為我們后臺返回的數(shù)據(jù)不是規(guī)范的router結(jié)構(gòu),所以這里需要我們處理一下,如果你們后臺返回規(guī)范的就不需要處理,然后通過router.addRoutes把后臺返回的加入到我們的路由中,并且將其保存在我們的vuex中,需要主要的 如果404組件一定要放在動態(tài)路由在后載入。
4、渲染菜單
其實這里已經(jīng)不屬于我們的所講的重點,在這里只需要取出上一步存在vuex中的路由信息,并且將其渲染成我們的左側(cè)菜單欄就可以。在這里我們使用了element-ui。
<template> <el-scrollbar wrapClass="scrollbar-wrapper"> <el-menu mode="vertical" :show-timeout="200" :default-active="$route.path" :collapse="isCollapse" background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF" > <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"></sidebar-item> </el-menu> </el-scrollbar> </template> <script> import { mapGetters } from 'vuex' import SidebarItem from './SidebarItem' import { validatenull } from "@/utils/validate"; import { initMenu } from "@/utils/util"; export default { components: { SidebarItem }, created() { }, computed: { ...mapGetters([ 'permission_routers', 'sidebar', 'addRouters' ]), isCollapse() { return !this.sidebar.opened } } } </script>
就這樣我們動態(tài)加載路由就是實現(xiàn)了,是不是很簡單,關(guān)鍵點就是router.addRoute方法。下面我就說一下防踩坑點。
三、防坑
1、關(guān)于加載菜單信息的時機
在此之前我將第二步獲取菜單信息放在我的SideBar組件的create函數(shù)中,當(dāng)時我發(fā)現(xiàn)也沒有什么問題。登錄跳轉(zhuǎn)到home界面 左側(cè)菜單也成功渲染,點擊菜單進入我們動態(tài)加載的路由界面,也沒問題。但是當(dāng)我點擊刷新的時候問題來。頁面空白 控制臺也不報錯。當(dāng)時我就蒙蔽了,什么情況,不是好好的嘛?如果大家也遇到這種這時候大家不要著急,冷靜的分析整個流程,就會發(fā)現(xiàn)問題的所在。
1、登陸成功跳轉(zhuǎn)home界面,home組件是公共路由,存在的沒問題。
2、這時候 sidebar組件create鉤子觸發(fā),成功獲取菜單列表
3、菜單列表轉(zhuǎn)成路由數(shù)組,并且加載到router實例中和vuex中
4、sidebar從vuex獲取到路由數(shù)組渲染菜單 進入我們動態(tài)加載頁面中,顯示正常,這一切看起來沒什么問題
5、點擊瀏覽器的刷新按鈕、或者F5,頁面空白。
原因: 第五步中我們我們?yōu)g覽器刷新,在spa應(yīng)用整個vue實例會重新加載,也是說我的vue-router會重新初始化,那么我們之前的動態(tài)addRoute就不存在了,但是我們此時訪問一個不存在的頁面,所以我們的sidebar組件也就不會被訪問,那么也無法獲取菜單信息,就導(dǎo)致頁面空白。所以我們需要把加載菜單信息這一步放在router的全局守衛(wèi)beforeEach中就可以了。
2、關(guān)于404組件的位置
大家可以看到
export const initMenu = (router, menu) => { if (menu.length === 0) { return } let menus = formatRoutes(menu); // 最后添加 let unfound = { path: '*', redirect: '/404', hidden: true } menus.push(unfound) router.addRoutes(menus) store.commit('ADD_ROUTERS',menus) }
我強調(diào)了 404組件一定要放在動態(tài)路由組件的最后,不然你刷新動態(tài)加載的頁面,會跳轉(zhuǎn)到404頁面的。
四、效果圖
動態(tài)路由
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com