使用firebase认证与vue 3路由保护

Question

我需要对vue路由器使用firebase认证。

我有这个简单的保护，但我注意到，有时用户会看到一段时间的页面，如果他们没有记录。

router.beforeEach( async (to, from) => {
onAuthStateChanged( getAuth(app), (user) => {
console.log(user, to.meta.requireAuth)
if( to.meta.requireAuth && !user ) {
return {
name: 'Signin'
}
}
})
})

我也有这种控件在我的组件中，但我正在寻找一些全局的东西来防止未注册的用户看到应用程序。

任何建议吗?

Answer 1

你可以把onauthstatechange包在一个Promise中，让你的before都是一个async函数。

// in some global file
export async function getCurrentUser(): Promise<User | null> {
return new Promise((resolve, reject) => {
const unsubscribe = auth.onAuthStateChanged((user) => {
unsubscribe();
resolve(user);
}, reject);
});
}

// your router file
router.beforeEach(async (to, from, next) => {
if (to.matched.some((record) => record.meta.publicAccess)) {
next();
} else {
const currentUser = await getCurrentUser();
if (currentUser) {
next();
} else {
next({ name: "Login" });
}
}
});

// Your route object
{
name: "Login",
path: "/login",
component: () => import("@/views/authentication/Login.vue"),
}