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

Gemini 发布于2019-08-20 15:49 / 2768人阅读

摘要：先讲讲这个功能的实现场景吧，我们小组使用全家桶实现了一个单页面应用，最初就考虑对登录状态做限制。比如登录后不能后退到登录页面，退出到登录页面后，不能后退刚刚登录的页面。现在直接访问那些只有登录后才能访问的面，就直接跳转到了登录页面了。

这是我做前端一来的第一篇文章，都不知道该怎么开始了。那就直接奔主题吧。先讲讲这个功能的实现场景吧，我们小组使用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()
  }
})

不对的地方还望大家指点，谢谢！

云服务器 GPU云服务器跳转到登录页面 php跳转到别的页面单页面应用 jsp页面自动跳转

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82506.html

Vue中的验证登录状态

摘要：用存储用户路由守卫路由中设置的字段就在当中每次跳转的路径登录状态下访问页面会跳到如果没有访问任何页面。一个简单的保存登录状态的小。 Vue项目中实现用户登录及token验证先说一下我的实现步骤：使用easy-mock新建登录接口，模拟用户数据使用axios请求登录接口，匹配账号和密码账号密码验证后，拿到token，将token存储到sessionStorage中，并跳转到首...

draveness 2019-08-26 13:33 评论0 收藏0
VUE知识点集锦

摘要：载入前后在阶段，实例的和都初始化了，但还是挂载之前为虚拟的节点，还未替换。类似于，不同在于提交的是，而不是直接变更状态可以包含任意异步操作。 vue基础 1、 router 路由与 a 标签的区别：https://www.jianshu.com/p/34b...2、 VUE双向绑定的原理：答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个...

Tecode 2019-08-23 16:02 评论0 收藏0
VUE知识点集锦

摘要：载入前后在阶段，实例的和都初始化了，但还是挂载之前为虚拟的节点，还未替换。类似于，不同在于提交的是，而不是直接变更状态可以包含任意异步操作。 vue基础 1、 router 路由与 a 标签的区别：https://www.jianshu.com/p/34b...2、 VUE双向绑定的原理：答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个...

APICloud 2019-08-02 14:34 评论0 收藏0
Vue.js-状态管理与Vuex

摘要：学习笔记状态管理与状态管理与非父子组件跨级组件和兄弟组件通信时，使用了中央事件总线的一个方法，用来触发和接收事件，进一步起到通信的作用。仓库包含了应用的数据状态和操作过程。新建文件，并写入的配置，会依赖此配置文件来使用编译代码。学习笔记：状态管理与Vuex 状态管理与Vuex 非父子组件（跨级组件和兄弟组件）通信时，使用了bus（中央事件总线）的一个方法，用来触发和接收事件，进一步...

lykops 2019-08-23 16:03 评论0 收藏0