// router.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
/* Layout */
import Layout from '@/layout'
// 路由基础路径
export const constantRoutes = [
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{ path: '/caslogin',
meta: { title: 'cas登录', noCache: true },
component: () => import('@/views/cas-login/index'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
},
{
path: '/',
component: Layout,
redirect: '/dashboard',
hidden: true,
children: [{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index'),
meta: { title: ' 首页', icon: 'dashboard', affix: true }
}]
}
]
export default router
// permission.js 根据权限动态添加路由(此处只写核心部分)
router.beforeEach(async(to, from, next) => {
const hasToken = getToken()
if (hasToken) {
if (to.path === '/login') {
next()
// NProgress.done()
} else {
// determine whether the user has obtained his permission roles through getInfo
// 获取用户角色
const hasRoles = store.getters.roles && store.getters.roles.length > 0
// 获取角色为一个异步 首先会进入 else判断
if (hasRoles) {
store.commit('permission/SWITCH_MENU', to.path)
store.dispatch('app/showSideBar', { opened:store.getters.permission_routes.length > 5 })
next()
} else {
// 核心部分
try {
// 获取用户角色信息
const { roles } = await store.dispatch('user/getInfo')
// 根据角色 获取角色的路由
const accessRoutes = await store.dispatch('permission/generateRoutes', { roles, toPath: to.path })
// 动态添加路由
console.log(accessRoutes, 'accessRoutes')
router.addRoutes(accessRoutes)
next({ ...to, replace: true })
} catch (error) {
// 删除令牌并转到登录页面重新登录
await store.dispatch('user/resetToken')
Message.error(error || 'Has Error')
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
}
}
})
console.log(accessRoutes):