как не сделать рендеринг на домашнюю страницу при входе в форму?

Question

У меня есть проблема в одностраничном приложении, когда я выполняю рендеринг в форму входа и когда я обновляю свою страницу, она снова возвращается на домашнюю страницу, как заблокировать страницу, чтобы она оставалась в форме входа, когда она обновляется?

это моя домашняя страница

<template id="" v-if="page.homepage">
      <div class="container ">
       <h1> Homepage </h1>
  </div>
</template> 

мой логин:

  <template id="" v-if="page.login">
              <div class="container ">
               <h1> Login </h1>
          </div>
        </template> 

и мой метод

loginButton(){
   this.page.homepage = false
   this.page.login = true
}

когда я пытаюсь обновить его и вернуться на домашнюю страницу, я действительно застреваю со вчерашнего дня в этом: (

Answer 1

Вы можете использовать vue-router и guard of router

Например, используя beforeEach:

router.beforeEach((to, from, next) => {
  const authenticated = !!localStorage.getItem('token')

  if (['login'].includes(to.name) && authenticated) {
    next({ path: 'home' })
  } else if (['home'].includes(to.name) && !authenticated) {
    next({ path: '/login' })
  } else {
    next()
  }

})

Примечание , что в приведенном выше примере я использовал сохраненный токен, чтобы указать, зарегистрирован ли пользователь или нет