Vue的路由守卫前置和后置

Posted 2022-12-10 cuter、

路由配置

const router = new VueRouter(
  mode: 'history',
  routes: [
    
      path: '/',
      redirect: '/blog/welcome'
    ,
    
      path: '*',
      name: 'NotFound',
      component: NotFound,
      meta:  isAuth: false, title: '页面找不到' 
    ,
    
      path: '/blog',
      component: BlogFrame,
      redirect: '/welcome',
      children: [
        
          path: 'login',
          component: Login,
          meta:  isAuth: false, title: '登录博客' 
        ,
         path: 'welcome', component: Welcome, meta:  isAuth: false  ,
        
          path: 'authorupdate',
          component: AuthorUpdate,
          meta:  isAuth: true 
        ,
         path: 'search', component: Search, meta:  isAuth: false  ,
        
          path: 'detail',
          component: ArticleDetail,
          meta:  isAuth: false, title: '文章详情' 
        ,
        
          path: 'authorarticle',
          component: AuthorArticle,
          meta:  isAuth: true, title: '我的文章' 
        ,
        
          path: 'editarticle',
          component: EditArticle,
          meta:  isAuth: true, title: '博客编辑' 
        
      ]
    ,
)

前置路由守卫:用于拦截权限页面

// 路由守卫
router.beforeEach((to, from, next) => 
  if (to.meta.isAuth == false) 
    next()
   else 
    if (window.sessionStorage.getItem('token') === null) 
      next('/blog/login')
     else 
      next()
    
  
)

后置路由守卫，少了next，负责添加页签title

router.afterEach((to, next) => 
  if (to.meta.title) 
    document.title = to.meta.title
   else 
    document.title = '悦读堂'
  
)
export default router