1.vue
在首次请求登陆接口的时候,由后端返回相应的角色权限,再根据这个进行动态路由生成。vuex
本身根据角色建立不一样的路由表,而后在登陆时拿 到不一样的角色标记,来引入对应的路由表。后端
2.把路由表存储在vuex中,右侧菜单经过直接引入vuex存的路由表进行渲染。ide
经过接口返回的角色权限,根据角色来动态的经过router.addRoutes(),添加不一样的路由。spa
3.在路由守卫router.beforeEach中进行判断router
const hasRoles = store.getters.roles && store.getters.roles.length > 0 if (hasRoles) { next() } else { try { // get user info // note: roles must be a object array! such as: ['admin'] or ,['developer','editor'] const { roles } = await store.dispatch('user/getInfo') // generate accessible routes map based on roles const acce***outes = await store.dispatch('permission/generateRoutes', roles) // dynamically add accessible routes router.addRoutes(acce***outes) // hack method to ensure that addRoutes is complete // set the replace: true, so the navigation will not leave a history record next({ ...to, replace: true }) } catch (error) { // remove token and go to login page to re-login await store.dispatch('user/resetToken') Message.error(error || 'Has Error') next(`/login?redirect=${to.path}`) NProgress.done() } }