javascript - vue 最奇怪的行为 - 注释代码正在运行

Question

我有一个以 firestore 作为数据库的 vue 项目。我曾经使用以下功能登录用户:

loginUser(){
 if(this.email && this.password){
  firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(() => {
    this.$router.push({name: 'Index'})
   }).catch(err => {
   alert(err.message)
  })
 } else {
  this.feedback = 'Please enter email & password.'
 }
}

我编译并运行了这段代码，运行良好。然后根据控制台日志的建议，我更改了

import firebase from 'firebase'

到

import firebase from 'firebase/app'
import 'firebase/auth' 

从那时起，我观察到一个最奇怪的行为。即使我注释掉代码this.$router.push({name: 'Index'})，它仍然会在登录时将我重定向到索引页面。我不知道该怎么做.虽然，最终我想在用户登录时将他们发送到索引页面，但如果代码被注释掉，它应该不会工作!我可能做错了什么？

Firebase 配置:

import firebase from 'firebase'

var firebaseConfig = {
    apiKey: "...",
    authDomain: "...",
    databaseURL: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "...",
    measurementId: "..."
  };
  // Initialize Firebase
  const firebaseApp = firebase.initializeApp(firebaseConfig);

  export default firebaseApp.firestore()

路由器/index.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '@/components/Index'
import Login from '@/components/Login'
import Signup from '@/components/Signup'
import firebase from 'firebase'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Index',
    component: Index,
    meta: {
      requiresAuth: true
    }
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/register',
    name: 'Signup',
    component: Signup,
    meta: {
      requiresAuth: true
    }
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

router.beforeEach((to, from, next) => {
  if(to.matched.some(rec => rec.meta.requiresAuth)){
    firebase.auth().onAuthStateChanged(user => {
      if(user){
        next()
      } else {
        next({name: 'Login'})
      }
    })
  } else {
    next()
  }
})

export default router

我刚从 从“firebase/app”导入 firebase 到 从“firebase”导入 firebase

Answer 1

通过在 Firebase 配置文件中执行 export default firebaseApp.firestore()，您不会导出 Firebase Auth，而只会导出 Firestore。因此 firebase.auth().signInWithEmailAndPassword() 不起作用，您将被重定向到路由器中的默认页面/组件，即索引

按如下方式修改您的代码应该可以解决问题。

Firebase 配置

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

const firebaseConfig = {....};

firebase.initializeApp(firebaseConfig);

const db = firebase.firestore();
const auth = firebase.auth();


export { db, auth };

在 Vue.js 组件中

//...
<script>
const fb = require("../firebaseConfig.js");   //Adapt the path according to your files/folders structure
//....

methods: {
  loginUser(){
   if(this.email && this.password){
    fb.auth.signInWithEmailAndPassword(this.email, this.password).then(() => {
      this.$router.push({name: 'Index'})
    }).catch(err => {
     alert(err.message)
    })
   } else {
    this.feedback = 'Please enter email & password.'
   }
  }
}
//....
</script>