必须点击两次登录按钮;使用vue路由器和firebase身份验证

Question

我已经设置了一个路由器保护，所以当我登录而不是我的路由器将其推到仪表板时，它需要firebase进行身份验证，它认为我没有登录，我必须等待并再次单击登录按钮。

有没有办法等它登录，然后路由器把我推到仪表板上。

我是这方面的新手，如有任何帮助，我将不胜感激。

//routes 
export const routes = [
{
path: "/adduser",
component: AddUser,
meta: {
requiresAuth: true
}
},
{
name: "details",
path: "/details/:id",
component: User,
meta: {
requiresAuth: true
}
},
{
path: "/register",
component: Register,
meta: {
requiresGuest: true
}
},
{
path: "/login",
component: Login,
meta: {
requiresGuest: true
}
},
{
path: "/dashboard",
component: Dashboard,
meta: {
requiresAuth: true
}
},
{
path: "/",
component: Dashboard,
meta: {
requiresAuth: true
}
},
{
name: "editUser",
path: "edituser/:id",
component: EditUser,
meta: {
requiresAuth: true
}
}
];
//the login function 
emailLogin(email, password) {
firebase
.auth()
.signInWithEmailAndPassword(email, password)
.then(this.$router.push("/dashboard"))
.then(() => {
this.$store.dispatch("auth/login");
});
}
//the router guard
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!firebase.auth().currentUser) {
next({
path: "/login",
query: {
redirect: to.fullPath
}
});
} else {
next();
}
} else if (to.matched.some(record => record.meta.requiresGuest)) {
if (firebase.auth().currentUser) {
next({
path: "/"
});
} else {
next();
}
} else {
next();
}
});

Answer 1

在then(this.$router.push("/dashboard"))内部，push给出了一个promise，该promise应该返回给箭头函数。

因此，新的登录功能将是：

emailLogin(email, password) {
firebase
.auth()
.signInWithEmailAndPassword(email, password)
.then(() => {
this.$router.push("/dashboard");
})
.then(() => {
this.$store.dispatch("auth/login");
});
}