Vue Router Guards не блокирует охраняемые маршруты при вводе в адресной строке

Question

У меня есть простое приложение vue, которое я пытаюсь защитить некоторыми маршрутами, т. Е. Если пользователь вошел в систему, покажите страницу панели инструментов и заблокируйте страницу входа пользователя.Если пользователь НЕ вошел в систему, покажите страницу входа в систему, но заблокируйте страницу панели инструментов.

Он работает в режиме навигации ... поэтому, если я не вошел в систему и не нажал кнопку "панель инструментов", меня перенаправили настраница входа пользователя.И если я вошел в систему и нажал «Войти», я был перенаправлен на страницу панели инструментов.Круто.

За исключением случаев, когда я набираю путь в адресной строке, то есть, если я вошел в систему и нажал «войти», я перенаправился на панель инструментов, но если я набрал / member-login в адресной строкеэто все еще берет меня к странице входа пользователя, и это не должно.То же самое происходит и со страницей панели мониторинга, если я не вошел в систему.

Я использую метод beforeEach() для выполнения охраны, и вот что у меня есть:

router.beforeEach((to, from, next) => {
   let ls = JSON.parse(localStorage.getItem('loggedInMember'));
   if(ls === null && to.name === 'dashboard'){ 
      next('/member-login');
   } else if ( ls !== null && to.name === 'login') { 
      next('/dashboard');
   } else {
      next();
   }
});

Iследует упомянуть, что это глобальная защита, и она находится в файле main.js моего проекта.

Чего мне не хватает?

Большое спасибо!

Answer 1

Итак, проблема была глупой ошибкой с моей стороны ...

У меня был метод router.beforeEach ниже метода new Vue({}), и он мне не понравился.Таким образом, перемещение метода beforeEach над методом new Vue решило эту проблему.

Ошибка:

new Vue({
   el: '#app',
   router,
   store,
   components: { App },
   template: '<App/>'
});

router.beforeEach((to, from, next) => {
   let ls = JSON.parse(localStorage.getItem('loggedInMember'));

   if(ls === null && to.name === 'dashboard'){
      next('/member-login');
   } else if ( ls !== null && to.name === 'login') {
      next('/dashboard');
   } else {
      next();
   }
});

Исправлено:

router.beforeEach((to, from, next) => {
   let ls = JSON.parse(localStorage.getItem('loggedInMember'));

   if(ls === null && to.name === 'dashboard'){
      next('/member-login');
   } else if ( ls !== null && to.name === 'login') {
      next('/dashboard');
   } else {
      next();
   }
});

/* eslint-disable no-new */
new Vue({
   el: '#app',
   router,
   store,
   components: { App },
   template: '<App/>'
});

Answer 2

Вы имеете в виду, что вы вводите /member-login, и вы переходите на страницу входа?Мне кажется, что это правильное действие или есть какое-то недоразумение, которое я получаю?Можете ли вы предоставить более подробную информацию?