Vue的路由守卫前置和后置

Posted 2021-09-08 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