firebase - 路由器在第一次尝试时不重定向
问题描述
我有一个连接到 Firebase 并使用 Vue 路由器的 Vue 应用程序。我有一个登录页面和 UserProfile 页面,当用户输入他们的凭据时,我想使用路由器将它们重定向到 UserPage,如下所示:
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;
});
}
奇怪的是,当我尝试登录时,首先尝试在控制台中显示“数据”,然后显示“错误”(未定义)并且它没有重定向,但仍然登录到用户帐户。当我点击提交按钮时再次,然后它再次显示“数据”但没有“错误”并重定向到 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;
});
}
}
路由器配置(index.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;
解决方案
action
由于该值,可能存在一些副作用。您实际上不需要提交表单,只需调用 FirebasesignInWithEmailAndPassword()
方法即可。
我会改变你的代码如下:
模板:
<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;
});
}
}
推荐阅读
- php - 通过 php-odbc 连接时如何修复编码?
- c# - 我想比较两个字符串并希望得到可能的匹配项
- powershell - Powershell变量初始化影响函数返回?
- android - 在 Flutter 中将重复列表值转换为 DISTINCT
- json - 使用 JQ 将 Geojson 与 json 字段附加
- python - 模板不存在即使所有事情都正确也不起作用
- python - 简单循环中的意外列表丢失
- powershell - power shell 中的日期计算
- firebase - 在 firebase 中重新部署相同的 Cloud Function 是否会占用额外的空间?
- mysql - 包含许多产品的在线商店数据库