vue 后端返回路由 添加动态路由

Posted 2021-09-06 原谅我一生不羁放歌搞文艺

参考链接1：https://blog.csdn.net/qq_31906983/article/details/89054798
参考链接2：https://blog.csdn.net/qq_31906983/article/details/88942965

思路：
路由表不在前端进行比对，后台对用户的权限进行比对，返回给前端一个比对好的路由表，且返回的路由表

  {
    path: \'/people\',
    name: \'people\',
    meta: {
      title: \'人口管理\',
      requireAuth: true
    },
    component: () => import(\'@/views/main/Main\'),
    children: [{
      path: \'/people-list\',
      name: \'people-list\',
      meta: {
        icon: \'el-icon-user-solid\',
        title: \'人口管理\',
        requireAuth: true
      },
      component: () => import(\'@/views/people/list\')
    }, {
      path: \'/people-detail\',
      name: \'people-detail\',
      meta: {
        requireAuth: true,
        notCache: true,
        hideInMenu: true,
        title: route => `人口详情-${route.query.xm}`
      },
      component: () => import(\'@/views/people/detail\')
    }]
  }

function filterRouter (routes) {
  const router = routes.map(route => {
    if (route.component === \'main\') {
      route.component = _import(\'/main/Main\')
    } else {
      route.component = _import(route.component)
    }
    if (route.meta.routeTitle) {
      route.meta.title = _title(route.meta.title, route.meta.routeTitle)
    }
    if (route.children && route.children.length > 0) {
      route.children = filterRouter(route.children)
    }
    return route
  })
  return router
}

这个函数的主要作用就是把后台传过来的字符串型的component转化为真正的组件
其中_import()函数的定义如下：

function _import (file) {
  return () => import(\'@/views\' + file + \'.vue\')
}

function _title (title, routeTitle) {
  return route => `${title}${route.query[routeTitle]}`
}

使用router.onReady 调用一下获取的动态路由

router.onReady(() => generateRoutes())

function generateRoutes () {
  let vueMenus = localStorage.vueMenus
  if (vueMenus) {
    vueMenus = JSON.parse(vueMenus)
    const filterRoutes = filterRouter(vueMenus)
    // console.log(\'filterRoutes\', filterRoutes)
    filterRoutes.map(item => {
      // console.log(\'item\', item)
      router.addRoute(item)
    })
    router.addRoute({
      path: \'*\',
      meta: {
        hideInMenu: true
      },
      component: _import(\'/main/NotFound\')
    })
    router.options.routes = router.options.routes.concat(filterRoutes)
    // console.log(router.options.routes)
  }
}

接着更新，发现以上使用完之后，刷新页面是空白的。
所以直接改 【参考链接2】的方式 使用vuex

store/module/routeList.js

import router from \'@/router/index\'
import { filterRouter } from \'@/libs/util\'
export default {
  state: {
    routeList: []
  },
  mutations: {
    setRouteList (state, list) {
      const vueMenus = list || []
      if (vueMenus.length > 0) {
        vueMenus.push({
          path: \'*\',
          meta: {
            hideInMenu: true
          },
          component: \'/main/NotFound\'
        })
        const filterRoutes = filterRouter(vueMenus)
        filterRoutes.map(item => {
          router.addRoute(item)
        })
        state.routeList = vueMenus
      }
    }
  },
  actions: {
    setRouteListByLocal ({ commit }) {
      return new Promise((resolve, reject) => {
        Api.setVueMenu().then(res => {
          if (res.code === \'C10000\') {
            commit(\'setRouteList\', res.data)
            resolve(res)
          } else {
            reject(res)
          }
        }).catch(err => {
          reject(err)
        })
      })
    }
  }
}

router/index.js

router.beforeEach((to, from, next) => {

if (!token的判断) {
    next(\'/login\')
} else {
    if (store.state.routeList.routeList.length === 0) {
      // 重置路由 start
      const newRouter = new VueRouter({
        mode: \'history\',
        base: process.env.BASE_URL,
        routes
      })
      router.matcher = newRouter.matcher
      // 重置路由 end
      store.dispatch(\'setRouteListByLocal\').then(() => {
        next({ path: to.path })
        console.log(store.state.routeList.routeList)
      })
    } else {
      next()
    }
}
    
})

菜单就使用 this.menuList = store.state.routerList.routerList

退出登录的时候 需要清空一下 this.$store.state.routeList.routeList