#javascript #vue.js #vuejs2 #vue-component #vue-router
#javascript #vue.js #vuejs2 #vue-компонент #vue-маршрутизатор
Вопрос:
Я пытаюсь перенаправить не вошедшего в систему пользователя со всех страниц на /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();
}
})
Заранее спасибо.
Ответ №1:
Похоже, что это 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, это иллюстрирует, почему он полезен для глобального состояния.