index.html vue路由 挂载,vue-router 实现动态路由加载，权限管理

//先导入这些乱七八糟的

import Vue from 'vue'import Router from'vue-router'import store from'@/store/index'import NProgress from'nprogress'import'nprogress/nprogress.css'import gatewayHomeRouter from'./gatewayHome'Vue.use(Router)

//不需要权限的路由

export const constantRoutes=[

{

path:'/',

redirect:'/entrance'},

{

path:'/entrance',

component: ()=> import('@/views/Index.vue'),

meta: { isEntrance:true}

},

{

path:'/register',

name:'register',

component: ()=> import('@/views/common/Register.vue')

},

{

path:'/login',

name:'login',

component: ()=> import('@/views/common/Login.vue')

},

{

path:'/logout',

name:'logout',

component: ()=> import('@/views/common/Logout.vue')

},

{

path:'/quit',

name:'quit',

component: ()=> import('@/views/common/Quit.vue')

},

{

path:'/error/:id',

name:'404',

component: ()=> import('@/views/common/404.vue')

},

{

path:'/Admittance',

name:'Admittance',

component: ()=> import('@/views/common/Admittance.vue')

},//gatewayHomeRouter

]

export const asyncRoutes=gatewayHomeRouter

const createRouter= () => newRouter({

mode:'history',

base: process.env.BASE_URL,

routes: constantRoutes

})

const router: any=createRouter()

//写一个重置路由的方法，切换用户后，或者退出时清除动态加载的路由

exportfunctionresetRouter() {

const newRouter: any=createRouter()

router.matcher= newRouter.matcher //新路由实例matcer，赋值给旧路由实例的matcher，(相当于replaceRouter)

}

//不需要权限的白名单path

const whiteList= ['/entrance', '/register', '/login', '/logout', '/error', '/Admittance', '/quit']

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

NProgress.start()

//登录后的用户有tokenconst hasToken= sessionStorage.getItem('Authorization')

//注销后的用户的识别

let isEffect=store.state.isEffectif (isEffect === '0') {if (to.path !== '/quit') {

next('/quit')

}

}if(hasToken) {if (to.path === '/login') {//已登录的用户，想去登录页就重定向到首页

next({ path: '/'})

NProgress.done()

}else{if(store.state.isMountedRoutes) {if (to.path === '/entrance') {

next('/home')

}

next()

}else{try{

//登录后获取用户角色

const { roleTypeDetail }= await store.dispatch('COMMIT_USER_LOGIN')

let roles: any=[Number(roleTypeDetail)]

//根据角色遍历出来对应可以显示的路由

const accessRoutes= await store.dispatch('permission/generateRoutes', roles)

//通过addRoutes加载路由

router.addRoutes(accessRoutes)

//存储已加载的状态，下次就不会进入这个try

store.commit('SET_IS_MOUNTED_ROUTES', true)

NProgress.done()

next({ path: to.path })

}catch(error) {//清除token重新跳转登录页

//await store.dispatch('user/resetToken')

store.dispatch('COMMIT_LOGOUT')

next(`/login`)

NProgress.done()

}

}

}

}else{//白名单直接里边请

if (whiteList.indexOf(to.path) !== -1) {

next()

}else{//其他无权限的重定向到登录页

next(`/login`)

NProgress.done()

}

}

})

router.afterEach(()=>{

NProgress.done()

})

exportdefault router