Vue js с firebase не переключает страницы


Vue js с firebase не переключает страницы

26.11.2020 05:17:16 Просмотров 42 Источник

Поэтому моя проблема заключается в том, что когда я вхожу в систему с firebase и моя смонтированная функция должна переключать компонент, я перепробовал много вещей, но ничего не работает. Мне просто нужен способ, с помощью которого мой маршрутизатор переключит страницу после того, как я войду в систему.

<template>
  <div class="vue-tempalte" id="regForm">
    <form>
      <h1 id="middle">Sign In</h1>

      <div class="form-group">
        <label>Email address</label>
        <input type="email" id="email" v-model="email" required />
      </div>

      <div class="form-group">
        <label>Password</label>
        <input type="password" id="password" v-model="password" required />
      </div>

      <button type="submit" @click="login" class="button is-light" id="btn1">
        Sign In
      </button>
    </form>
  </div>
</template>

<style scoped>
</style>

<script>
import firebase from "firebase";
export default {
  name: "login",
  data() {
    return {
      email: "",
      password: "",
    };
  },
  mounted: function () {
    if (firebase.auth().currentUser) this.$router.replace("/HeaderLoggedIn");
  },
  methods: {
    login: function () {
      firebase
        .auth()
        .signInWithEmailAndPassword(this.email, this.password)
        .then((user) => {
          console.log(user.user);
        });
    },
  },
};
</script>

У вопроса есть решение - Посмотреть?

Ответы - Vue js с firebase не переключает страницы / Vue js with firebase not switching pages

bilgisayar okulu

26.11.2020 05:35:13

Вместо этого метода вы можете попробовать установить глобальный маршрутизатор. main.js файл и проверка состояния аутентификации перед входом на каждую страницу и все в одном месте, а не отдельно для каждой страницы, тогда вы можете сделать что-то на основе каждого состояния.

Frank van Puffelen

26.11.2020 06:23:01

Проблема заключается в этом коде:

  mounted: function () {
    if (firebase.auth().currentUser) this.$router.replace("/HeaderLoggedIn");
  },

Сейчас вы проверяете, вошел ли пользователь в систему при монтировании компонента. Это происходит один раз, в то время как пользователь проходит аутентификацию много раз, так как это асинхронная операция.

Вместо этого вам нужно будет *прослушивать изменения состояния аутентификации, как показано в первом фрагменте документации по определению вошедшего пользователя:

  mounted: function () {
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        this.$router.replace("/HeaderLoggedIn");
      }
    });
  },
Помочь в развитии проекта:
Закрыть X