时间戳

首页 > 解决方案 > 用户登录后将 Vue Router 重定向到预期页面

javascript - 用户登录后将 Vue Router 重定向到预期页面

问题描述

我正在开发一个应用程序，该应用程序阻止用户访问除主页和注册之外的任何页面，除非他们已登录。我有一个捕获所有路由保护器，用于检查用户在尝试访问页面时是否已登录并重定向到如果返回 false，请登录。在登录组件中，一旦用户登录，他们就会被定向到主页。我要设置的是，当用户登录时，如果他们以前曾在页面上或已输入页面的直接 url，则重定向到应用程序的最后一页，如果没有重定向到主页。例如：

用户导航到 my.app/{somePage} -> 路由保护检查登录返回 false -> 重定向到 my.app/sigin -> 用户成功登录 -> 重定向到 my.app/{somePage}

//Route Guard
router.beforeEach((to, from, next) => {
    if(!signedIn()){
        router.replace('/signin')
    }
    else{
        next()
    }
})


//Successful signin
signInSuccess(){
    //Want this to redirect to intended page if exists
    this.$router.replace('/')
}

我尝试使用 this.$router.go(-1) 进行重定向，但是当我重定向到路由守卫中的登录页面时，预期的路由似乎没有被推送到历史记录中。

我还尝试在我的 vuex 商店中设置状态以捕获预期的路由并在登录后使用它来重定向，但路由守卫似乎重新加载了整个页面，因此商店状态被重置。

我能想到的唯一另一件事是将预期的页面路由存储在浏览器本地存储中，但这似乎不是一个可靠的解决方案。

标签： javascriptvue.jsvue-routerhtml5-history

解决方案

尝试添加

next({
    path: '/signin',
    query: { redirect: to.fullPath }
      })

代替 router.replace('/signin')

整个守卫功能是这样的：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!signedIn()) {
      next({
        path: '/signin',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // make sure to always call next()!
  }
})

它取自 vue-router 文档，对我来说很有帮助。 https://router.vuejs.org/guide/advanced/meta.html

推荐阅读