乐趣区

基于iviewadmin实现动态路由

jiezi

iview-admin 是一个基于 vue 和 iview 组件库实现的管理后台前端，本文基于 iview-admin 最新版本，实现基于权限的动态路由加载。
本文代码可参见：https://github.com/MayBeWrong…

背景：

动态路由：vue 的路由，可通过 new Router 传入路由数组定义实现，也可以通过 router.addRoutes 实现。通过 router.addRoutes 动态传入路由定义的方式，称之为动态路由。路由数据可以全部保存在后台数据库中，也可以将路由配置在前端，后端返回给前端路由权限信息，然后匹配过滤，进行加载。本文就这两种方式分别进行介绍，并且给出实现参考。

目标：
基于 iview-admin 最新代码，实现两种不同的路由动态加载方式：

  1. 路由 (导航菜单) 数据全部存储在后台
  2. 路由数据配置在前端，后台只存储权限信息

注意：本文通过 Mock 模拟后端接口

方式 1：路由 (导航菜单) 数据全部存储在后台

  • 定义路由数据结构体, 在文件中：src/mock/data.js
export const routersData = [{
      path: '/pet',// 访问路径
      name: 'Pet',// 路由的名字，这个与 i18n 有关，需要唯一
      meta: {
        title: '宠物',// 标题
        hideInMenu: false,// 是否在左侧导航菜单隐藏
        icon: 'logo-freebsd-devil'// 图标
      },
      component: 'components/main',// 组件文件路径，不需要 Import
      children: [{// 嵌套路由
        path: 'cat',
        name: 'Cat',
        meta: {
          title: '猫咪',
          hideInMenu: false,
          icon: 'ios-cloudy-night'
        },
        component: 'view/pet/cat/Cat.vue'
      }, {
        path: 'dog',
        name: 'Dog',
        meta: {
          hideInMenu: false,
          title: '狗娃',
          icon: 'ios-color-filter'
        },
        component: 'view/pet/dog/Dog.vue'
      }, {
        path: 'pig',
        name: 'Pig',
        meta: {
          hideInMenu: false,
          title: '猪啊',
          icon: 'ios-contact'
        },
        component: 'view/pet/pig/Pig.vue',
        children: [
          {
            path: 'female',
            name: 'Female',
            meta: {
              hideInMenu: false,
              title: '母猪',
              icon: 'ios-contact'
            },
            component: 'view/pet/pig/Pig.vue',
          },
          {
            path: 'male',
            name: 'Male',
            meta: {
              hideInMenu: false,
              title: '公猪',
              icon: 'ios-contact'
            },
            component: 'view/pet/pig/Pig.vue',
          }
        ]
      }]}]
  • 暴露 ajax 调用接口:src/mock/index.js，中增加：
Mock.mock(/\/sys\/routers/, routersData)

  • 实现一个 ajax 调用：src/api/routers.js 中增加：

     export const getRouterReq = (access) => {
     return axios.request({
       url: '/sys/routers',
       params: {access},
       method: 'get'
 })}

1、在 store 中定义动态路由相关逻辑，修改：src/store/module/app.js

引入 ajax 请求：

    import {getRouterReq} from '@/api/routers'

定义两个 state, 如下

state: {
   .....
    routers: [],// 拿到的路由数据
    hasGetRouter: false// 是否已经拿过路由数据
  },

同步增加 mutations：

  mutations：{
     ......
     // 设置路由数据
    setRouters(state, routers) {state.routers = routers},
    // 设置是否已经拿过路由
    setHasGetRouter(state, status) {state.hasGetRouter = status}......}

增加一个 action：

action:{
........
    getRouters({commit}) {return new Promise((resolve, reject) => {
        try {getRouterReq().then(res => {let routers = backendMenusToRouters(res.data)
            commit('setRouters', routers)
            commit('setHasGetRouter', true)
            resolve(routers)
          }).catch(err => {reject(err)
          })
        } catch (error) {reject(error)
        }
      })
    },
    ........
}

此处用到了一个函数：backendMenusToRouters，这个函数定义在 src/libs/util.js 中，用来对后端返回的路由数据递归处理，行程 vue 的路由。

export const backendMenusToRouters = (menus) => {let routers = []
  forEach(menus, (menu) => {
    // 将后端数据转换成路由数据
    let route = backendMenuToRoute(menu)
    // 如果后端数据有下级，则递归处理下级
    if (menu.children && menu.children.length !== 0) {route.children = backendMenusToRouters(menu.children)
    }
    routers.push(route)
  })
  return routers
}

  • 修改 src/router/index.js，增加动态路由加入逻辑，主要方法：

       const initRouters = (store) => {
 // 这个人登录了已经
 if (store.state.user.hasGetInfo) {
   // 路由加载过了
   if (store.state.app.hasGetRouter && store.state.app.routers && store.state.app.routers.length > 0) {console.log("已经加载过了路由")
   } else {
     // 加载路由
     console.log("开始加载路由权限...")
     store.dispatch('getUserMenus').then(routers => {
       // 此处 routers 已经是按照权限过滤后的路由了，没权限的，不加入路由，无法访问
       // 路由重置一下把 404 放最后
       const newRouter = new Router({
         routes,
         mode: config.routerModel
       })
       router.matcher = newRouter.matcher;
       // 把 404 加最后面，如果用 router.push({name:'xxxx'})这种的话，404 页面可能空白，用 path:'/aa/bb'
       router.addRoutes(routers.concat([{
         path: '*',
         name: 'error_404',
         meta: {hideInMenu: true},
         component: () => import(/* webpackChunkName: "404" */'@/view/error-page/404.vue')
       }]))
     }).finally(() => {})
   }
 }}

每次路由加载之前，都会判断是否已经初始化过系统路由，如果没有，则初始化。
至此，动态路由基本实现。文章可能有遗漏和不足, 欢迎探讨。第二种实现方式
具体实现，请参见：https://github.com/MayBeWrong…

退出移动版