Vue-router, как не дать пользователю вернуться на экран входа в систему, нажав кнопку назад в браузере?

Question

Этот код не позволяет пользователю вернуться к экрану входа в систему путем изменения URL-адреса, но если он щелкнет кнопку возврата в браузере, он сможет перейти к экрану входа в систему даже после входа в систему.

Пользовательские данные сохраняются в localalstorage 'info', когда они аутентифицируются, и когда они выходят, localalstorage обновляется до нуля

router.beforeEach((to, from, next) => {
    if(window.localStorage.getItem('info') !== null && to.path == '/login'){
        next(from.fullPath)
    }
    if(window.localStorage.getItem('info') === null && to.path != '/login'){
        next('/login')
    } 
    next()
})

Помогите мне, пожалуйста!

Answer 1

Вы можете проверить доступность токена, назначенного во время входа в систему, перед тем, как перенаправить его на страницу входа, если токен отсутствует, просто нажмите текущую страницу назад. Код, который будет добавлен к компоненту входа, приведен ниже:

// check for token availability before login page is created    

      created(){
        if(this.$store.state.token){
          this.$router.push({name: '<same page name>'})
        }
      }

Answer 2

Вы можете прослушать событие кнопки назад, используя popstate .

Вы можете добавить это к своему корневому компоненту (возможно, App.vue?). Он прослушивает событие кнопки «назад» (или «вперед») и перенаправляет при необходимости.

 mounted() {
    window.onpopstate = event => {
      if (
        window.localStorage.getItem("info") !== null &&
        this.$route.path == "/login"
      ) {
        this.$router.push("/"); // redirect to home, for example
      }
    };
  }

Answer 3

Как насчет использования навигационных охранников :

router.beforeEach((to, from, next) => {

    const isLogged = store.getters.getUser.isLogged;
    if (isLogged && to.name == 'login') {
        // no need to go to login page, if user is already logged in - redirect
        return router.push({ name: 'dashboard' });
    }

    return next();
});

Answer 4

Не уверен, что это именно то, что вы имели в виду, не стесняйтесь указывать проблему подробнее. Но чтобы не возвращаться к /login, вам придется заменить историю при переходе от /login.

next({ 
  path: from.fullPath,
  replace: true,
})

Таким образом браузер будет переходить к предыдущей записи в истории.

Подробнее об этом можно прочитать здесь .