Vue动态添加路由
router.addRoutes
const whiteList = ['/login', '/reset-password']
router.beforeEach(async(to, from, next) => {
const hasToken = getToken()
if (hasToken) {
if (to.path === '/login') {
next({ path: '/' })
} else {
const hasRoles = store.getters.roles && store.getters.roles.length > 0
if (hasRoles) {
next()
} else {
try {
await store.dispatch('user/getInfo')
const accessRoutes = await store.dispatch('permission/generateRoutes')
const routesList = generator(accessRoutes)
routesList.push({ path: '*', redirect: '/404', hidden: true })
router.addRoutes(routesList)
next({ ...to, replace: true })
} catch (error) {
await store.dispatch('user/resetToken')
Message.error(error || '错误')
next(`/login?redirect=${to.path}`)
}
}
}
} else {
if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
next(`/login?redirect=${to.path}`)
}
}
})
generator.js
import Layout from '@/layout'
const constantRouterComponents = {
Layout: Layout,
Home: () => import('@/views/home/index')
}
export function generator(routerMap=[]) {
return router.map(item => {
item.component: (constantRouterComponents[item.component || item.key]) || (() => import(`@/views/${item.component}`))
if (item.children && item.children.length > 0) {
item.children = generator(item.children)
}
return item
})
}