从零开始，详细讲解根据用户权限不同，动态生成路由导航菜单功能的实现(一)

为了帮助大家更好的理解下文中用的方法，我会尽量将出现的方法有关文档粘贴在这里，方便大家查阅：
(详细的使用方法与注意事项可点击后跳转至参考文档查看)

1. sessionStorage
2. Router实例方法 #router.beforeEach… (api参考)
3. Router 构建选项 mode/scrollBehavior/routes…(api参考)
4. vue-router路由守卫
5. vue提供的transition

前言 :
如题,要想实现根据用户权限不同，动态生成路由导航菜单,我们首先要和后端人员配合将所有的路由的路径存放在数据库中

创建vue新项目

创建初始项目
vue create dynamic
进入项目文件夹
cd dynamic
下载我们需要的包
npm i vue-router -S 或 yarn add vue-router -S
npm i element-ui -S 或 yarn add element-ui -S
npm i axios -S 或 yarn add axios -S
npm i vue-cookie -S 或 yarn add vue-cookie -S

创建相应文件夹,使目录结构如下所示:

配置main.js

使用vuecookie

import Vue from 'vue'
import App from '@/App'
import router from '@/router'               
import elementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import VueCookie from 'vue-cookie'           

Vue.use(elementUI)
Vue.use(VueCookie)
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount("#app")

配置router/index.js

router/index.js

引入vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'
import axios from 'axios'

// 挂载全局
Vue.prototype.$axios = axios // ajax请求方法

Vue.use(VueRouter)

创建实例之前我会把路由分为两大类:

1. 全局路由(无需嵌套上左右整体布局)
2. 主入口路由(需嵌套上左右整体布局)
   
   这里故意不把page1、page2、page3跟home.vue一起放进去children数组里，因为我们要由后台动态导入（将这几个页面当成有权限的页面，不同用户显示不同）

代码块：

// 全局路由(无需嵌套上左右整体布局)
const globalRoutes = [
    { path: '/404', component: () => import('@/view/404.vue'), name: '404', meta: { title: '404未找到' } },
    { path: '/login', component: () => import('@/view/login.vue'), name: 'login', meta: { title: '登录' } }
]
  
// 主入口路由(需嵌套上左右整体布局)
const mainRoutes = {
    path: '/',
    component: () => import('@/view/main'),
    name: 'main',
    redirect: { name: 'home' },  //重定向和别名
    meta: { title: '主入口整体布局' },
    children: [
        { path: '/home', component: () => import('@/view/home.vue'), name: 'home', meta: { title: '首页' } },
    ],
    /*beforeEnter (to, from, next) {
        let token = Vue.cookie.get('token')
        if (!token || !/\S/.test(token)) { // 判断用户是否已经登录
        clearLoginInfo() //清除登录信息 
        next({ name: 'login' })
        }
        next()
    }*/
}

创建 router 实例

代码块：

const router = new VueRouter({
  mode: 'hash',
  scrollBehavior: () => ({ y: 0 }), //对于所有路由导航，简单地让页面滚动到顶部。
  isAddDynamicMenuRoutes: false, // 是否已经添加动态(菜单)路由:自定义属性,可通过router.options.isAddDynamicMenuRoutes 访问
  routes: globalRoutes.concat(mainRoutes)  //利用conca方法拼接为一个数组
})

利用路由拦截器获取并添加动态路由

我们可以选择在用户登录的时候让后台一并返回该用户能访问的路由菜单列表（有权限的路由）或者利用路由守卫在路由跳转进入另一个前获取路由菜单列表，这里我选择的是后者。

*fnCurrentRouteType()*判断当前路由类型

假设下图是与后台规定的请求成功时，返回响应格式：

	{
        code:0,
        msg:'success',
        menuList:[
            { menuId: 1, name: "页面1", url: "/permission/page1" },
            { menuId: 2, name: "页面2",  url: "/permission/page2"},
            { menuId: 3, name: "页面3", url: "/permission/page3"}
        ]
      }

*fnAddDynamicMenuRoutes()*添加动态(菜单)路由

代码块：

router.beforeEach((to, from, next) => {
	// 添加动态(菜单)路由
	// 1. 已经添加 or 全局路由, 直接访问
	// 2. 获取菜单列表, 添加并保存本地存储
	if (router.options.isAddDynamicMenuRoutes || fnCurrentRouteType(to, globalRoutes) === 'global') {
		// 已经添加动态路由或跳转路由为全局路由则直接跳转
		next()
	} else {
		axios({
			url: '/menu/nav',//这里填写获取菜单列表的接口
			method: 'get',
			params: {
				token:Vue.cookie.get("token") //此处修改为与后台规定好可以判断用户权限的参数
			}
		}).then(({data}) => {
			if (data && data.code === 0) {
				fnAddDynamicMenuRoutes(data.menuList)
				router.options.isAddDynamicMenuRoutes = true
				// 将菜单列表保存本地存储
				sessionStorage.setItem('menuList', JSON.stringify(data.menuList || '[]'))
				next({ ...to, replace: true })
			} else {
				sessionStorage.setItem('menuList', '[]')
				next()
			}
		}).catch((e) => { 
			console.log(`%c${e} 请求菜单列表失败，跳转至登录页！！`, 'color:blue')
			router.push({ name: 'login' })
		})
	}
})

/**
 * 判断当前路由类型, global: 全局路由, main: 主入口路由
 * @param {*} route 当前路由
 */
function fnCurrentRouteType (route, globalRoutes = []) {
  var temp = []
  for (var i = 0; i < globalRoutes.length; i++) {
    if (route.path === globalRoutes[i].path) {
      return 'global'
    } else if (globalRoutes[i].children && globalRoutes[i].children.length >= 1) {
      temp = temp.concat(globalRoutes[i].children)
    }
  }
  return temp.length >= 1 ? fnCurrentRouteType(route, temp) : 'main'
}

/**
 * 添加动态(菜单)路由
 * @param {*} menuList 菜单列表
 * @param {*} routes 递归创建的动态(菜单)路由
 */
function fnAddDynamicMenuRoutes (menuList = [], routes = []) {
  var temp = []
  for (var i = 0; i < menuList.length; i++) {
    if (menuList[i].url && /\S/.test(menuList[i].url)) { //  /\S/.test()  匹配任何非空白字符
      menuList[i].url = menuList[i].url.replace(/^\//, '')  //将以"/"开头的url替换为""
      var route = {
        path: menuList[i].url.replace('/', '-'),
        component: null,
        name: menuList[i].url.replace('/', '-'),
        meta: {
          menuId: menuList[i].menuId,
          title: menuList[i].name,
          isDynamic: true,
          isTab: true,
        }
      }
      routes.push(route)
    }
  }
  if (temp.length >= 1) {
    fnAddDynamicMenuRoutes(temp, routes)
  } else {
    mainRoutes.name = 'main-dynamic'
    mainRoutes.children = routes
    router.addRoutes([
      mainRoutes,
      { path: '*', redirect: { name: '404' } }
    ])
    sessionStorage.setItem('dynamicMenuRoutes', JSON.stringify(mainRoutes.children || '[]'))
    console.log('\n')
    console.log('%c!<-------------------- 动态(菜单)路由 s -------------------->')
    console.log(mainRoutes.children)
    console.log('%c!<-------------------- 动态(菜单)路由 e -------------------->')
  }
}

导出router

export default router

后续内容请点击跳转至
从零开始，详细讲解根据用户权限不同，动态生成路由导航菜单功能的实现(二)