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()

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