Question

我目前正在使用Vue JS Webpack模板来构建我的应用。每次我尝试使用其中一个auth提供程序登录时，都会收到以下错误：

Login.vue？a071：44未捕获TypeError： WEBPACK_IMPORTED_MODULE_0__firebaseApp .a.auth.GoogleAuthProvider不是构造函数

以下是我的代码的相关部分：
我的firebase配置文件

import firebase from 'firebase'
let config = {
  apiKey : 'xxxxxxx',
  authDomain: 'xxxxxx',
  databaseURL: 'xxxxxxx',
  projectId: 'yyyyyy'
}
export default firebase.initializeApp(config)

和我的Login.Vue登录方法

＆＃13;

<template>
	<div class="login">
		<div v-if="loading" class="modal-loading-white">
			<img class="loader-img" src="/img/loader-gray.svg">
		</div>
		<div>Login</div>
		<div v-show="this.errorMsg">{{ errorMsg }}</div>
		<div><label>Email </label>: <input type="email" v-model.trim="emailForm"/></div><br>
		<div><label>Password </label>: <input type="password" v-model.trim="passwordForm"/></div><br>
		<button v-on:click="logInUserWithProvider('email')">Login</button><br>
		<div><router-link to="forgot">Forget Your Password?</router-link></div>
		<button v-on:click="logInUserWithProvider('google')">Google</button>
		<button v-on:click="logInUserWithProvider('facebook')">Facebook</button>
	</div>
</template>

<script>
  import firebase from '../firebaseApp'
  export default {
	name: 'loginForm',
	data: function () {
		return {
			emailForm:'',
			passwordForm: '',
			errorMsg: '',
			loading: false
		}
	},
	methods: {
		logInUserWithEmail: function() {
			if (this.emailForm && this.passwordForm) {
				this.loading = true;
				firebase.auth().signInWithEmailAndPassword(this.emailForm, this.passwordForm).catch(function (error) {
					this.errorMsg = error.message;
					this.loading = false;
				}.bind(this));
			} else {
				this.errorMsg = 'Email and password can\'t be empty';
			}
		},
		logInUserWithProvider: function(provider) {
			if (provider == 'google') {
				var authProvider = new firebase.auth.GoogleAuthProvider();
				this.loading = true;
				firebase.auth().signInWithRedirect(authProvider);
			} else if (provider == 'facebook') {
				var authProvider = new firebase.auth.FacebookAuthProvider();
				this.loading = true;
				firebase.auth().signInWithRedirect(authProvider);
			} else if (provider == 'email') {
				this.logInUserWithEmail();
			}

			firebase.auth().onAuthStateChanged((user) => {
				if (user) {					
					this.emailForm = '';
					this.passwordForm = '';
					this.$emit('login');
				}
			});
		}
	}	
  }
</script>

＆＃13;

Answer 1

您尝试导入的是配置数据容器。将您的firebase配置文件更改为

import firebase from 'firebase'
let config = {
  apiKey : 'xxxxxxx',
  authDomain: 'xxxxxx',
  databaseURL: 'xxxxxxx',
  projectId: 'yyyyyy'
}
firebase.initializeApp(config)
export default firebase

使用firebase auth时，AuthProvider不是构造函数，VueJS Webpack

1 个答案: