思路1、
①登录的时候获取用户信息
②判断page里是否有对象,没有的话就把已有路由routerMap 放在空数组routerList里,如果有对象,则遍历判断page是否为true,如果true则为放到空数组routerList里,false的话就return出来
③把routerList跟默认的routes拼接在一起(routerList.concat(routes) 注意routes放后面,因为404页面path: ‘*’)
然后返回出去
④用router.addRoutes添加动态路由的方法,把返回出去的路由添加到路由里(可以复制一份再添加进去)
├──router
│ ├── index.js
│ └── router.js
├──store
│ ├── module
│ │ └── router.js
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import { routes } from './router'
import store from '@/store'
import { setTitle, setToken, getToken } from '@/lib/util'
import clonedeep from 'clonedeep'
Vue.use(Router)
const router = new Router({
mode: 'history',
routes
})
const HAS_LOGINED = false
router.beforeEach((to, from, next) => {
to.meta && setTitle(to.meta.title)
const token = getToken()
if (token) {
if (!store.state.router.hasGetRules) {
store.dispatch('authorization').then(rules => {
store.dispatch('concatRoutes', rules).then(routers => {
router.addRoutes(clonedeep(routers)) //返回出来的数据添加进动态路由里
next({ ...to, replace: true })
}).catch(() => {
next({ name: 'login' })
})
}).catch(() => {
setToken('')
next({ name: 'login' })
})
} else {
next()
}
} else {
if (to.name === 'login') next()
else next({ name: 'login' })
}
})
router.afterEach((to, from) => {
// logining = false
})
export default router
// router/router.js
export const routerMap = [
{
path: '/home',
name: 'home',
component: Layout,
meta: {
title: '首页'
},
children: [
{
path: 'home_index',
name: 'home_index',
meta: {
title: '首页'
},
component: Home
}
]
},
{
path: '/form',
name: 'form',
meta: {
title: 'form'
},
component: () => import('@/views/form.vue')
},
...
]
export const routes = [
{
path: '/login',
name: 'login',
meta: {
title: '登录'
},
component: () => import('@/views/login.vue')
},
{
path: '*',
component: () => import('@/views/error_404.vue')
}
]
//store/module/router.js
import { routes, routerMap } from '@/router/router'
const state = {
routers: routes,
hasGetRules: false
}
const mutations = {
CONCAT_ROUTES (state, routerList) {
state.routers = routerList.concat(routes)
state.hasGetRules = true
}
}
const getAccesRouterList = (routes, rules) => {
return routes.filter(item => {
if (rules[item.name]) {
if (item.children) item.children = getAccesRouterList(item.children, rules)
return true
} else return false
})
}
const actions = {
concatRoutes ({ commit }, rules) {
return new Promise((resolve, reject) => {
try {
let routerList = []
if (Object.entries(rules).every(item => item[1])) {
routerList = routerMap
} else {
routerList = getAccesRouterList(routerMap, rules)
}
commit('CONCAT_ROUTES', routerList)
resolve(state.routers)
} catch (err) {
reject(err)
}
})
}
}
export default {
state,
mutations,
actions
}
思路2、
这种是比较常见到的方法
①登录的时候获取用户信息
②判断获取的信息中是否有roles,有的话则过滤出含有[‘admin’]的路由,赋给空数组accessedRouters
③把accessedRouters 跟默认的路由拼接在一起
④用router.addRoutes添加动态路由的方法,把返回出去的路由添加到路由里(可以复制一份再添加进去)
├──router
│ ├── index.js
├──store
│ ├── module
│ │ └── permission.js
└── promission.js
方法2参考代码