Vue-router完成单页面应用在没有登录情况下，自动跳转到登录页面

2024年4月3日 276次阅读 来源: Ming_Up

这是我做前端一来的第一篇文章，都不知道该怎样最先了。那就直接奔主题吧。先讲讲这个功用的完成场景吧，我们小组运用vue百口桶完成了一个单页面运用，最初就斟酌对登录状况做限定。比方登录后不能退却到登录页面，退出到登录页面后，不能退却方才登录的页面。在main.js中：

new Vue({
  store,
  router
}).$mount('#app')
router.beforeEach((to, from, next) => {
  window.scrollTo(0, 0)
  console.log(1234)
  if (!to.meta.requiresAuth) {
    if (!store.state.collectItems.bAuth) {
      next({
        path: '/'
        // query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    if (store.state.collectItems.bAuth && to.fullPath === '/') {
      console.log()
      next(false)
      return
    }
    next()
  }
})

对那些是登录才接见的，那些是没有登录就能够直接接见的，都做限定。这些功用都是完成的没有题目的。然则发明了一个题目就是，然则发明了一个题目就是人人直接在浏览器的地址栏输入一个登录后才接见的页面，虽然不能接见到页面，然则页面会卡在这里不动。底本设置的的路由跳转根本就没有起到作用。厥后发明，由因而这块的路由根本就没有发挥作用的时刻，页面就已报错了。有一天倏忽和我们小组的妹子议论的时刻，倏忽提到能不能在页面衬着先设置一个路由呢，因而就在 new Vue实例前面加了一个router的推断：

router.beforeEach((to, from, next) => {
  if (to.fullPath !== '/') {
    next({
      path: '/'
    })
    return
  }
  next()
})

霎时之前的题目解决了。如今直接接见那些只要登录后才接见的面，就直接跳转到了登录页面了。

整顿后的代码：

router.beforeEach((to, from, next) => {
  if (to.fullPath !== '/') {
    next({
      path: '/'
    })
    return
  }
  next()
})
new Vue({
  store,
  router
}).$mount('#app')
router.beforeEach((to, from, next) => {
  window.scrollTo(0, 0)
  console.log(1234)
  if (!to.meta.requiresAuth) {
    if (!store.state.collectItems.bAuth) {
      next({
        path: '/'
        // query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    if (store.state.collectItems.bAuth && to.fullPath === '/') {
      console.log()
      next(false)
      return
    }
    next()
  }
})

不对的处所还望人人指导，感谢！

    原文作者：Ming_Up
    原文地址: https://segmentfault.com/a/1190000009086403
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞