首页 前端开发 Firebase signInWithEmailAndPassword 在 vue.js 中不起作用
Firebase signInWithEmailAndPassword 在 vue.js 中不起作用
[英] Firebase signInWithEmailAndPassword not working in vue.js
本文介绍了Firebase signInWithEmailAndPassword 在 vue.js 中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试让登录部分在我的 web 应用程序上工作，但它无法正常工作.每当我按下登录按钮时，页面要么刷新并且 url 使用凭据更新并保持在同一页面上，要么路由器被推送并转到主页"而无需用户登录.
我也参考了本指南:https://blog.logrocket.com/vue-firebase-authentication/
奇怪的是，注册部分运行良好.
SignIn.vue
<表格><!-- 电子邮件--><div class="input-group form-group"><div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-user"></i></span>
<input id="email" type="email" class="form-control" name="email" placeholder="e-mail" value required autofocus v-model="form.email"/>
<!-- 密码--><div class="input-group form-group"><div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-key"></i></span>
<input id="password" type="password" class="form-control" name="password" placeholder="password" required v-model="form.password"/>
<!-- 错误--><div v-if="error" class="alert alert-danger 动画震动">{{ error }}</div><br/><!-- 登录--><div class="form-group d-flex justify-content-between"><div class="row align-items-center remember"><input type="checkbox" v-model="form.rememberMe"/>记住我</div><input type="submit" @click="submit" value="Login" class="btn float-right login_btn"/>
</表单>
SignIn.vue 中的脚本
Store.js
从'vue'导入Vue；从 'vuex' 导入 Vuex；从./modules/profile"导入配置文件；从'./modules/authenticate'导入认证；Vue.use(Vuex);导出默认新 Vuex.Store({模块:{轮廓，认证}});商店中的 Authenticate.js
const state = {用户:{登录:假，数据:空}};const 吸气剂 = {用户(状态){返回 state.user;}};常量突变 = {SET_LOGGED_IN(状态，值){state.user.loggedIn = 值；},SET_USER(状态，数据){state.user.data = 数据；}};常量动作 = {fetchUser({ 提交 }, 用户) {commit('SET_LOGGED_IN', 用户 !== null);如果(用户){提交('SET_USER'，{显示名称:user.displayName，电子邮件:user.email});} 别的 {commit('SET_USER', null);}}};导出默认{状态，突变，行动，吸气剂};
解决方案
可能是因为您将 submit 类型分配给您的按钮，您的表单在 Firebase 方法被触发之前提交.
>
您应该从
更改按钮代码 到
<小时>
请参阅W3 规范 ，了解有关按钮类型的更多详细信息.
I'm trying to get the sign in part working on my webapp but it's not working properly.
Whenever I press the login button the page either refreshes and the url gets updated with the credentials and stays at the same page OR the router gets pushed and goes to the 'homepage' without logging the user in.
I also followed this guide for reference: https://blog.logrocket.com/vue-firebase-authentication/
What's weird is that the sign up part is working just fine.
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>
Script in SignIn.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>
Store.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
}
});
Authenticate.js in store
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
};
解决方案
It is probably because you assign the submit type to your button, your form is submitted before the Firebase method is triggered.
You should change the button code from
<input type="submit" @click="submit" value="Login" class="btn float-right login_btn" />
to
<input type="button" @click="submit" value="Login" class="btn float-right login_btn" />
See the W3 specification for more detail on button types.
这篇关于Firebase signInWithEmailAndPassword 在 vue.js 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
