javascript - 用户登录后将 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