使用 firebase 身份验证和路由器后 vuefire 绑定中断

Question

我有一个简单的 vuejs 应用程序，连接到 firebase，子组件中的 v-for 工作正常，直到我使用 firebase 和 vue 路由器实现身份验证。

现在坏了:(

身份验证正常，但查询中的项目不再存在（未定义）。

Firebase 凭据很好，数据库本身在所选路径上有数据。

这是main.js

import 'onsenui';
import Vue from 'vue';
import VueOnsen from 'vue-onsenui';
import VueFire from 'vuefire';
import VueRouter from 'vue-router'
import firebaseui from 'firebaseui';
import router from './router'
import {connection} from './firebaseconfig';

require('onsenui/css-components-src/src/onsen-css-components.css');
require('onsenui/css/onsenui.css');
require('firebaseui/dist/firebaseui.css');

import App from './App.vue';


Vue.use(VueOnsen);
Vue.use(VueFire);
Vue.use(VueRouter);


var app = new Vue({

  router,

  created() {

    connection.auth().onAuthStateChanged((user) => {
      if(user) {
        this.$router.push('/home')

      } else {
        this.$router.push('/auth')
      }

     });   

    } ,

  el: '#app',

  template: '<app></app>',

  components:{
    App 
    } ,
  render: h => h(App)

 });

App.vue

<template>    

<router-view></router-view>    

</template>    

<script>    

  import auth from './components/auth'
  import dashboard from './components/dashboard'
  import home from './components/homePage'
  import stores from './components/storesPage'
  import social from './components/socialPage'
  import settings from './components/settingsPage'    


  export default {    



    data() {
      return {    


        currentPage: 'auth',
        // pages: ['home', 'stores', 'settings' , 'social'],
        pages: {
          'dashboard' : 
          { 'name' : 'dashboard' , 'icon' : 'md-view-dashboard'  } ,
          'home' : 
          { 'name' : 'home' , 'icon' : 'md-view-home'  } ,
          'Stores' :
          { 'name' : 'stores' , 'icon' : 'md-store'  } ,
          'Social' : 
          { 'name' : 'social' , 'icon' : 'md-share'  } ,
          'account' : 
          { 'name' : 'account' , 'icon' : 'md-account-o'  } ,
          'auth' :
          { 'name' : 'auth' , 'icon' : 'md-settings'  } ,



        },    

        openSide: false
      };
    },
    components: {
      auth,
      dashboard,
      home,
      stores,
      settings ,
      social 
    } 
  }


</script>

Fire 基础配置：

import firebase from 'firebase';

const config = {
    apiKey: "xxxxxxxxxx",
    authDomain: "xxx",
    databaseURL: "xxx",
    projectId: "yyyyy",
    storageBucket: "yyyyyyy",
    messagingSenderId: "yyyyy"
  };

export const FireBconfig = config;
export const connection = firebase.initializeApp(config);
export const db = connection.database();

auth.vue

<template lang="html">

  <div id="firebaseui-auth-container">

  </div>
</template>

<script>
import firebase from 'firebase';
import firebaseui from 'firebaseui'
import {FireBconfig} from '../firebaseconfig';

export default {
  name: 'auth',
  mounted() {
    var uiConfig = {
      signInSuccessUrl: '/success',
      signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID
        ]
      };
    var ui = new firebaseui.auth.AuthUI(firebase.auth());
    ui.start('#firebaseui-auth-container', uiConfig);
    },
}
</script>

最后子组件在成功验证时显示并从 firebase 路径中提取数据

<template>
  <v-ons-page style="background-color:grey">

    <custom-toolbar class="topbarback" :title="'Home'" :action="toggleMenu">
    </custom-toolbar>

    <v-ons-pull-hook :action="loadItem" @changestate="state = $event.state">
      <span v-show="state === 'initial'"> Pull to refresh </span>
      <span v-show="state === 'preaction'"> Release </span>
      <span v-show="state === 'action'"> <v-ons-progress-bar indeterminate></v-ons-progress-bar> </span>
    </v-ons-pull-hook>

    <v-ons-row >

          <v-ons-col v-bind:key="item" v-for="item in items" width="33%">
        <div style="padding:5px;margin: 0px;border:solid 2px #E4E4E4;height:240px;vertical-align:middle;display:table-cell;background-color:#FFF;position:     relative;">

            <div style="text-align:center">

          <ons-input @change="checkboxclick" :input-id="item.ItemID" v-model="selected" style="    position: absolute; top: 10px; right: 10px;" type="checkbox" ></ons-input>

              <label :for="item.ItemID">
                <span class="price">{{item.CurrentPriceAmount}} €</span>
                <span class="watchers">10</span>
            <img tappable  style="width:85%;max-height:85%" class="item-thum" v-bind:src="item.    PictureDetailsGalleryURL" />
              </label>

            </div>
          <div class="item-title"> <span style="font-size:9px;background-color:#FFF">{{item.title}}</    span><br /><br /></div>

            </div>
          </v-ons-col> 


    </v-ons-row>

    <v-ons-speed-dial position="bottom right" direction="up"
      :visible="spdVisible"
      :open.sync="spdOpen"
    >
      <v-ons-fab :style="spdStyle">
    <v-ons-icon style="font-size:8px" icon="md-format-valign-top"><span style="    font-size:12px;font-family: 'Open Sans', sans-serif;">{{counter}}</span></v-ons-icon>
      </v-ons-fab>

      <v-ons-speed-dial-item v-for="(icon, name) in shareItems"
        :style="spdStyle"
        @click="$ons.notification.confirm(`Share on ${name}?`)"
      >
        <v-ons-icon :icon="icon"></v-ons-icon>
      </v-ons-speed-dial-item>

    </v-ons-speed-dial>

    </v-ons-page>
</template>

<script>

  import customToolbar from './toolbarHome'

  import {db} from '../firebaseconfig';

  export default {


      data : 
        function() {

          return {

            spdVisible:  false,
            spdOpen: false,

            spdStyle: {

              backgroundColor: this.$ons.platform.isIOS() ? '#4282cc' : null
            } ,

            items : [1,2,3] ,

            counter : 0 ,

            selectedItems : [] ,

            state: 'initial',
            selected : [],

            shareItems: {

              'With Relist': 'md-swap-alt' ,
              'Facebook': 'md-arrow-split',
            } 

          }

        },

        firebase: {

          items : {

            source: db.ref('users/buisine/stores/ebay/red/items')
          }

        }, 

    props: ['toggleMenu' , 'itemsRef'],

    components: { customToolbar } ,

    methods: {

      checkboxclick(event) {


        if(event.target.checked===true)
        {
          this.counter++;
          this.selectedItems.push(event.target.id);
        }
        else 
        {
          this.selectedItems.splice( this.selectedItems.indexOf(event.target.id) , 1);
          this.counter--;
        }

      },

      loadItem(done) {
        setTimeout(() => {
          this.items = [...this.items, this.items.length + 1];
          done();
        }, 1500);
      },



  }
  }

</script>

在应该 return 数据的 firebase 对象上尝试了不同的代码，但没有任何效果。

Answer 1

好吧，尝试在干净的空白 vuejs 项目上，再次失败。

但通过在 firebase 控制台的身份验证选项卡中禁止所有用户再次工作！！

使用 firebase 身份验证和路由器后 vuefire 绑定中断

vuefire binding broke after using firebase auth & router

firebase

firebase-authentication

vuejs2

vuefire