vue动态路由添加

const whiteList = ['/login', '/auth-redirect', '/bind', '/register']


router.beforeEach((to, from, next) => {
 const token = sessionStorage.getItem('access_token')
 // 存在 token 说明已经登录
 if (token) {
   // 登录过就不能访问登录界面,需要中断这一次路由守卫,执行下一次路由守卫,并且下一次守卫的to是主页'
   if (to.path === '/login') {
     next({ path: '/' })
   }
   // 保存在store中路由不为空则放行 (如果执行了刷新操作,则 store 里的路由为空,此时需要重新添加路由)
   if (store.getters.getRoutes.length || to.name != null) {
     //放行
     next()
   } else {
     // 将路由添加到 store 中,用来标记已添加动态路由
     store.commit('ADD_ROUTER', '需要添加的路由')
     router.addRoutes('需要添加的路由')
     // 如果 addRoutes 并未完成,路由守卫会一层一层的执行执行,直到 addRoutes 完成,找到对应的路由
     next({ ...to, replace: true })
   }
 } else {
    // 未登录时,注意 :在这里也许你的项目不只有 logon 不需要登录 ,register 等其他不需要登录的页面也需要处理
   //  if (to.path !== '/logon') {
  //     next({ path: '/logon' })
 //   } else {
//      next()
//    }

    if (whiteList.indexOf(to.path) !== -1) {
             // 在免登录白名单,直接进入
             next()
           } else {
             next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
             NProgress.done()
           }
 }
router.afterEach((to, from)  => {
  if(to.meta.checked){
    if (to.meta.title) {
    	document.title = to.meta.title
    }
  }
  NProgress.done()
})

  

posted @ 2021-12-03 11:22  青幽草  阅读(1112)  评论(0编辑  收藏  举报