Javascript 用户登录后将Vue路由器重定向到预期页面

我正在开发一个应用程序，它阻止用户访问除主页和注册之外的任何页面，除非他们已登录。我有一个全包路由保护，它在用户尝试访问页面时检查用户是否已登录，如果返回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('/')
}

我尝试过使用此.router.go（-1）重定向，但当我重定向到route guard中的登录页面时，预期的路由似乎没有被推到历史记录中

我还尝试在vuex存储中设置状态，以捕获预期的路由，并在登录后使用该状态重定向，但路由保护似乎会重新加载整个页面，以便重置存储状态

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

尝试添加

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

而不是

router.replace（'/sign'）

整个防护功能如下所示：

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路由器文档，对我的情况很有帮助。 尝试添加

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

而不是

router.replace（'/sign'）

整个防护功能如下所示：

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.push

而不是

router.replace

。看，我试过router.push和router.replace，但都不起作用。我想，因为历史记录被擦除是因为它是一个硬url重定向，而不是vue，只是在RouteService中交换组件为什么不只是在

/signin

中使用旧的普通

returnURL

查询参数？您尝试过将路由保护添加到页面本身吗？然后，您可以使用嵌套路由来保护作为顶部页面的子页面。我认为您应该使用

router.push

而不是

router.replace

。看，我试过router.push和router.replace，但都不起作用。我认为，因为历史记录被擦除是因为它是一个硬url重定向，而不是vue，只是在RouteService中交换组件为什么不只是在

/signin

中使用旧的普通

returnURL

查询参数？这是路由保护的更好实现，但我仍然有一个问题，一旦用户在登录页面，他们成功登录，我想重定向回他们试图访问的原始url。这正是你在我的案例中所说的。只使用：query:{redirect:to.fullPath}进入signin页面后，在SignInsAccess方法中放置了什么？而不是这个。$router.replace（“/”）重定向到正确的url？这对于route guard来说是一个更好的实现，但是我仍然有一个问题，即一旦用户在登录页面并且他们成功登录，我想重定向回他们试图访问的原始url。这正是您在我的案例中所说的。只使用：query:{redirect:to.fullPath}进入signin页面后，在SignInsAccess方法中放置了什么？而不是这个。$router.replace（“/”）重定向到正确的url？