Перенаправить 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, чтобы захватить предполагаемый маршрут и использовать его для перенаправления после входа в систему, но похоже, что защита маршрута перезагружает всю страницу, поэтому состояние хранилища сбрасывается.

Единственное, что я могу придумать, - это сохранить предполагаемый маршрут страницы в локальном хранилище браузера, но это не кажется надежным решением.


javascript vue.js vue-router html5-history
person David    schedule 10.01.2020    source источник
comment
Вы пробовали добавить охранников маршрута на саму страницу? Затем вы можете использовать вложенные маршруты для защиты любых страниц, которые являются подчиненными по отношению к верхней странице.   -  person jacstrong    schedule 10.01.2020
comment
Я думаю, вам следует использовать router.push вместо router.replace. См. router.vuejs.org/guide/essentials. /   -  person User 28    schedule 10.01.2020
comment
Я пробовал router.push и router.replace, и ни один из них не работал. Я думаю, потому что история стирается, потому что это жесткое перенаправление URL-адреса, а не vue, просто замена компонента в routerview   -  person David    schedule 10.01.2020
comment
Почему бы просто не использовать старый простой параметр запроса returnURL в /signin?   -  person Michal Levý    schedule 10.01.2020

Ответы (1)


arrow_upward
3
arrow_downward

Попробуй добавить

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

person ilnicki010    schedule 12.01.2020
comment
Это лучшая реализация для защиты маршрута, но у меня все еще есть проблема, когда пользователь находится на странице входа и успешно входит в систему, я хочу перенаправить обратно на исходный URL-адрес, к которому они пытались получить доступ. - person David; 13.01.2020
comment
Это работает именно так, как вы сказали в моем случае. Используя только это: query: {redirect: to.fullPath} - person ilnicki010; 13.01.2020
comment
Что вы добавляете в метод signInSuccess, когда находитесь на странице входа? Вместо этого. $ Router.replace ('/') для перенаправления на правильный URL-адрес? - person David; 13.01.2020