Маршрутизатор Vue2 не работает при вводе вручную

У меня есть такой код:

created: function() {
    if(!localStorage.hasOwnProperty('auth_token')) {
        router.replace({name: 'login'});
    } else {
         if(router.history.current.name == 'login') {
             router.push({name: 'allVideos'});
         }
    }
}

внутри моего корневого экземпляра Vue.

Поэтому, когда страница загружается, она проверяет токен. Когда у меня нет токена, я перенаправляюсь на страницу входа. Если у меня есть перенаправление токена на все видео, если на странице входа, или вообще не перенаправлять, если на других страницах.

Все работает нормально, когда я обновляю, просматриваю некоторые кнопки и т. д. Но когда я вручную набираю /#/login и нажимаю, введите страницу входа Vue render, но auth_token существует. И когда я печатаю вручную, он вообще не попадает в метод created. Когда я снова набираю /#/login со страницы входа, он снова начинает работать .... Есть идеи ??? Спасибо

Обновление: Ну, я пытался использовать навигационные охранники

router.beforeEach((to, from, next) => {
    if(localStorage.hasOwnProperty('auth_token')) {
        if(to.name == 'login') {
            next({name: 'allVideos'});
        }
    } else {
        if(to.name != 'login') {
            next({path: '/login'});
        }
    }
        next();

});

Код теперь намного чище, как по мне, но проблема остается, когда я печатаю вручную


javascript vue.js vue-router vuejs2 vue-component
person Bogdan Dubyk    schedule 26.01.2017    source источник
comment
Я думаю, что концепция здесь неверна. Вместо того, чтобы помещать эти вещи Vue в экземпляр, я думаю, вам следует использовать некоторую защиту навигации, в вашем случае router.beforeEach должен помочь router.vuejs.org/en/advanced/navigation-guards.html   -  person Belmin Bedak    schedule 26.01.2017
comment
Вы имеете в виду, что вместо того, чтобы добавлять такой код в метод created, я должен использовать хук beforeEach? проверим, пока не читал об этом. Спасибо!   -  person Bogdan Dubyk    schedule 26.01.2017
comment
Да, проверьте этот пример здесь github. com/TahaSh/spa-forum/blob/master/resources/assets/js/ — (обратите внимание, что это Vue 1 и старый код маршрутизатора, но он может вам помочь) экземпляр маршрутизатора.   -  person Belmin Bedak    schedule 26.01.2017

Ответы (1)


arrow_upward
0
arrow_downward

В вашем коде next() вызывается 2 раза, поэтому это создает проблему. Вы можете попробовать этот код:

router.beforeEach((to, from, next) => {
  if(localStorage.hasOwnProperty('auth_token')) {
    if(to.name === 'login') {
      next({name: 'allVideos'});
    }
  } else if(to.name !== 'login') {
    next({path: '/login'})
  } else {
    next();
  }
});
person Quoc-Anh Nguyen    schedule 22.09.2017