v-on 处理程序中的错误：“auth 不是函数”-Vue js

Question

我正在尝试在 VueJS 项目中使用 firebase。

我的 api 凭据在一个名为 fb.js 的文件中定义

import firebase from 'firebase'

  var firebaseConfig = {
    apiKey: "*****",
    authDomain: "*****",
    projectId: "*****",
    storageBucket: "*****",
    messagingSenderId: "******",
    appId: "*****"
  };
 export const fb = firebase.initializeApp(firebaseConfig);
 

我也尝试过导入以下模块，但还是不行：

import firebase from "firebase/app";
import "firebase/auth";

我的登录/index.js

<template>
  <v-app>
      <v-content>
          <v-container class="fill-height" fluid>
            <v-row align="center" justify="center">
                <v-col cols="12" sm="4" md="4">
                    <v-card class="elevation-12">
                        <v-card-text class="pa-7 mt-12">
                            <v-row>
                                <v-col cols="12" md="8">
                                    <router-link to="/">
                                        <v-img  max-width="230px" src="/logo.png" > </v-img>
                                    </router-link>
                                </v-col>
                            </v-row>
                            <h2 class="text-center mt-10 mb-5">Sign in to your BienSaude account</h2>
                            <div class="text-center mb-4">
                                Don't have an account? 
                                <router-link to="/register">
                                    <a class="primary--text text-decoration-underline">Register</a> 
                                </router-link>
                            </div>
                            <v-form v-model="valid" class="valid">
                                <v-text-field
                                v-model="email"
                                label="Email"
                                name="Email"
                                prepend-icon="email"
                                type="text"
                                color="primary"
                                :rules="emailRules"
                                />
                                <v-text-field
                                    v-model="password"
                                    prepend-icon="lock"
                                    :append-icon="show ? 'visibility' : 'visibility_off'"
                                    :rules="[rules.required]"
                                    :type="show ? 'text' : 'password'"
                                    name="password"
                                    label="Enter Password"
                                    @click:append="show = !show"
                                ></v-text-field>
                            </v-form>
                            <div class="text-center my-7">
                            <v-btn color="primary"  :disabled="!valid" id="custom-disabled" @click="login"> SIGN IN</v-btn>
                            </div>
                            <div>
                                <div class="text-center primary--text text-decoration-underline" href="#four">
                                    <a>Forget your password?</a> 
                                </div>
                            </div>
                        </v-card-text>   
                    </v-card>
                </v-col>
            </v-row>
          </v-container>
      </v-content>
  </v-app>
</template>
<script>

import fb from '@/fb'

export default {
    

    data: () => ({
        step: 1,
        show: false,
        show1: false,
        valid:false,
        password: '',
        email: '',
        emailRules: [
        v => !!v || 'E-mail is required',
        v => /^(([^<>ºª*+`´!"#$%=&/()\]\\.,;:\s@"]+(\.[^<>()\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,24}))$/.test(v) || 'E-mail must be valid',
      ],
      rules: {
        required: (value) => !!value || " Password required.",
        
      },  
    }),

    props: {
        source:String
    },

    methods: {
        login(){
            fb.auth().signInWithEmailAndPassword(this.email, this.password)
            .then( data => {
            data.user
            this.$router.replace('user');
        })
                .catch(function(error) {
                    // Handle Errors here.
                    var errorCode = error.code;
                    var errorMessage = error.message;
                    if (errorCode === 'auth/wrong-password') {
                        alert('Wrong password.');
                    } else {
                        alert(errorMessage);
                    }
                    console.log(error);
                });
    },
    },
};
</script>

在我的注册中，我有代码 -fb.auth ()。 SignInWithEmailAndPassword (this.email, this.password) - 但对于注册和“auth()”工作正常

Answer 1

以下应该可以解决问题：

fb.js

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 };

组件

<template>
 ....
</template>
<script>

const fb = require("fb.js");   // Adapt here depending on your folder structure, e.g. const fb = require("../fb.js");

export default {
    ...
    methods: {
        login(){
            fb.auth.signInWithEmailAndPassword(this.email, this.password)
            .then(...)
         // ...

};
</script>