Vue.js Vue-router странное поведение на странице перезагрузки браузера - PullRequest
Новая
       13

Vue.js Vue-router странное поведение на странице перезагрузки браузера

0 голосов
/ 03 июля 2018

Я не понимаю свое поведение vue-router ...

В браузере, когда отображается домашняя страница, я нажимаю на ссылку / users на панели инструментов Страница / users отображается правильно. НО Если я попытаюсь перезагрузить страницу / пользователей (нажмите кнопку перезагрузить браузер ... Chrome сейчас), то ..

страница / users повторно отображается И сразу же после отображения / home страницы ... как указано в журнале консоли из функции router.beforeEach () 

ROUTER BEFORE to:  {name: "Users", meta: {…}, path: "/users", hash: "", query: {…}, …}
ROUTER non protected page:  {name: "Users", meta: {…}, path: "/users", hash: "", query: {…}, …}
ROUTER BEFORE to:  {name: "Home", meta: {…}, path: "/home", hash: "", query: {…}, …}
ROUTER non protected page:  {name: "Home", meta: {…}, path: "/home", hash: "", query: {…}, …}

В чем может быть причина этого странного поведения?

router.js 

import Vue from 'vue'
import VueRouter from 'vue-router'
import Firebase from 'firebase'
import Home from '@/views/Home.vue'

Vue.use(VueRouter)

function loadView (view) {
  return () => import((/* webpackChunkName: 'view-[request]' */ `@/views/${view}.vue`))
}

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/users',
      name: 'Users',
      component: loadView('Users')
    }
    ...
    {
      path: '/',
      component: Home
    }
  ]
})

router.beforeEach((to, from, next) => {
  console.log('ROUTER BEFORE to: ', to)
  if (to.matched.some(record => record.meta.requiresAuth)) {
    console.log('ROUTER protected page: ', to)
    if (!Firebase.auth().currentUser) {
      console.log('ROUTER user not authenticated')
      next({ path: '/users', query: { redirect: to.fullPath } })
    } else {
      console.log('ROUTER user authenticated')
      next()
    }
  } else {
    console.log('ROUTER non protected page: ', to)
    next()
  }
})

export default router

1 Ответ

0 голосов
/ 03 июля 2018

Это побочный эффект моей функции firebase.auth (). OnAuthStateChanged ((user)) .. 

    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.$router.push('/member')
      } else {
        this.$router.push('/home')
      }
    })

Я должен написать это: 

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    this.$router.push('/member')
  } else {
    this.$router.push('/users')
  }
})

эта функция вызывается всякий раз, когда я перезагружаю текущую страницу ...

...