настройте router.beforeEach - PullRequest
Новая
       23

настройте router.beforeEach

0 голосов
/ 13 июня 2018

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

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

Мы посоветовали мне использовать «для маршрутизации перед каждой». Я не понимаю, как это работает.

main.js: 

    Vue.use(VueRouter)

const routes = [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/login',
      name: 'Login',
      component: Login,
      meta: { requiresAuth: true }
    },
    {
      path: '/register',
      name: 'Register',
      component: Register,
    },
    {
      path: '/complete_registration',
      name: 'Complete Registration',
      component: CompleteRegistration,
    },
    {
      path: '/profile',
      name: 'Profile',
      component: Profile,
      meta: { requiresAuth: true }
    }
]

const router = new VueRouter({routes, mode: 'history'})

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

  if ( from.matched.some(record => record.meta.requiresAuth) ) {
    alert('enter')
    next('/');
  } else {
    next();
  }
});

Byсоединяя меня, он показывает мне всплывающее окно с предупреждением

1 Ответ

0 голосов
/ 13 июня 2018

Thomas Kleßen совершенно прав в своем комментарии:

  1. Вы должны добавить meta: { requiresAuth: true } только к маршрутам, которые требуют аутентификации пользователя.Это не относится к странице входа в систему (я полагаю, ни к Register и Home).
  2. В router.beforeEach() вы должны проверить, требует ли «цель» аутентификацию пользователя, то есть to(а не from, который соответствует странице, с которой вы заходите).

Однако вам нужно добавить дополнительную проверку: если пользователь не аутентифицирован, вам нужно перенаправить его / егона страницу входа.Для этого вы можете использовать firebase.auth().currentUser следующим образом.См. Соответствующий документ Firebase здесь . 

const routes = [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/register',
      name: 'Register',
      component: Register
    },
    {
      path: '/complete_registration',
      name: 'Complete Registration',
      component: CompleteRegistration
    },
    {
      path: '/profile',
      name: 'Profile',
      component: Profile,
      meta: { requiresAuth: true }
    },
    {
      path: '/otherProtectedPage',
      name: 'OtherProtectedPage',
      component: OtherProtectedPage,
      meta: { requiresAuth: true }
    }
]

const router = new VueRouter({routes, mode: 'history'})

router.beforeEach((to, from, next) => {
    const requiresAuth = to.matched.some(record  => record.meta.requiresAuth)
    const currentUser = firebase.auth().currentUser

    if (requiresAuth && !currentUser) {
        next('/login')
    } else if (requiresAuth && currentUser) {
        next()
    } else {
        next()
    }
})
...