Firebase signInWithEmailAndPassword не работает в vue. js - PullRequest
Новая
       29

Firebase signInWithEmailAndPassword не работает в vue. js

0 голосов
/ 20 марта 2020

Я пытаюсь заставить часть входа работать над моим веб-приложением, но оно не работает должным образом. Всякий раз, когда я нажимаю кнопку входа в систему, страница либо обновляется, и URL обновляется с учетными данными и остается на той же странице, ИЛИ маршрутизатор выдвигается и переходит на «домашнюю страницу» без входа пользователя в систему.

Я также следуйте этому руководству для справки: https://blog.logrocket.com/vue-firebase-authentication/

Что странно, так это то, что регистрационная часть работает просто отлично.

Вход. vue

<div class="card-body">
          <form>
            <!-- email -->
            <div class="input-group form-group">
              <div class="input-group-prepend">
                <span class="input-group-text"><i class="fas fa-user"></i></span>
              </div>
              <input id="email" type="email" class="form-control" name="email" placeholder="e-mail" value required autofocus v-model="form.email" />
            </div>
            <!-- password -->
            <div class="input-group form-group">
              <div class="input-group-prepend">
                <span class="input-group-text"><i class="fas fa-key"></i></span>
              </div>
              <input id="password" type="password" class="form-control" name="password" placeholder="password" required v-model="form.password" />
            </div>
            <!-- error -->
            <div v-if="error" class="alert alert-danger animated shake">{{ error }}</div>
            <br />

            <!-- login -->
            <div class="form-group d-flex justify-content-between">
              <div class="row align-items-center remember"><input type="checkbox" v-model="form.rememberMe" />Remember Me</div>
              <input type="submit" @click="submit" value="Login" class="btn float-right login_btn" />
            </div>
          </form>
        </div>

Сценарий при входе. vue

<script>
  import firebase from 'firebase';

  export default {
    data() {
      return {
        form: {
          email: '',
          password: '',
          rememberMe: false
        },
        error: null
      };
    },
    methods: {
      submit() {
        firebase
          .auth()
          .signInWithEmailAndPassword(this.form.email, this.form.password)
          .catch(err => {
            this.error = err.message;
          })
          .then(data => {
            this.$router.push({ name: 'home' });
          });
      }
    }
  };
</script>

Магазин. js

import Vue from 'vue';
import Vuex from 'vuex';

import profile from './modules/profile';
import authenticate from './modules/authenticate';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    profile,
    authenticate
  }
});

Аутентификация. js в магазине 

const state = {
  user: {
    loggedIn: false,
    data: null
  }
};

const getters = {
  user(state) {
    return state.user;
  }
};

const mutations = {
  SET_LOGGED_IN(state, value) {
    state.user.loggedIn = value;
  },
  SET_USER(state, data) {
    state.user.data = data;
  }
};

const actions = {
  fetchUser({ commit }, user) {
    commit('SET_LOGGED_IN', user !== null);
    if (user) {
      commit('SET_USER', {
        displayName: user.displayName,
        email: user.email
      });
    } else {
      commit('SET_USER', null);
    }
  }
};

export default {
  state,
  mutations,
  actions,
  getters
};

1 Ответ

1 голос
/ 20 марта 2020

Вероятно, потому что вы присваиваете кнопке тип submit, ваша форма отправляется до запуска метода Firebase.

Вы должны изменить код кнопки с 

 <input type="submit" @click="submit" value="Login" class="btn float-right login_btn" />

до 

 <input type="button" @click="submit" value="Login" class="btn float-right login_btn" />

Подробнее о типах кнопок см. в спецификации W3 .

...