element-admin通过后端动态路由表实现用户权限控制（一）

实现效果描述

    最近大家都说牛市来了，我也在疯狂的理财，主要买了一些基金，然后做了系统，可以实时查看基金涨跌情况，同事觉得好用，叫我给他开账户，于是我就开始研究起了权限来了，最后实现效果如下：

A用户左侧导航条：

B用户左侧导航条

实现方案

后端返回路由结构如下：

"user_router": [
    {
      "component": "/dashboard/index", 
      "icon": "form", 
      "id": 14, 
      "name": "dashboard", 
      "path": "dashboard", 
      "title": "\u9996\u9875", 
      "uid": 5
    }, 
    {
      "component": "/alipay/fund", 
      "icon": "form", 
      "id": 15, 
      "name": "alipay", 
      "path": "alipay", 
      "title": "\u652f\u4ed8\u5b9d", 
      "uid": 5
    }
  ]

修改项目中的permission.js

新增如下代码：

// get user info
  const res = await store.dispatch('user/getInfo')
  store.dispatch('user/generateRouter', res.user_router).then(() => {
  const routers = store.getters.addRouters
  router.addRoutes(store.getters.addRouters)
  routers.forEach((item, index) => {
  router.options.routes[index] = item
   })
   next({
   ...to,
   replace: true
    })
   })

插入位置为：

修改 store/modules/user.js,在action中新增generateRouter函数，如下代码

generateRouter({
    commit
  }, routers) {
    return new Promise((resolve) => {
      const accessedRouters = formatRouter(routers)
      commit('SET_ROUTERS', accessedRouters);
      resolve();
    })
  },

其中fomatRouter函数代码为：

const formatRouter = (routers) => {
  const formatRouters = [];
  routers.forEach(router => {
    const path = router.path;
    const name = router.name;
    const title = router.title;
    const component = router.component;
    const icon = router.icon;
    const formatRouter = {
      path: '/',
      component: Layout,
      redirect: '/' + name,
      children: [{
        path: path,
        name: name,
        component(resolve) {
          require(["@/views" + component], resolve)
        },
        meta: {
          title: title,
          icon: icon
        }
      }]
    }

    formatRouters.push(formatRouter)
  })

 另外在getDefaultState函数中新增如下两个变量

routers: constantRoutes,
addRouters: []

位置如下：

在getters.js中新增如下：

addRouters: state => state.user.addRouters

以上代码均在vue-element-admin代码库基础上修改的 

总结

• 参考思路https://juejin.im/post/591aa14f570c35006961acac
• 难点，之前以为直接将路由对象拼接到addRoutes函数中即可，实际上是需要对从后端取过来的数据进行format，否则不生效
• 个人是前端后端一起做，后端用的python flask框架，就考虑了后端用数据库存储路由表

有问题欢迎各位咨询，这是我的公众号，大家可以关注一下：