Firebase авторизация входит в систему, но перенаправляет на вход при обновлении

Question

Я пытаюсь сделать авторизацию в Firebase через Google.Некоторые функции работают нормально, но каждый раз, когда я обновляю страницу при входе в систему, она загружает страницу входа вместо страницы, на которой я сейчас нахожусь. Когда это происходит, я уверен, что я все еще вошел в систему, потому что я могу напрямую ввести защищенный URLи загружается с информацией о пользователе авторизацииперенаправляется на главную страницу ("/") после входа в систему

Переход между страницами после входа в систему

Не работает

• Меня перенаправляют на экран входа в систему после обновления страницы только для авторизации, даже когда я вошел в систему. Она должна просто обновить страницу.

Здесь представлены мои данные для входа, Main, Router иindex.js.Есть и другие конфигурационные файлы и компоненты, но они отлично работают.

Login.vue

<template>
      <el-button plain v-on:click="login" >Iniciar sesión</el-button>
</template>
<script>
import firebase from '../firebaseConfig.js'
export default {
  name: 'Login',
  methods:{
    login: function(){
      let provider = new firebase.auth.GoogleAuthProvider();
      firebase.auth().signInWithPopup(provider).then((result) => {
         console.log(result.user.email);
         this.$router.replace("/");
      }).catch(err => console.log(error))
    }
  }
}
</script>

Main.vue

<template>
<h1>Welcome {{usuario}}
</template>

<script>
import firebase from '../firebaseConfig.js'
export default {
  name: 'Main',
  data () {
    return {
        usuario: "loading..."
    }
  },
  methods:{
    logout: function(){
      firebase.auth().signOut().then(() => {
        this.$router.replace('login')
      })
    }
  },
  created: function(){  
    this.user = firebase.auth().currentUser; 
      if(this.user) { 
        this.usuario = this.user.email; 
      } 
  }
}
</script>

Маршрутизатор

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Main'
import Login from '@/components/Login'

import firebase from '../firebaseConfig.js'

Vue.use(Router)

let router = new Router({
  routes: [
    {   
        path:'*',
        redirect:'/login'
    },
    {
      path: '/',
      name: 'Main',
      component: Main,
      meta:{
        requiresAuth: true
      }
    },
    {
      path: '/login',
      name: 'Login',
      component: Login    
    }
  ]
})

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

    console.log(requiresAuth)
    console.log(currentUser)

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

export default router

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

import firebase from './firebaseConfig.js'

Vue.config.productionTip = false

new Vue({
          router,
          el: '#app',         
          components: { App },
          template: '<App/>'
        })

Answer 1

Попробуйте это в файле main.js:

let app;

firebaseApp.auth().onAuthStateChanged(user => {
    if (!app) {
    app = new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount("#app");
  }

});

Таким образом, вы визуализируете свое приложение - в слушателе authStateChange