Question

我正在尝试使该标志部分在我的Web应用程序上运行，但不能正常工作。每当我按下登录按钮时，页面就会刷新并且url将使用凭据进行更新并停留在同一页面上，或者路由器将被推入并进入“主页”而无需登录用户。

我还遵循了该指南作为参考：https://blog.logrocket.com/vue-firebase-authentication/

奇怪的是，注册部分工作得很好。

SignIn.vue

class ...
{
        private LogLevel LevelName;
        [Required]
        public int Level { get { return (int)LevelName; } set { LevelName = (LogLevel)Level; } }
}

SignIn.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>

Store.js

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

商店中的Authenticate.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
  }
});

Answer 1

可能是因为您将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 specification。

Firebase signInWithEmailAndPassword在vue.js中不起作用

1 个答案: