маршрутизатор не перенаправляет с первой попытки

Question

У меня есть приложение Vue, которое подключено к Firebase и использует маршрутизатор Vue. У меня есть страница входа и страница UserProfile. Когда пользователь вводит свои учетные данные, я хочу перенаправить их на страницу пользователя с помощью маршрутизатора, например:

submit() {
 firebase
 .auth()
 .signInWithEmailAndPassword(this.form.email, this.form.password)
 .then(data => {
   console.log("data", data);
   this.$router.push({ name: "profile" }).catch(err => {
     console.log("err");
   });
 })
 .catch(err => {
   this.error = err.message;
 });
}

Странно то, что когда я пытаюсь войти, Первая попытка отображает «данные» в консоли, а затем «err» (который не определен), и он не перенаправляет, но все еще входит в учетную запись пользователя. Когда я снова нажимаю кнопку «Отправить», он снова показывает «данные», но нет » err 'и перенаправляет на страницу UserProfile. Я не могу понять, почему это происходит, будет полезна любая помощь!

Форма и код кнопки:

<form action="#" @submit.prevent="submit">
          <div class="form-group row">
            <label for="email" class="col-md-4 col-form-label text-md-right">Email</label>
            <div class="col-md-6">
              <input id="email" type="email" class="form-control"
                name="email" value required autofocus v-model="form.email"/>
            </div>
          </div>

          <div class="form-group row">
            <label for="password" class="col-md-4 col-form-label text-md-right">Password</label>
            <div class="col-md-6">
              <input id="password" type="password" class="form-control"
                name="password" required v-model="form.password"/>
            </div>
          </div>
          <div class="form-group row mb-0">
            <div class="col-md-8 offset-md-4">
              <button type="submit" class="btn btn-primary">Login</button>
            </div>
          </div>
        </form>

плюс способ отправки:

methods: {
 submit() {
   firebase
     .auth()
     .signInWithEmailAndPassword(this.form.email, this.form.password)
     .then(data => {
       console.log("data", data);
       this.$router.push({ name: "profile" }).catch(err => {
         console.log("err", err);
       });
     })
     .catch(err => {
       this.error = err.message;
     });
  }
}

Конфигурация маршрутизатора (индекс. js):

Vue.use(Router);

const router = new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
  {
    path: "*",
    redirect: "/games"
  },
  {
    path: "/games",
    name: "games",
    component: Games
  },
  {
  path: "/games/:game",
  name: "game",
  component: Game
  },
  {
    path: "/profile",
    name: "profile",
    component: Profile,
    meta: {
      requiresAuth: true
    }
  },
  {
    path: "/login",
    name: "login",
    component: Login
  },
  {
    path: "/register",
    name: "Register",
    component: Register
  }
]
});
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
  // this route requires auth, check if logged in
  // if not, redirect to login page.
  if (!store.getters.user.loggedIn) {
  next({ name: "login" });
  } else {
    next(); // go to wherever I'm going
  }
} else {
 next(); // does not require auth, make sure to always call next()!
}
});
export default router;

Answer 1

Вероятно, есть некоторые побочные эффекты из-за значения action. На самом деле вам не нужно отправлять форму, просто вызовите метод Firebase signInWithEmailAndPassword().

Я бы изменил ваш код следующим образом:

шаблон:

 <form>
      <div class="form-group row">
        <label for="email" class="col-md-4 col-form-label text-md-right">Email</label>
        <div class="col-md-6">
          <input id="email" type="email" class="form-control"
            name="email" value required autofocus v-model="form.email"/>
        </div>
      </div>

      <div class="form-group row">
        <label for="password" class="col-md-4 col-form-label text-md-right">Password</label>
        <div class="col-md-6">
          <input id="password" type="password" class="form-control"
            name="password" required v-model="form.password"/>
        </div>
      </div>
      <div class="form-group row mb-0">
        <div class="col-md-8 offset-md-4">
          <button type="button" @click="login" class="btn btn-primary">Login</button>
        </div>
      </div>
 </form> 

скрипт:

methods: {
 login() {
   firebase
     .auth()
     .signInWithEmailAndPassword(this.form.email, this.form.password)
     .then(data => {
       console.log("data", data);
       this.$router.push({ name: "profile" })
       });
     })
     .catch(err => {
       this.error = err.message;
     });
  }
}