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

Question

我正在开发一个应用程序，该应用程序会阻止用户访问除主页和注册之外的任何页面，除非他们已登录。我有一个包罗万象的路由防护，可以在尝试访问页面时检查用户是否已登录并重定向到如果返回 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 商店中设置状态以捕获预期路线并在登录后使用它进行重定向，但路线防护似乎会重新加载整个页面，因此商店状态会重置。

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

Answer 1

尝试添加

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