Блог

Я пытаюсь перенаправить не вошедшего в систему пользователя со всех страниц на /login . Я пытался beforeEach() , но он не срабатывает, когда пользователь вводит сайт с прямым URL, например /home , /event .

Защита для каждого маршрута beforeEnter() работает отлично, поскольку она срабатывает, как только пользователь попадает на эту конкретную страницу. Тем не менее, это требует от меня добавления beforeEnter() на все маршруты.

Я ищу способ дублировать это beforeEnter() почти на каждой странице маршрутизатора (даже на динамических страницах), на которую будет перенаправлен не вошедший в систему пользователь /login .

Это работает, когда пользователь вводит прямой URL /home .

 routes: [
  {
    path: '/home',
    name: 'home',
    beforeEnter(to, from, next){
      if ( to.name !== 'login' amp;amp; !this.isloggedin ){
         next({
           path: 'login',
           replace: true
         })
      } else {
         next()
      }
    }
  },
  ...
]
 

Это работает только после того, как пользователь вошел на сайт и маршрут изменился

 vm.$router.beforeEach((to, from, next)=>{
  if ( to.name !== 'login' amp;amp; !this.isloggedin ){
    next({
      path: 'login',
      replace: true
    })
  } else {
    next();
  }
})
 

Заранее спасибо.

Похоже, что это beforeEach определяется внутри инициализированного компонента, что означает, что первая маршрутизация уже произошла. Вместо этого определите его в модуле маршрутизатора с вашими маршрутами:

 const router = new VueRouter({
...
})

router.beforeEach((to, from, next)=>{
  if ( to.name !== 'login' amp;amp; !this.isloggedin ){
    next({
      path: 'login',
      replace: true
    })
  } else {
    next();
  }
})
 

Надеюсь, вы используете Vuex и можете импортировать хранилище для store.state.isloggedin . Если вы еще не используете Vuex, это иллюстрирует, почему он полезен для глобального состояния.