vue 中最奇怪的行为 - 注释代码正在运行 [英] Weirdest behavior from vue - commented code is running

问题描述

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

I have a vue project with firestore as database. I used to log in user with the following function:

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.'
 }
}

我编译并运行了这段代码，它运行良好.然后按照控制台日志的提示，我改变了

I compiled and ran this code and it was running fine. Then as per the console log suggests, I changed

import firebase from 'firebase'

到

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

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

Since then I have observed a weirdest behavior. Even if I comment out the code this.$router.push({name: 'Index'}), it will still redirect me to the index page upon logging in. I have no idea what to do. Although, eventually I want to send the users to the index page as they log in, it shouldn't work if the code is commented out! What could I be doing wrong?

Firebase 配置:

Firebase config:

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:

Router/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

推荐答案

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

By doing export default firebaseApp.firestore() in your Firebase config file you do not export Firebase Auth but only Firestore. Therefore firebase.auth().signInWithEmailAndPassword() does not work and you are redirected to the default page/component in your router, i.e. Index

如下修改您的代码应该可以解决问题.

Modifying your code as follows should do the trick.

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>

这篇关于vue 中最奇怪的行为 - 注释代码正在运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！